MediaRecorder_remix2.pptx

Transcription

1 MediaRecorderで 無 茶 をする WebRTC Meetup Tokyo #7 インフォコム 株 式 会 社 1

2 Media Recorder API getusermedia()で 取 得 したストリームを 記 録 するAPI hhp:// recording/ hhp://html5experts.jp/mganeko/12475/ Firefoxで 実 装 済 2

3 使 い 方 var localstream; // getusermedia()で 取 得 したstreamをセットしておく var recorder = null; var bloburl = null; funcxon startrecording() { recorder = new MediaRecorder(localStream); recorder.ondataavailable = funcxon(evt) { // 録 画 が 終 了 したタイミングで 呼 び 出 される var videoblob = new Blob([evt.data], { type: evt.data.type }); bloburl = window.url.createobjecturl(videoblob); } // 録 画 開 始 recorder.start(); } // 録 画 停 止 funcxon stoprecording() { recorder.stop(); } 3

4 使 い 方 var localstream; // getusermedia()で 取 得 したstreamをセットしておく var recorder = null; var bloburl = null; funcxon startrecording() { recorder = new MediaRecorder(localStream); recorder.ondataavailable = funcxon(evt) { // 録 画 が 終 了 したタイミングで 呼 び 出 される var videoblob = new Blob([evt.data], { type: evt.data.type }); bloburl = window.url.createobjecturl(videoblob); } 停 止 しないと 再 生 できない // 録 画 開 始 recorder.start(); } // 録 画 停 止 funcxon stoprecording() { recorder.stop(); } 4

5 追 いかけ 再 生 がやりたい 録 画 しながら 再 生 もしたい なら 無 理 やりの 出 番 じゃない? 5

6 作 戦 1 短 時 間 で 録 画 開 始 録 画 停 止 を 繰 り 返 す 5 秒 ~10 秒 くらい 順 次 再 生 する デモ 6

7 作 戦 1 MediaRecorder.start() MediaRecorder.stop() MediaRecorder.start() MediaRecorder.stop() MediaRecorder.start() MediaRecorder.stop() MediaRecorder.start() MediaRecorder.stop() Blob 1 Blob 2 Blob 3 Blob 4 video.src = url1; video.play(); video.src = url2; video.play(); video.src = url3; video.play(); video.src = url4; video.play(); 7

8 作 戦 2 作 戦 1の 結 果... 明 らかにちらつく ちらつき 防 止 には 昔 から ダブルバッファー 今 回 は 2つのvideoタグを 交 互 に 表 示 デモ 8

9 作 戦 2 MediaRecorderstart() MediaRecorder.stop() MediaRecorderstart() MediaRecorder.stop() Blob 1 Blob 2 video1 (preload) MediaRecorderstart() MediaRecorder.stop() Blob 3 MediaRecorderstart() MediaRecorder.stop() Blob 4 video2 (preload) 9

10 作 戦 2の 結 果 ちらつき ほとんど 分 からない 良 く 見 ると 気 が 付 くけど これって 別 の 使 い 方 もできるのでは? 10

11 作 戦 3: 無 理 やり 映 像 配 信 Firefox HTTP GET.webm HTTP GET.webm HTTP GET.webm HTTP GET.webm XHR POST.webm XHR POST.webm XHR POST.webm XHR POST.webm Firefox HTTP GET.webm HTTP GET.webm HTTP GET.webm HTTP GET.webm Chrome 11

12 作 戦 3の 結 果 できた! ちらつき ほとんど 分 からない 良 く 見 ると 気 が 付 くけど もしかして もっと 別 のこともできるのでは? 12

13 作 戦 4: 中 継 を 中 継 する Part3 Part1: WebRTC Meetup Tokyo #2 hhp:// lt- audio Part2: WebRTC Meetup Tokyo #4 hhp:// meetup4- lt XHR POST.webm Firefox HTTP POST HTTP POST HTTP POST HTTP GET.webm Firefox Chrome Chrome Firefox Chrome Firefox 13

14 作 戦 4の 結 果 できた! 同 一 マシン 上 の 疑 似 環 境 だけど 原 理 的 にはOK 当 然 遅 延 はあるけど 片 方 向 なら 許 容 できそう 天 の 声 でもそれ HLSで 出 来 るのでは? ダブルバッファーもどきも 無 理 やりすぎる 14

15 HLS: HTTP Live Streaming HLS: HTTP Live Streaming Appleが 開 発 した 動 画 配 信 の 方 式 ios, Android, OS X Safariなどで 動 画 をストリーム 再 生 Chrome, Firefox, IE は プレイリスト. m3u8 複 数 の.ts ファイル(MPEG Transport Stream) H264 + AAC/MP3 ffmpegでvp8から 変 換 できる 実 時 間 以 内 で 終 わらすのは そこそこ 高 スペックが 必 要 15

16 sample.m3u8 #EXTM3U #EXT- X- PLAYLIST- TYPE:VOD #EXT- X- TARGETDURATION:10 #EXT- X- VERSION:3 #EXT- X- MEDIA- SEQUENCE:0 #EXTINF:10.0, hhp://example.com/movie1/filesequencea.ts #EXTINF:10.0, hhp://example.com/movie1/filesequenceb.ts #EXTINF:10.0, hhp://example.com/movie1/filesequencec.ts #EXTINF:9.0, hhp://example.com/movie1/filesequenced.ts #EXT- X- ENDLIST H264 + AAC/MP3 filesequencea.ts filesequenceb.ts filesequencec.ts filesequenced.ts 終 了 の 合 図 無 ければ 繰 り 返 し 読 みに 来 る 16

17 Media Source Extensions hhp://w3c.github.io/media- source/ JavaScript でメディア 再 生 をコントロールする 結 構 低 レベルな 印 象 参 考 :Media Source Extensionsを 使 ってみた (WebM 編 ) hhp://qiita.com/tomoyukilabs/items/57ba8a982ab これを 使 えば 1つのvideoタグで 連 続 して 再 生 できるのでは? なんちゃってダブルバッファー 不 要 次 回 までの 宿 題 ということで 17

18 本 命! MediaRecorder.start(interval) var localstream; // getusermedia()で 取 得 したstreamをセットしておく var recorder = null; var bloburl = null; funcxon startrecording() { recorder = new MediaRecorder(localStream); recorder.ondataavailable = funcxon(evt) { // インターバルごとに 呼 び 出 される var videoblob = new Blob([evt.data], { type: evt.data.type }); bloburl = window.url.createobjecturl(videoblob); } 停 止 しなくて 呼 ばれる 2 個 目 以 降 は 再 生 できな い Blobの 中 身 が 違 う // 録 画 開 始 recorder.start( 5000 ); } インターバルを 指 定 できた! (ミリ 秒 ) // 録 画 停 止 funcxon stoprecording() { recorder.stop(); } 18

19 超 ざっくり:WebMの 中 身 とMediaRecorder ヘッダー(メタ 情 報 ) クラスター (ストリームデータ) クラスター (ストリームデータ) クラスター (ストリームデータ) クラスター (ストリームデータ) クラスター (ストリームデータ) Blob 1 Blob 2 Blob 3 19

20 Interval + Media Source Extensions 組 み 合 わせて 使 えば うまいことできそう MediaRecorder.start(interval) Media Source Extensions サーバーの 仕 組 みも 合 わせて WMLS WebM Live Streaming つづく? 20

21 WebM Live Streaming? Firefox XHR POST Blob1 XHR POST Blob2 XHR POST Blob3 XHR POST Blob4 Concatenate stream in server side Blob 1 Blob 2 Blob 3 Blob 4 HTTP GET Blob 1 Blob 2 Blob 3 Blob 4 HTTP GET Firefox Chrome 21

22 END ありがとうございました! 22