More Related Content
Similar to Skywayのビデオチャットを録画しよう。そう、ブラウザでね (20)
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
- 2. 自己紹介
• がねこまさし / @massie_g
• WebRTC入門2016を HTML5Experts.jpに連載
– https://html5experts.jp/series/webrtc2016/
• Qiitaで自己最高のストック数の記事
– WebRTCを試すときにオッサンが映り続ける問題に対処する
– http://qiita.com/massie_g/items/5a6c4b69374d5997dc37
2
- 5. それ、ブラウザでできます
• デモ
• チャット
– https://mganeko.github.io/browser_mcu_skyway_mix/
• ミックス&録画
– https://mganeko.github.io/browser_mcu_skyway_mix/mix.html
5
- 10. ミックス時の注意点:Video
• window.requestAnimationFrame() 利用
– ウィンドウ/タブが完全に隠れると呼ばれない
– 最小化したり、他のタブの後ろに回すと描画停止
• 代わりに window.setInterval() を使っても
– ウィンドウ/タブが完全に隠れると、著しく間隔が開いてしまう
– 50msに指定しても、後ろに回すと1秒以上間隔が開く
• ここで良いニュース! Chromeのヘッドレスモードが使える
– 表示されていなくてもrequestAnimationFrame()のイベントが呼ばれる
10
DEMO
- 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