Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Skywayのビデオチャットを録画しよう。そう、ブラウザでね

6,089 views

Published on

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

Published in: Technology
  • Be the first to comment

Skywayのビデオチャットを録画しよう。そう、ブラウザでね

  1. 1. Skyway Developer Meetup #1 LT Skywayのビデオチャットを録画しよう そう、ブラウザでね インフォコム株式会社 がねこまさし @massie_g 2017.09.29 1
  2. 2. 自己紹介 • がねこまさし / @massie_g • WebRTC入門2016を HTML5Experts.jpに連載 – https://html5experts.jp/series/webrtc2016/ • Qiitaで自己最高のストック数の記事 – WebRTCを試すときにオッサンが映り続ける問題に対処する – http://qiita.com/massie_g/items/5a6c4b69374d5997dc37 2
  3. 3. Skyway 商用サービスの開始 おめでとうございます! 3
  4. 4. Skywayで • ビデオチャットできる • 録画はどうする? – 会議を複数人ミックスして残したい 4
  5. 5. それ、ブラウザでできます • デモ • チャット – https://mganeko.github.io/browser_mcu_skyway_mix/ • ミックス&録画 – https://mganeko.github.io/browser_mcu_skyway_mix/mix.html 5
  6. 6. デモ失敗した時用の映像 6
  7. 7. 使っているもの • Canvas の captureStream() • Web Audio API • MediaRecorder 7
  8. 8. ミックスの仕組み:Video 8 RTCPeerConnection A MediaStream <video>タグ RTCPeerConnection D MediaStream <canvas>タグ drawImage() requestAnimationFrame()で 継続的に描画 <video>タグ drawImage() MediaStream captureStream(fps) で取得
  9. 9. ミックスの流れ:Video • RTCPeerConnection からリモートのMediaStreamを取得 – それを <video> タグで表示 • Canvasのコンテキストを getContext('2d')で取得 • window.requestAnimationFrame()で、継続的に描画処理を実行 – drawImage()を使って、各<video>の映像を、Canvasに描画 • Canvasから captureStream(fps)を使って、MediaStreamを取得 9
  10. 10. ミックス時の注意点:Video • window.requestAnimationFrame() 利用 – ウィンドウ/タブが完全に隠れると呼ばれない – 最小化したり、他のタブの後ろに回すと描画停止 • 代わりに window.setInterval() を使っても – ウィンドウ/タブが完全に隠れると、著しく間隔が開いてしまう – 50msに指定しても、後ろに回すと1秒以上間隔が開く • ここで良いニュース! Chromeのヘッドレスモードが使える – 表示されていなくてもrequestAnimationFrame()のイベントが呼ばれる 10 DEMO
  11. 11. ミックスの仕組み:Audio 11 RTCPeerConnection A MediaStream MediaStream AudioContext . createMediaStreamSource() で生成 MediaStreamAudioSourceNode MediaStreamAudioSourceNode MediaStreamAudioSourceNode MediaStreamAudioDestinationNode AudioContext . createMediaStreamDestination() で生成 合成(合算) MediaStreamAudioSourceNode
  12. 12. ミックスの流れ:Audio • RTCPeerConnection からリモートのMediaStreamを取得 • Web AudioのMediaStreamAudioSourceNodeを生成 – MediaStreamをWeb Audioのノードに変換 • MediaStreamAudioDestinationNodeを生成 – 自分以外の音のSourceNodeを接続(音を合成) – sourceNode.connect(destinationNode); • MediaStreamを取り出す – destinationNode.stream 12
  13. 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. 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. 15. Browser MCU シリーズ 15 Browser MCU Server Browser MCU Core Browser MCU ページ参加者ページ シグナリングサーバー Node.js Browser MCU Pack (docker イメージ) Chrome headless
  16. 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

×