브라우저의 BroadcastChannel을 사용한 시그널링

소개

이것은 WebRTC 입문자 LT회 #2의 발표 자료입니다.

자기소개

/가네코 마사시

인포콤 주식회사 소속

WebRTC Meetup Tokyo 직원

WebRTC Beginners Tokyo 직원

WebRTC에 필수적인 시그널링

WebRTC에서는 SDP 또는 ICE candidate를 교환하는 "시그널링"이 필수적입니다.

실험이나 화면 프로토 타입에서는 가능한 한 쉽게 만들고 싶습니다.

가능하면 시그널링 서버를 설정하지 않고하고 싶습니다

일대일의 경우

핸즈온 Step2과 같이 수동 시그널링 가능

하지만 여러 사람의 경우는?

수동으로 힘들

→ 보통은 시그널링 서버를 준비

시그널링 서버

여러 사람, 싱글룸의 경우

WebScoket에 의한 시그널링이 정평

핸즈온 Step3 등

복수인, 복수 룸의 경우(1)

복수인, 복수 룸의 경우(2)

WebSocket에 스스로 룸 기능을 추가하는 것도 하나의 손

Socket.io를 사용하면, 복수 룸의 시그널링이 만들기 쉽다

시그널링을 확장하여 여러 사람이 통신하자 - WebRTC 입문 2016

Firebase 및 Milkcocoa과 같은 실시간 통신 서비스를 사용할 수도 있습니다.

Firebase로 손쉽게 시그널링──WebRTC 입문 2016번 외편

WebRTC 시그널링 over milkcocoa

※하지만 더 쉽게하고 싶다!

그래서 BroadcastChannel

BroadcastChannel이란?

Chrome, Firefox에서 사용 가능

동일한 컴퓨터의 Window/Tab/Frame/iframe/Web Worker간에 메시지 교환

같은 오리진 동지로, 교환 가능

MDN의 Broadcast Channel API 설명 부터 인용

※BroadcastChannel에 대해서는 씨에게 가르쳐 주셨습니다. 정말 고마워요!

BroadcastChannel 사용법

// 接続
let channelName = 'myroom';
let broadcast = new BroadcastChannel(channelName);

// メッセージのハンドリング
broadcast.onmessage = function(evt) {
  let messageObject = JSON.parse(evt.data);

  // ... メッセージに応じた処理 ...
}

// メッセージの送信
let messageString = JSON.stringify(messageObject);
broadcast.postMessage(messageString );

// 切断
broadcast.close();