# IVS-Broadcast-SDK: Gemischte Geräte Gemischte Geräte sind Audio- und Videogeräte, die mehrere Eingangsquellen auf einen einzigen Ausgang kombinieren. Geräte mischen ist ein leistungsstarkes Feature, mit dem Sie mehrere Bildschirmelemente (Video) und Audiospuren definieren und verwalten können. Sie können Video und Audio aus mehreren Quellen wie Kameras, Mikrofonen, Bildschirmaufnahmen sowie von Ihrer App generiertes Audio und Video kombinieren. Sie können mit Übergängen diese Quellen im Video, das Sie an IVS streamen, verschieben und während des Streamings Quellen hinzufügen oder entfernen. Gemischte Geräte gibt es in Bild- und Audioausführungen. Um ein Gemischtes-Bild-Gerät zu erstellen, rufen Sie auf: `DeviceDiscovery.createMixedImageDevice()` auf Android `IVSDeviceDiscovery.createMixedImageDevice()` auf iOS Das zurückgegebene Gerät kann wie jedes andere Gerät an eine `BroadcastSession` (Streaming mit niedriger Latenz) oder `Stage` (Echtzeit-Streaming) angeschlossen werden. ## Terminologie ![Terminologie für gemischte Geräte mit IVS-Broadcasting.](http://docs.aws.amazon.com/de_de/ivs/latest/RealTimeUserGuide/images/Broadcast_SDK_Mixer_Glossary.png) | Begriff | Beschreibung | | --- | --- | | Gerät | Eine Hardware- oder Softwarekomponente, die Audio- oder Bild-Eingaben produziert. Beispiele für Geräte sind Mikrofone, Kameras, Bluetooth-Headsets und virtuelle Geräte wie Bildschirmaufnahmen oder benutzerdefinierte Image-Eingänge. | | Gemischtes Gerät | Ein `Device`, das wie jedes andere `Device` an ein `BroadcastSession` angehängt werden kann, jedoch mit zusätzlichen APIs, die das Hinzufügen von `Source`-Objekten ermöglichen. Gemischte Geräte verfügen über interne Mischer, die Audio- oder Bilddateien zusammensetzen und so einen einzigen Audio- und Bildausgangsstream erzeugen.
Gemischte Geräte gibt es in Bild- und Audioausführungen. | | Konfiguration gemischter Geräte | Ein Konfigurationsobjekt für das gemischte Gerät. Bei gemischten Geräten mit Bildern werden dadurch Eigenschaften wie Abmessungen und Bildrate konfiguriert. Bei gemischten Geräten mit Audiodateien wird dadurch die Kanalanzahl konfiguriert. | | Quelle | Ein Container, der die Position eines visuellen Elements auf dem Bildschirm und die Eigenschaften einer Audiospur im Audiomix definiert. Ein gemischtes Gerät kann mit null oder mehr Quellen konfiguriert werden. Quellen erhalten eine Konfiguration, die sich darauf auswirkt, wie die Medien der Quelle verwendet werden. Das obige Image zeigt vier Bildquellen:[See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/ivs/latest/RealTimeUserGuide/broadcast-mixed-devices.html) | | Konfiguration der Quelle | Ein Konfigurationsobjekt für die Quelle, welche in ein gemischtes Gerät geht. Die vollständigen Konfigurationsobjekte werden unten beschrieben. | | Übergang | Um einen Slot an eine neue Position zu verschieben oder einige seiner Eigenschaften zu ändern, verwenden Sie `MixedDevice.transitionToConfiguration()`. Diese Methode verwendet:[See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/ivs/latest/RealTimeUserGuide/broadcast-mixed-devices.html) | ## Gemischtes Audio-Gerät ### Konfiguration `MixedAudioDeviceConfiguration` auf Android `IVSMixedAudioDeviceConfiguration` auf iOS | Name | Typ | Beschreibung | | --- | --- | --- | | `channels` | Ganzzahl | Anzahl der Ausgangskanäle des Audiomischers. Gültige Werte: 1 und 2. 1 ist Mono-Audio; 2 Stereo-Audio. Standard: 2 | ### Konfiguration der Quelle `MixedAudioDeviceSourceConfiguration` auf Android `IVSMixedAudioDeviceSourceConfiguration` auf iOS | Name | Typ | Beschreibung | | --- | --- | --- | | `gain` | Gleitkommazahl | Audio-Gain. Dies ist ein Multiplikator, daher erhöht jeder Wert über 1 den Gain; jeder Wert unter 1 verringert ihn. Zulässige Werte: 0 bis 2. Standard: 1 | ## Gemischtes Bild-Gerät ### Konfiguration `MixedImageDeviceConfiguration` auf Android `IVSMixedImageDeviceConfiguration` auf iOS | Name | Typ | Beschreibung | | --- | --- | --- | | `size` | Vec2 | Größe der Video-Bildfläche. | | `targetFramerate` | Ganzzahl | Anzahl der Ziel-Frames pro Sekunde für das gemischte Gerät. Im Durchschnitt sollte dieser Wert erreicht werden, aber das System kann unter bestimmten Umständen Frames auslassen (z. B. hohe CPU- oder GPU-Auslastung). | | `transparencyEnabled` | Boolesch | Dies ermöglicht das Mischen mithilfe der `alpha`-Eigenschaft in Bildquellenkonfigurationen. Wenn Sie diese Einstellung auf `true` einstellen, erhöht sich der Speicher- und CPU-Verbrauch. Standardwert: `false`. | ### Konfiguration der Quelle `MixedImageDeviceSourceConfiguration` auf Android `IVSMixedImageDeviceSourceConfiguration` auf iOS | Name | Typ | Beschreibung | | --- | --- | --- | | `alpha` | Gleitkommazahl | Alpha des Slots. Dies ist multiplikativ mit allen Alpha-Werten im Image. Gültige Werte: 0 bis 1, wobei 0 vollständig undurchsichtig und 1 vollständig transparent ist. Standard: 1 | | `aspect` | AspectMode | Aspekt-Ratio-Modus für jedes Image, das im Slot gerendert wird. Zulässige Werte:[See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/ivs/latest/RealTimeUserGuide/broadcast-mixed-devices.html)
Standardwert: `Fit` | | `fillColor` | Vec4 | Füllfarbe, die mit `aspect Fit` verwendet wird, wenn die Seitenverhältnisse von Slot und Bild nicht übereinstimmen. Das Format ist (rot, grün, blau, alpha). Gültiger Wert (für jeden Kanal): 0 bis 1. Standard: 0.0.0.0 | | `position` | Vec2 | Position des Slots (in Pixel) relativ zur linken oberen Ecke der Bildfläche. Der Ursprung des Slots ist ebenfalls oben links. | | `size` | Vec2 | Größe des Slots in Pixel. Ein Festlegen dieses Wertes setzt `matchCanvasSize` außerdem auf `false`. Standard: (0, 0); weil `matchCanvasSize` jedoch standardmäßig `true` ist, ist die gerenderte Slotgröße gleich der Bildflächengröße, nicht (0, 0). | | `zIndex` | Gleitkommazahl | Relative Reihenfolge der Slots. Slots mit höherem `zIndex`-Wert werden über Slots mit niedrigerem `zIndex`-Wert gelegt. | ## Erstellen und Konfigurieren eines gemischten Bildgerätes ![Konfigurieren einer Broadcast-Sitzung zum Mischen](http://docs.aws.amazon.com/de_de/ivs/latest/RealTimeUserGuide/images/Broadcast_SDK_Mixer_Configuring.png) Hier erstellen wir eine Szene, die der am Anfang dieses Handbuchs ähnelt, mit drei Bildschirmelementen: + Slot unten links für eine Kamera. + Slot unten rechts für eine Logo-Überlagerung. + Slot oben rechts für einen Film. Beachten Sie, dass der Ursprung für die Bildfläche die obere linke Ecke ist und dies für alle Slots gilt. Wenn Sie also einen Slot an (0, 0) positionieren, wird er in die obere linke Ecke gesetzt, wobei der gesamte Slot sichtbar ist. ### iOS ``` let deviceDiscovery = IVSDeviceDiscovery() let mixedImageConfig = IVSMixedImageDeviceConfiguration() mixedImageConfig.size = CGSize(width: 1280, height: 720) try mixedImageConfig.setTargetFramerate(60) mixedImageConfig.isTransparencyEnabled = true let mixedImageDevice = deviceDiscovery.createMixedImageDevice(with: mixedImageConfig) // Bottom Left let cameraConfig = IVSMixedImageDeviceSourceConfiguration() cameraConfig.size = CGSize(width: 320, height: 180) cameraConfig.position = CGPoint(x: 20, y: mixedImageConfig.size.height - cameraConfig.size.height - 20) cameraConfig.zIndex = 2 let camera = deviceDiscovery.listLocalDevices().first(where: { $0 is IVSCamera }) as? IVSCamera let cameraSource = IVSMixedImageDeviceSource(configuration: cameraConfig, device: camera) mixedImageDevice.add(cameraSource) // Top Right let streamConfig = IVSMixedImageDeviceSourceConfiguration() streamConfig.size = CGSize(width: 640, height: 320) streamConfig.position = CGPoint(x: mixedImageConfig.size.width - streamConfig.size.width - 20, y: 20) streamConfig.zIndex = 1 let streamDevice = deviceDiscovery.createImageSource(withName: "stream") let streamSource = IVSMixedImageDeviceSource(configuration: streamConfig, device: streamDevice) mixedImageDevice.add(streamSource) // Bottom Right let logoConfig = IVSMixedImageDeviceSourceConfiguration() logoConfig.size = CGSize(width: 320, height: 180) logoConfig.position = CGPoint(x: mixedImageConfig.size.width - logoConfig.size.width - 20, y: mixedImageConfig.size.height - logoConfig.size.height - 20) logoConfig.zIndex = 3 let logoDevice = deviceDiscovery.createImageSource(withName: "logo") let logoSource = IVSMixedImageDeviceSource(configuration: logoConfig, device: logoDevice) mixedImageDevice.add(logoSource) ``` ### Android ``` val deviceDiscovery = DeviceDiscovery(this /* context */) val mixedImageConfig = MixedImageDeviceConfiguration().apply { setSize(BroadcastConfiguration.Vec2(1280f, 720f)) setTargetFramerate(60) setEnableTransparency(true) } val mixedImageDevice = deviceDiscovery.createMixedImageDevice(mixedImageConfig) // Bottom Left val cameraConfig = MixedImageDeviceSourceConfiguration().apply { setSize(BroadcastConfiguration.Vec2(320f, 180f)) setPosition(BroadcastConfiguration.Vec2(20f, mixedImageConfig.size.y - size.y - 20)) setZIndex(2) } val camera = deviceDiscovery.listLocalDevices().firstNotNullOf { it as? CameraSource } val cameraSource = MixedImageDeviceSource(cameraConfig, camera) mixedImageDevice.addSource(cameraSource) // Top Right val streamConfig = MixedImageDeviceSourceConfiguration().apply { setSize(BroadcastConfiguration.Vec2(640f, 320f)) setPosition(BroadcastConfiguration.Vec2(mixedImageConfig.size.x - size.x - 20, 20f)) setZIndex(1) } val streamDevice = deviceDiscovery.createImageInputSource(streamConfig.size) val streamSource = MixedImageDeviceSource(streamConfig, streamDevice) mixedImageDevice.addSource(streamSource) // Bottom Right val logoConfig = MixedImageDeviceSourceConfiguration().apply { setSize(BroadcastConfiguration.Vec2(320f, 180f)) setPosition(BroadcastConfiguration.Vec2(mixedImageConfig.size.x - size.x - 20, mixedImageConfig.size.y - size.y - 20)) setZIndex(1) } val logoDevice = deviceDiscovery.createImageInputSource(logoConfig.size) val logoSource = MixedImageDeviceSource(logoConfig, logoDevice) mixedImageDevice.addSource(logoSource) ``` ## Entfernen von Quellen Um eine Quelle zu entfernen, rufen Sie `MixedDevice.remove` mit dem `Source`-Objekt auf, das Sie entfernen möchten. ## Animationen mit Übergängen Die Übergangsmethode ersetzt die Konfiguration einesr Quelle durch eine neue Konfiguration. Dieser Ersatz kann zeitlich animiert werden, indem eine Dauer von mehr als 0 Sekunden festgelegt wird. ### Welche Eigenschaften können animiert werden? Nicht alle Eigenschaften in der Slot-Struktur können animiert werden. Alle Eigenschaften, die auf Float-Typen basieren, können animiert werden; andere Eigenschaften werden entweder am Anfang oder am Ende der Animation wirksam. | Name | Kann es animiert werden? | Auswirkungspunkt | | --- | --- | --- | | `Audio.gain` | Ja | Interpoliert | | `Image.alpha` | Ja | Interpoliert | | `Image.aspect` | Nein | Ende | | `Image.fillColor` | Ja | Interpoliert | | `Image.position` | Ja | Interpoliert | | `Image.size` | Ja | Interpoliert | | `Image.zIndex`
Hinweis: `zIndex` verschiebt 2D-Ebenen durch den 3D-Raum, so dass der Übergang stattfindet, wenn sich die beiden Ebenen irgendwann in der Mitte der Animation kreuzen. Dies könnte berechnet werden, hängt aber des `zIndex`-Start- und -Endwertes ab. Kombinieren Sie dies für einen reibungsloseren Übergang mit `alpha`. | Ja | Unbekannt | ### Einfache Beispiele: Im Folgenden finden Sie Beispiele für eine Vollbild-Kameraübernahme unter Verwendung der oben unter [Erstellen und Konfigurieren eines gemischten Bildgeräts definierten Konfiguration](#broadcast-mixed-image-device-creating-configuring). Dies wird 0,5 Sekunden lang animiert. #### iOS ``` // Continuing the example from above, modifying the existing cameraConfig object. cameraConfig.size = CGSize(width: 1280, height: 720) cameraConfig.position = CGPoint.zero cameraSource.transition(to: cameraConfig, duration: 0.5) { completed in if completed { print("Animation completed") } else { print("Animation interrupted") } } ``` #### Android ``` // Continuing the example from above, modifying the existing cameraConfig object. cameraConfig.setSize(BroadcastConfiguration.Vec2(1280f, 720f)) cameraConfig.setPosition(BroadcastConfiguration.Vec2(0f, 0f)) cameraSource.transitionToConfiguration(cameraConfig, 500) { completed -> if (completed) { print("Animation completed") } else { print("Animation interrupted") } } ``` ## Spiegelung der Übertragung | Um ein angeschlossenes Bildgerät in der Übertragung in diese Richtung zu spiegeln ... | Verwenden Sie einen negativen Wert für … | | --- | --- | | Horizontal | Die Breite des Slots | | Vertikal | Die Höhe des Slots | | Sowohl horizontal als auch vertikal | Die Slot-Breite und -Höhe | Die Position muss um denselben Wert angepasst werden, damit der Slot beim Spiegeln in die richtige Position gebracht wird. Im Folgenden finden Sie Beispiele für die horizontale und vertikale Spiegelung der Übertragung. ### iOS Horizontale Spiegelung: ``` let cameraSource = IVSMixedImageDeviceSourceConfiguration() cameraSource.size = CGSize(width: -320, height: 720) // Add 320 to position x since our width is -320 cameraSource.position = CGPoint(x: 320, y: 0) ``` Vertikale Spiegelung: ``` let cameraSource = IVSMixedImageDeviceSourceConfiguration() cameraSource.size = CGSize(width: 320, height: -720) // Add 720 to position y since our height is -720 cameraSource.position = CGPoint(x: 0, y: 720) ``` ### Android Horizontale Spiegelung: ``` val cameraConfig = MixedImageDeviceSourceConfiguration().apply { setSize(BroadcastConfiguration.Vec2(-320f, 180f)) // Add 320f to position x since our width is -320f setPosition(BroadcastConfiguration.Vec2(320f, 0f)) } ``` Vertikale Spiegelung: ``` val cameraConfig = MixedImageDeviceSourceConfiguration().apply { setSize(BroadcastConfiguration.Vec2(320f, -180f)) // Add 180f to position y since our height is -180f setPosition(BroadcastConfiguration.Vec2(0f, 180f)) } ``` Hinweis: Diese Spiegelung unterscheidet sich von der `setMirrored`-Methode in `ImagePreviewView` (Android) und `IVSImagePreviewView` (iOS). Diese Methode wirkt sich nur auf die lokale Vorschauansicht auf dem Gerät aus und hat keine Auswirkungen auf die Übertragung.