Skyway Developer Meetup #1 LT 向けの資料です。 Skywayのビデオチャットを録画しよう。そう、ブラウザでね ブラウザのCanvasとWebAudioを使って、WebRTCのメディアを合成、録画/録音します

1. Skyway Developer Meetup #1 LT
Skywayのビデオチャットを録画しよう
そう、ブラウザでね
インフォコム株式会社
がねこまさし
@massie_g
2017.09.29
1

2. 自己紹介
• がねこまさし / @massie_g
• WebRTC入門2016を HTML5Experts.jpに連載
– https://html5experts.jp/series/webrtc2016/
• Qiitaで自己最高のストック数の記事
– WebRTCを試すときにオッサンが映り続ける問題に対処する
– http://qiita.com/massie_g/items/5a6c4b69374d5997dc37
2

3. Skyway 商用サービスの開始
おめでとうございます！
3

4. Skywayで
• ビデオチャットできる
• 録画はどうする？
– 会議を複数人ミックスして残したい
4

5. それ、ブラウザでできます
• デモ
• チャット
– https://mganeko.github.io/browser_mcu_skyway_mix/
• ミックス＆録画
– https://mganeko.github.io/browser_mcu_skyway_mix/mix.html
5

6. デモ失敗した時用の映像
6

7. 使っているもの
• Canvas の captureStream()
• Web Audio API
• MediaRecorder
7

8. ミックスの仕組み：Video
8
RTCPeerConnection A
MediaStream <video>タグ
RTCPeerConnection D
MediaStream
<canvas>タグ
drawImage()
requestAnimationFrame()で
継続的に描画
<video>タグ
drawImage()
MediaStream
captureStream(fps)
で取得

9. ミックスの流れ：Video
• RTCPeerConnection からリモートのMediaStreamを取得
– それを <video> タグで表示
• Canvasのコンテキストを getContext('2d')で取得
• window.requestAnimationFrame()で、継続的に描画処理を実行
– drawImage()を使って、各<video>の映像を、Canvasに描画
• Canvasから captureStream(fps)を使って、MediaStreamを取得
9

10. ミックス時の注意点：Video
• window.requestAnimationFrame() 利用
– ウィンドウ/タブが完全に隠れると呼ばれない
– 最小化したり、他のタブの後ろに回すと描画停止
• 代わりに window.setInterval() を使っても
– ウィンドウ/タブが完全に隠れると、著しく間隔が開いてしまう
– 50msに指定しても、後ろに回すと1秒以上間隔が開く
• ここで良いニュース！ Chromeのヘッドレスモードが使える
– 表示されていなくてもrequestAnimationFrame()のイベントが呼ばれる
10
DEMO

11. ミックスの仕組み：Audio
11
RTCPeerConnection A
MediaStream
MediaStream
AudioContext .
createMediaStreamSource()
で生成
MediaStreamAudioSourceNode MediaStreamAudioSourceNode
MediaStreamAudioSourceNode
MediaStreamAudioDestinationNode
AudioContext .
createMediaStreamDestination()
で生成
合成（合算）
MediaStreamAudioSourceNode

12. ミックスの流れ：Audio
• RTCPeerConnection からリモートのMediaStreamを取得
• Web AudioのMediaStreamAudioSourceNodeを生成
– MediaStreamをWeb Audioのノードに変換
• MediaStreamAudioDestinationNodeを生成
– 自分以外の音のSourceNodeを接続（音を合成）
– sourceNode.connect(destinationNode);
• MediaStreamを取り出す
– destinationNode.stream
12

13. 録画の仕組み
13
MediaStream
(Video A+B+C+D)
<canvas>タグ
Web Audio API
MediaStream
(Audio A+B+C+D)
videoTracks[0] MediaStreamTrack
MediaStreamTrackaidioTracks[0]
MediaStream
新しく生成
MediaStream.addTrack()
で追加
MediaStream.addTrack()
で追加
MediaRecorder
WebM

14. めんどくさい？
• Browser MCU シリーズをどうぞ
– https://github.com/mganeko/browser_mcu
– コアライブラリ … https://github.com/mganeko/browser_mcu_core
• Skywayミックスサンプルコード
– https://github.com/mganeko/browser_mcu_skyway_mix
• GitHub pages で実行 ※APIキーに mganeko.github.io からの利用を許可して
– 参加者 https://mganeko.github.io/browser_mcu_skyway_mix/
– ミックス https://mganeko.github.io/browser_mcu_skyway_mix/mix.html
14

15. Browser MCU シリーズ
15
Browser MCU Server
Browser MCU Core
Browser MCU ページ参加者ページ
シグナリングサーバー
Node.js
Browser MCU Pack (docker イメージ)
Chrome
headless

16. Thank you!
16
https://github.com/mganeko/browser_mcu シリーズ
https://github.com/mganeko/browser_mcu_skyway_mix ソース
本日のプレゼン資料 https://www.slideshare.net/mganeko/skyway-
mix-recording