該当箇所のコード
index.js
function startRecorder() {
navigator.mediaDevices.getUserMedia(constrains)
.then(function (stream) {
recorder = new MediaRecorder(stream)
recorder.ondataavailable = function (e) {
console.log(e);
// id testを操作できるよう取得
var testvideo = document.getElementById('test')
// id testに属性を追加する
// https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute
testvideo.setAttribute('controls', '')
testvideo.setAttribute('width', width)
testvideo.setAttribute('height', height)
var outputdata = window.URL.createObjectURL(e.data)
record_data.push(e.data)
testvideo.src = outputdata
}
})
}
個別箇所の挙動
recorder = new MediaRecorder(stream)
- MediaStream(今回はカメラとマイク)を使用して得られた情報を記録するMediaStreamオブジェクトを作成する
- 引数のstreamとは、navigator.mediaDevices.getUserMedia() を使用して作成したストリームである
- 参考
recorder.ondataavailable = function (e) {
- Blob データが使用可能になったことに応じてコードを実行する
- ＝録画の終了ボタンを押下したタイミング
- 引数で渡されているeにBlob形式で映像データが入る
- 参考
var outputdata = window.URL.createObjectURL(e.data)
- メモリ上に存在しているBlobに結びつくオブジェクトURLを生成し、outputdataに代入している
- この場合のメモリ上とはユーザの使用している端末のメモリのことなので、このURLを他者に共有してもアクセスできない(他者の使用している端末のメモリにはファイルがないから)
- わからないこと
- windowの有無で表面上の挙動は変わらないが、生成されるオブジェクトURLが異なる
- 参考
Blobとは
- typeを持つバイナリデータ
- 巨大な画像、音声ファイル、動画ファイルなどを扱うことができる
URLとしてのBlob
- typeがあることによりblobをダウンロード/アップロード可能
- URL.createObjectURLを使用して端末のメモリに保存されたblobにアクセスが可能な一意のURLを生成できる
- メモリに存在するblobへのアクセスマッピングを行っている
- 生成したURLはブラウザを閉じるまで有効
- 逆に言えばブラウザを閉じるまではメモリに常駐し続けるのでURL.revokeObjectURLを使って明示的にメモリ解放する必要がある
- 参考