IVS 브로드캐스트 SDK: 믹서 가이드(지연 시간이 짧은 스트리밍)

믹서는 여러 입력 소스를 사용하여 단일 출력을 생성하는 오디오 및 비디오 처리 디바이스입니다. 여러 화면(비디오) 요소와 오디오 트랙을 정의하고 관리할 수 있는 강력한 기능입니다. 카메라, 마이크, 화면 캡처, 앱에서 생성한 오디오 및 비디오와 같은 여러 소스의 비디오와 오디오를 결합할 수 있습니다. 전환을 사용하여 Amazon IVS로 스트리밍하는 비디오를 중심으로 이러한 소스를 이동하고 스트림 중간에 소스를 추가하거나 제거할 수 있습니다.

믹서에 액세스하려면 다음을 호출합니다.

Android에서 BroadcastSession.getMixer()

iOS에서 IVSBroadcastSession.mixer

용어

기간	설명
바인딩	입력 디바이스를 슬롯과 연결하려면 디바이스가 믹서 슬롯에 바인딩되어야 합니다. 이는 Mixer.bind() 메서드를 사용하여 수행됩니다. 슬롯에는 한 번에 하나의 이미지 입력과 하나의 오디오 입력이 바인딩될 수 있습니다. Mixer.unbind()를 호출하여 슬롯에서 디바이스를 바인딩 해제할 수 있습니다.
캔버스	BroadcastSession 구성에 정의된 비디오의 표시 범위입니다. 캔버스는 비디오 설정과 크기가 동일하며 구성에 지정된 것과 동일한 프레임 속도로 실행합니다.
디바이스	BroadcastSession에 오디오 또는 이미지 입력을 생성하는 하드웨어 또는 소프트웨어 구성 요소. 디바이스의 예로는 마이크, 카메라, Bluetooth 헤드셋 및 화면 캡처 또는 사용자 정의 이미지 입력과 같은 가상 디바이스가 있습니다. 사용자 지정 입력을 제외하고는 일반적으로 디바이스 객체에 대한 레퍼런스는 보관할 필요가 없으며, 대신 디바이스 설명자의 복사본을 보관하면 됩니다.
디바이스 설명자	입력 디바이스에 대한 정보가 포함된 구조(예: 유형, 시스템 주소, 사람이 읽을 수 있는 '친숙한' 이름, 모바일 디바이스에서의 물리적 위치). 이 정보를 통해 참조된 디바이스의 사용 여부를 결정하고 Amazon IVS가 해당 디바이스에 액세스하도록 허용할 수 있습니다.
Slot	화면상의 시각적 요소의 위치와 오디오 믹스에서 오디오 트랙의 속성을 정의하는 컨테이너. 믹서는 0개 이상의 슬롯으로 구성될 수 있습니다. 슬롯에는 디바이스를 바인딩하고 전환을 실행하는 데 사용할 수 있는 문자열 이름이 지정됩니다. 위 이미지는 슬롯 4개를 보여줍니다. 카메라 입력을 사용한 왼쪽 아래 영화 입력을 사용한 오른쪽 위 Amazon IVS 로고를 사용한 오른쪽 아래 전체 화면 백그라운드 이미지 세션을 구성한 후 addSlot 및 removeSlot 믹서 메서드를 사용하여 슬롯을 추가 및 제거할 수 있습니다.
Transition	슬롯을 새 위치로 이동하거나 일부 속성을 변경하려면 Mixer.transition()을 사용합니다. 이 메서드는 다음을 수행합니다. 슬롯의 다음 상태를 나타내는 새 슬롯 구조 비디오 타임라인을 기준으로 애니메이션에 걸리는 시간을 지정하는 지속 시간 지속 시간이 0으로 설정된 경우 혼합된 다음 프레임에서 전환이 발생합니다. 애니메이션이 완료되면 알려주는 선택적 콜백. 콜백은 애니메이션 체인에 유용할 수 있습니다.

캔버스 속성

캔버스 속성은 BroadcastSession 생성 시 제공하는 BroadcastConfiguration을 기반으로 설정됩니다. Audio의 여러 속성 및 Video 구조는 캔버스에 영향을 미칩니다.

이름	유형	설명
Audio.channels	Integer	오디오 믹서의 출력 채널 수 유효한 값: 1, 2. 1 채널은 모노 오디오, 2 채널은 스테레오 오디오. 기본값: 2.
Audio.sampleRate	AudioSampleRate	오디오 믹서의 초당 오디오 샘플 수. 이 값은 오디오 신호에서 가장 높은 주파수의 2배 이상이어야 합니다. 사람들은 약 20kHz까지 들을 수 있으므로 일반적으로 44.1kHz와 48kHz가 충분합니다. 기본값: 48kHz.
Video.defaultAspectMode	AspectMode	슬롯의 종횡비 모드 기본값. 유효 값: Fill은 이미지의 종횡비는 유지하지만 슬롯을 채웁니다. 필요한 경우 이미지가 잘립니다. Fit은 이미지의 종횡비는 유지하지만 전체 이미지를 슬롯에 맞춥니다. 필요한 경우 슬롯은 레터박스 또는 필러박스를 가질 수 있습니다. 레터박스 또는 필러박스는 값이 설정된 경우 fillColor가 됩니다. 그렇지 않으면 투명하게 되어 이미지 뒤의 캔버스 색상이 검은색이면 검은색으로 나타날 수 있습니다. None에는 이미지 종횡비를 유지하지 마세요. 슬롯의 치수와 일치하도록 이미지 크기가 조정됩니다.
Video.size	Vec2	비디오 캔버스 크기.
Video.targetFramerate	Integer	캔버스의 초당 대상 프레임 수. 평균적으로 이 값을 충족해야 하지만 특정 상황(예: 높은 CPU 부하 또는 네트워크 혼잡)에서는 시스템이 프레임을 떨어뜨릴 수 있습니다.

슬롯 속성

슬롯에는 장면과 애니메이션을 사용자 지정하는 데 사용할 수 있는 여러 구성 가능한 속성이 있습니다. 부동 소수점 또는 벡터인 모든 값은 지속 시간이 0초보다 긴 전환에 대해 선형 보간을 사용하여 애니메이션이 적용됩니다.

이름	유형	설명
aspect	AspectMode	슬롯에 렌더링된 모든 이미지에 대한 종횡비 모드. 유효 값: Fill은 이미지의 종횡비는 유지하지만 슬롯을 채웁니다. 필요한 경우 이미지가 잘립니다. Fit은 이미지의 종횡비는 유지하지만 전체 이미지를 슬롯에 맞춥니다. 필요한 경우 슬롯은 레터박스 또는 필러박스를 가질 수 있습니다. 레터박스 또는 필러박스는 값이 설정된 경우 fillColor가 됩니다. 그렇지 않으면 투명하게 되어 이미지 뒤의 캔버스 색상이 검은색이면 검은색으로 나타날 수 있습니다. None에는 이미지 종횡비를 유지하지 마세요. 슬롯의 치수와 일치하도록 이미지 크기가 조정됩니다. 기본값: matchCanvasAspectMode가 true인 경우 캔버스 aspect와 동일. 그렇지 않으면 Fill. 이 값 설정도 matchCanvasAspectMode를 false로 설정합니다.
fillColor	Vec4	슬롯 및 이미지 종횡비가 일치하지 않을 때 Aspect Fit이 사용되어 색상을 채웁니다. 형식은 (빨간색, 녹색, 파란색, 알파) 입니다. 각 채널에 대해 유효한 값: 0~1. 기본값: (0, 0, 0, 0).
gain	Float	오디오 게인. 이 값은 승수이므로 1을 초과하는 모든 값은 게인을 증가시키고 1 미만의 값은 게인을 감소시킵니다. 유효한 값: 0~2. 기본값: 1.
matchCanvasAspectMode	부울	true인 경우 캔버스의 Video.defaultAspectMode 값을 사용합니다. 슬롯의 aspect 속성을 설정하면 false로 설정됩니다. 기본값: true.
matchCanvasSize	부울	true인 경우 슬롯의 크기가 캔버스 크기와 같도록 조정되고 위치가 (0, 0)으로 설정됩니다. 슬롯의 size 속성을 설정하면 false로 설정됩니다. 기본값: true.
name	문자열	슬롯의 이름. 바인딩 및 전환용 슬롯을 참조하는 데 사용됩니다. 기본값: "default".
position	Vec2	캔버스의 왼쪽 위 모서리를 기준으로 한 슬롯 위치(단위: 픽셀). 슬롯의 원점도 왼쪽 위입니다.
preferredAudioInput	DeviceType	선호하는 오디오 입력 디바이스 유형. 이 슬롯이 바인딩 해제되고 지정된 유형의 오디오 디바이스가 세션에 연결된 경우 디바이스는 자동으로 이 슬롯에 바인딩됩니다. 유효 값: 마이크는 온보드 마이크, 플러그형 헤드폰 또는 Bluetooth 헤드폰과 같은 오디오 하드웨어입니다. 시스템 오디오는 운영 체제에서 캡처된 오디오로, 일반적으로 화면 레코딩이 수반됩니다. 사용자 오디오는 사용자가 만든 사용자 지정 오디오 입력입니다. 알 수 없음은 선호하는 디바이스가 없는 상태입니다. 슬롯은 항상 수동으로 바인딩됩니다.
preferredVideoInput	DeviceType	선호하는 비디오 입력 디바이스. 이 슬롯이 바인딩 해제되고 지정된 유형의 비디오 디바이스가 세션에 연결된 경우 디바이스는 자동으로 이 슬롯에 바인딩됩니다. 유효 값: 카메라는 전면, 후면 또는 광각 카메라와 같은 온보드 카메라 디바이스입니다. 화면은 운영 체제에서의 화면 캡처입니다. 사용자 이미지는 사용자가 만든 사용자 지정 이미지 및 비디오 입력입니다. 알 수 없음은 선호하는 디바이스가 없는 상태입니다. 슬롯은 항상 수동으로 바인딩됩니다.
size	Vec2	슬롯의 크기(픽셀) 이 값 설정도 matchCanvasSize를 false로 설정합니다. 기본값: (0, 0). 하지만 matchCanvasSize 기본값이 true이므로 슬롯의 렌더링된 크기는 (0, 0)이 아닌 캔버스 크기입니다.
transparency	Float	슬롯 투명도. 이미지에 알파 값이 있는 배수입니다. 불투명도는 1~transparency. 유효한 값: 0~1. 여기서 0은 완전히 불투명하고 1은 완전히 투명합니다. 기본값: 0.
zIndex	Float	슬롯의 상대적 순서. zIndex 값이 높은 슬롯은 zIndex 값이 낮은 슬롯 위에 그려집니다.

믹싱을 위한 브로드캐스트 세션 구성

다음은 가이드의 시작 부분에 있는 것과 비슷한 장면을 만들 때 사용하는 화면에 표시되는 3가지 요소입니다.

• 카메라용 왼쪽 하단 슬롯.

• 로고 오버레이용 오른쪽 하단 슬롯.

• 영화용 오른쪽 상단 슬롯.

캔버스의 원점은 왼쪽 상단 모서리이며 슬롯에 대해 동일합니다. 따라서 (0, 0)에 슬롯을 배치하면 전체 슬롯이 보이는 왼쪽 상단 모서리에 배치됩니다.

iOS

let config = IVSBroadcastConfiguration()
try config.video.setSize(CGSize(width: 1280, height: 720))
try config.video.setTargetFramerate(60)
config.video.enableTransparency = true

// Bottom Left
var cameraSlot = IVSMixerSlotConfiguration()
cameraSlot.size = CGSize(width: 320, height: 180) 
cameraSlot.position = CGPoint(x: 20, y: 1280 - 200)
cameraSlot.preferredVideoInput = .camera
cameraSlot.preferredAudioInput = .microphone
cameraSlot.matchCanvasAspectMode = false
cameraSlot.zIndex = 2
try cameraSlot.setName("camera")

// Top Right
var streamSlot = IVSMixerSlotConfiguration()
streamSlot.size = CGSize(width: 640, height: 320) 
streamSlot.position = CGPoint(x: 1280 - 660, y: 20)
streamSlot.preferredVideoInput = .userImage
streamSlot.preferredAudioInput = .userAudio
streamSlot.matchCanvasAspectMode = false
streamSlot.zIndex = 1
try streamSlot.setName("stream")

// Bottom Right
var logoSlot = IVSMixerSlotConfiguration()
logoSlot.size = CGSize(width: 320, height: 180) 
logoSlot.position = CGPoint(x: 1280 - 340, y: 720 - 200)
logoSlot.preferredVideoInput = .userImage
logoSlot.preferredAudioInput = .unknown
logoSlot.matchCanvasAspectMode = false
logoSlot.zIndex = 3
try logoSlot.setTransparency(0.7)
try logoSlot.setName("logo")

config.mixer.slots = [ cameraSlot, streamSlot, logoSlot ]

Android

// Bottom Left
val cameraSlot = BroadcastConfiguration.Mixer.Slot.with { s ->
    s.setSize(320, 180)
    s.position = BroadcastConfiguration.Vec2(20, 1280 - 200)
    s.preferredVideoInput = Device.Descriptor.DeviceType.CAMERA
    s.preferredAudioInput = Device.Descriptor.DeviceType.MICROPHONE
    s.matchCanvasAspectMode = false
    s.zIndex = 2
    s.name = "camera"
    s
}

// Top Right
val streamSlot = BroadcastConfiguration.Mixer.Slot.with { s ->
    s.setSize(640, 320)
    s.position = BroadcastConfiguration.Vec2(1280 - 660, 20)
    s.preferredVideoInput = Device.Descriptor.DeviceType.USER_IMAGE
    s.preferredAudioInput = Device.Descriptor.DeviceType.USER_AUDIO
    s.matchCanvasAspectMode = false
    s.zIndex = 1
    s.name = "stream"
    s
}

// Bottom Right
val logoSlot = BroadcastConfiguration.Mixer.Slot.with { s ->
    s.setSize(320, 180)
    s.position = BroadcastConfiguration.Vec2(1280 - 340, 720 - 200)
    s.preferredVideoInput = Device.Descriptor.DeviceType.USER_IMAGE
    s.preferredAudioInput = Device.Descriptor.DeviceType.UNKNOWN
    s.matchCanvasAspectMode = false
    s.zIndex = 3
    s.name = "logo"
    s.transparency = 0.7
    s
}

val config = BroadcastConfiguration.with { c ->
    c.mixer.slots = listOf(cameraSlot, streamSlot, logoSlot)
    c.video.targetFramerate = 60
    c.video.setSize(1280, 720)
    c
}

슬롯 추가

구성을 사용하여 BroadcastSession을 만들면 믹서에 슬롯을 추가하고 믹서에서 슬롯을 제거할 수 있습니다. 여기서는 믹서에 이미지에 대한 큰 백그라운드 슬롯을 추가합니다.

iOS

// Background. We will use most of the defaults for this slot.
var backgroundSlot = IVSMixerSlotConfiguration()
backgroundSlot.preferredVideoInput = .userImage
backgroundSlot.preferredAudioInput = .unknown
backgroundSlot.matchCanvasAspectMode = false
try backgroundSlot.setName("background")

session.mixer.addSlot(backgroundSlot)

Android

// Background. We will use most of the defaults for this slot.
val backgroundSlot = BroadcastConfiguration.Mixer.Slot.with { s ->
    s.preferredVideoInput = Device.Descriptor.DeviceType.USER_IMAGE
    s.preferredAudioInput = Device.Descriptor.DeviceType.UNKNOWN
    s.matchCanvasAspectMode = false
    s.name = "background"
    s
}

session.mixer.addSlot(backgroundSlot)

슬롯 제거

슬롯을 제거하려면 제거하길 원하는 슬롯의 이름으로 함께 BroadcastSession.Mixer.removeSlot을 호출합니다. 해당 슬롯에 바인딩된 모든 디바이스는 자동으로 바인딩 해제되므로 계속 사용하려면 다른 슬롯에 다시 바인딩해야 합니다.

애니메이션 전환

믹서 전환 메서드는 슬롯의 구성을 새 구성으로 대체합니다. 이 대체에 지속 시간을 0보다 높은 시간(초)을 설정하여 애니메이션을 적용할 수 있습니다.

애니메이션할 수 있는 속성은 무엇인가요?

슬롯 구조의 모든 속성에 애니메이션이 적용될 수 있는 것은 아닙니다. Float 유형을 기반으로 하는 모든 속성에 애니메이션을 적용할 수 있으며, 기타 속성은 애니메이션의 시작 또는 종료 시점에 적용됩니다.

이름	애니메이션으로 만들 수 있나요?	임팩트 포인트
aspect	아니요	End
fillColor	예	보간
gain	예	보간
matchCanvasAspectMode	아니요	시작
matchCanvasSize	아니요	시작
name 참고: 슬롯 이름은 변경할 수 없습니다.	아니요	해당 사항 없음
position	예	보간
preferredAudioInput	아니요	End
preferredVideoInput	아니요	End
size	예	보간
transparency	예	보간
zIndex 참고: zIndex는 3D 공간을 통해 2D 평면을 이동하므로 두 평면이 애니메이션 중간 지점에서 교차할 때 전환이 발생합니다. 이 값은 계산될 수 있지만 zIndex 값은 시작과 종료에 따라 다릅니다. 보다 원활한 전환을 위해 이 값을 transparency와 결합합니다.	예	알 수 없음

간단한 예제

아래는 위의 믹싱을 위한 브로드캐스트 세션 구성에서 정의된 구성을 사용한 전체 화면 카메라 인계 예제입니다. 애니메이션이 0.5초 이상 표시됩니다.

iOS

// Bottom Left
var bigCameraSlot = cameraSlot
bigCameraSlot.size = CGSize(width: 1280, height: 720) 
bigCameraSlot.position = CGPoint(x: 0, y: 0)

session.mixer.transition("camera", bigCameraSlot, 0.5) {
    println("animation completed!")
}

Android

// Bottom Left
val bigCameraSlot = cameraSlot.changing { s ->
    s.setSize(1280, 720)
    s.position = BroadcastConfiguration.Vec2(0, 0)
    s
}

session.mixer.transition("camera", bigCameraSlot, 0.5) {
    print("animation completed!")
}

브로드캐스트 미러링

다음 방향으로 브로드캐스트에 연결된 이미지 디바이스를 미러링하려면	다음 값에 음수를 사용하세요
수평	슬롯의 너비
수직	슬롯의 높이
수평 및 수직 모두	슬롯의 너비 및 높이 모두

미러링 시 슬롯을 올바른 위치에 놓으려면 위치를 같은 값으로 조정해야 합니다.

다음은 브로드캐스트를 수평 및 수직으로 미러링하는 예입니다.

iOS

수평 미러링:

var cameraSlot = IVSMixerSlotConfiguration
cameraSlot.size = CGSize(width: -320, height: 720)
// Add 320 to position x since our width is -320
cameraSlot.position = CGPoint(x: 320, y: 0)

수직 미러링:

var cameraSlot = IVSMixerSlotConfiguration
cameraSlot.size = CGSize(width: 320, height: -720)
// Add 720 to position y since our height is -720
cameraSlot.position = CGPoint(x: 0, y: 720)

Android

수평 미러링:

cameraSlot = BroadcastConfiguration.Mixer.Slot.with {
   it.size = BroadcastConfiguration.Vec2(-320f, 180f)
   // Add 320f to position x since our width is -320f
   it.position = BroadcastConfiguration.Vec2(320f, 0f)
   return@with it
}

수직 미러링:

cameraSlot = BroadcastConfiguration.Mixer.Slot.with {
   it.size = BroadcastConfiguration.Vec2(320f, -180f)
   // Add 180f to position y since our height is -180f
   it.position = BroadcastConfiguration.Vec2(0f, 180f)
   return@with it
}

참고: 이 미러링은 ImagePreviewView (Android) 및 IVSImagePreviewView(iOS)의 setMirrored 메서드와 다릅니다. 해당 메서드는 디바이스의 로컬 미리 보기에만 영향을 주며 브로드캐스트에는 영향을 주지 않습니다.