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

Gemischtes Audio-Gerät

Konfiguration

MixedAudioDeviceConfiguration auf Android

IVSMixedAudioDeviceConfiguration auf iOS

Konfiguration der Quelle

MixedAudioDeviceSourceConfiguration auf Android

IVSMixedAudioDeviceSourceConfiguration auf iOS

Gemischtes Bild-Gerät

Konfiguration

MixedImageDeviceConfiguration auf Android

IVSMixedImageDeviceConfiguration auf iOS

Konfiguration der Quelle

MixedImageDeviceSourceConfiguration auf Android

IVSMixedImageDeviceSourceConfiguration auf iOS

Erstellen und Konfigurieren eines gemischten Bildgerätes

Hier erstellen wir eine Szene, die der am Anfang dieses Handbuchs ähnelt, mit drei Bildschirmelementen:

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.

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. 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

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.