비디오 API를 사용하는 HLS/RMTP 브로드캐스트의 동적 레이아웃

비디오 API를 사용하면 여러 비디오 세션이 있는 애플리케이션을 구축할 때 사용자 인터페이스를 완전히 제어할 수 있지만 HLS 및/또는 RMTP 스트리밍을 통해 이러한 세션을 브로드캐스트해야 하는 경우 사용할 수 있는 옵션은 무엇입니까?이 글에서 우리는 어떤 내장 레이아웃이 이미 만들어진 것인지, 어떻게 자신의 사용자 정의 레이아웃을 만드는지, 그리고 레이아웃과 흐름 스타일을 어떻게 동적으로 바꾸는지 토론할 것이다.

Want to try it out? You can view an example application using the broadcast feature on GitHub. You can also deploy it to Heroku to try out.

내장 레이아웃 유형

방송을 위해 가장 좋은 구조를 선택할 때 몇 가지 요소를 고려해야 한다.누가 말하고 있습니까?누가 그들의 스크린을 공유하고 있습니까?대화는 그룹 토론입니까?다행히도 Vonage 비디오 API는 몇 가지 미리 정의된 레이아웃을 제공하여 최상의 환경을 만들 수 있습니다.
당신의 관중들에게는
기본적으로 브로드캐스트 사용bestFit 레이아웃은 다음과 같습니다.이러한 레이아웃은 참여자의 수에 따라 달라지며 각 출판사에 동일한 화면 공간을 제공합니다.

기타 옵션은 그림 그리기(pip, 세로 디스플레이(verticalPresentation 및 수평 디스플레이(horizontalPresentation를 포함합니다.

레이아웃 초기화 및 변경

브로드캐스트를 시작할 때 초기 레이아웃을 지정할 수 있습니다.이를 위해 layout 속성을 포함하는 type 속성을 요청 본문에 추가하십시오.이 속성은 원하는 미리 정의된 레이아웃과 일치해야 합니다.

{
  "sessionId": "2_MX44NTQ1MTF--bm1kTGQ0RjVHeGNQZE51VG5scGNzdVl0flB-",
  "layout": {
    "type": "bestFit"
  }
}

스트리밍 생방송 중에 레이아웃을 변경하려면 OpenTok 서버 SDK 중 하나를 사용하거나 OpenTok/broadcast/layout REST API endpoint에 전화하십시오.
요청본문에 필요한 레이아웃을 나타내는 속성을 가진 JSON 객체를 보냅니다.

{
  "type": "pip"
}

그러나 레이아웃을 사용하는 것은 흐름을 좋게 보이는 첫걸음일 뿐이다.다음은 흐르는 클래스 목록을 업데이트하는 것입니다.우리는 수직 디스플레이 type 레이아웃을 예로 들 수 있습니다.위 그림에서 단어 "focus"를 대량으로 포함하는 것을 발견할 수 있습니다초점은 이 영역에 표시할 흐름에 적용해야 하는 클래스의 이름입니다.
스크린, 행사 강연자를 공유하든지, 발표자로 표시된 발표자든지, 당신이 보여주고 싶은 흐름은 다른 종류가 아니라 초점 클래스를 분배해야 합니다.양식과 어떻게 응용하고 수정하는지 토론해 봅시다.

브로드캐스트 및 스트림 스타일

브로드캐스트 레이아웃은 다음과 같은 구조를 가진 가상 DOM에서 생성됩니다.

<broadcast>
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  ...
</broadcast>

미리 정의된 레이아웃을 사용하거나 사용자 정의 레이아웃을 만들 때 이 구조를 기억해야 합니다.기본적으로 브로드캐스트 비디오는 640x480 픽셀이지만 브로드캐스트를 시작할 때 1280x720을 사용하도록 지정할 수 있습니다.이 경우 미리 정의된 레이아웃을 16:9의 종횡비로 조정합니다.

Important: Only 9 streams can ever be displayed in a broadcast at one time.

스타일 변경

미리 정의된 레이아웃은 브로드캐스트의 모양을 제어하는 CSS를 제공합니다.그것들을 이용하기 위해서, 어떤 종류가 어떤 흐름에 적용되어야 하는지를 지정해야 합니다.우리의 모든 서버 SDK를 사용하거나 OpenTok REST API/session/{sessionId}/stream를 통해 흐름의 클래스 목록을 변경할 수 있습니다
끝점.끝점에 대한 요청은 다음과 같은 JSON 바디를 포함합니다.
객체:

{
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422", // stream id
      "layoutClassList": ["focus"] // array of classes to apply to the specified stream
    }
  ]
}

주의해야 할 것은 type 속성은 하나의 수조로 한 요청에 여러 개의 흐름에 대한 상세한 정보를 제공할 수 있다는 것이다.따라서 수직 표시를 사용하는 예시에서 위의 유효 부하를 보내고 관심 있는 흐름의 id를 지정해야 합니다.다른 흐름이 이전에 초점 클래스가 있다면, 초점 클래스를 삭제하기 위해 빈 클래스 목록과 함께 보내야 합니다.

사용자 정의 레이아웃 만들기

사전 정의된 레이아웃 중 하나가 사용자의 요구에 맞지 않으면 유형과 CSS가 있는 verticalPresentation 속성으로 전송하여 사용자 정의 레이아웃을 만들 수 있습니다.

{
  "sessionId": "2_MX44NTQ1MTF--bm1kTGQ0RjVHeGNQZE51VG5scGNzdVl0flB-",
  "layout": {
    "type": "custom",
    "stylesheet": "stream.instructor {position: absolute; width: 100%;  height:50%;}"
  }
}

사용자 정의 레이아웃을 작성할 때는 다음 사항을 고려해야 합니다.

및 items 요소

에 적용되는 기본 스타일

허용되는 CSS 선택기

허용되는 CSS 속성 및 값

기본 스타일

custom 및 stylesheet 요소에는 기본 규칙이 적용됩니다.사용자 정의 CSS에서 이러한 스타일을 덮어쓸 수 있습니다.기본 규칙은 다음과 같습니다.

broadcast {
  position: relative;
  margin:0;
  width: 640px;
  height:480px;
  overflow: hidden;
}
stream {
  display: block;
  margin: 0;
}

Note: The container resolution is fixed and cannot be overridden by CSS.

허용되는 CSS 선택기

유형 선택기는 흐름 요소만 지원합니다.브로드캐스트 요소를 선택할 수 없습니다.클래스 선택기 지원(예:.focus)그것들은 어떤 흐름 그룹이나 단일 흐름을 선택하는 데 사용할 수 있다.이웃 동포와 일반 동포 조합을 지지하다.또한 broadcast, stream, broadcast 및 stream 위조 선택기를 지원합니다.
다음 선택기는 지원되지 않습니다.

일반 선택기(*)

하위 선택기(상위 - 조상, 상위 * 조상)

하위 선택기(부모 > 자)

ID 선택기(#myidentifier)

속성 선택기([데이터 제목*="내 제목")

위조 요소 선택기 지원되지 않음

허용되는 CSS 속성

다음 표에서는 현재 지원되는 CSS 속성과 가능한 값에 대해 설명합니다.
이름
가치
너비
양수 (px/%)
최소 너비, 최소 높이
양수 (px/%)
최대 너비, 최대 높이
양수 (px/%)
왼쪽, 오른쪽, 위, 아래
수량(px/%)
페이지 여백, 왼쪽 여백, 오른쪽 여백, 맨 위 여백, 맨 아래 여백
수량(px/%)
지수
정수
위치
"상대적", "절대적"
진열하다
인라인 블록, 블록
떠다니다
없음, 왼쪽, 오른쪽
객체 일치
"contain"(기본값), "cover"
넘치다
숨기기
분명하다
“none”、“left”、“right”、“both”、“inherit”、“inherit”

계속 공부하다

맞춤형 방송 외관에 대한 더 많은 정보를 알고 싶으세요?다음 링크를 봅니다.

OpenTok Broadcast

Configuring video layout for OpenTok live streaming broadcasts