私はffmpeg.jsでwebMファイルをmp4に変換しようとしています。キャンバス(一部の情報を含むオーバーレイヤー)からビデオを記録し、ビデオからオーディオデータを記録しています。
stream = new MediaStream();
var videoElem = document.getElementById('video');
var videoStream = videoElem.captureStream();
stream.addTrack(videoStream.getAudioTracks()[0]);
stream.addTrack(canvas.captureStream().getVideoTracks()[0]);
var options = {mimeType: 'video/webm'};
recordedBlobs = [];
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(100); // collect 100ms of data
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.Push(event.data);
}
}
mediaRecorder.stop();
このコードは期待どおりに動作し、WebMビデオを返します
var blob = new Blob(recordedBlobs, {type: 'video/webm'});
今私はmp4ファイルが必要であり、muaz-khanから ffmpeg.js をチェックしました。例は、2つのシングルストリーム(オーディオとビデオ)がある場合にmp4に変換する方法を示しています。しかし、オーディオトラックが追加された1つのストリームがあります。そのようなストリームをmp4に変換できますか?どうすればできますか?
提供されているコードサンプルのとおり、レコーダーストリームには、オーディオトラックとビデオトラックが1つしかありません。
入力ファイルにオーディオとビデオの両方がある場合は、両方のトラックに出力コーデックを指定する必要があります here 以下のように。
worker.postMessage({
type: 'command',
arguments: [
'-i', 'audiovideo.webm',
'-c:v', 'mpeg4',
'-c:a', 'aac', // or vorbis
'-b:v', '6400k', // video bitrate
'-b:a', '4800k', // audio bitrate
'-strict', 'experimental', 'audiovideo.mp4'
],
files: [
{
data: new Uint8Array(fileReaderData),
name: 'audiovideo.webm'
}
]
});
より多くのCPU時間とメモリを消費するため、ブラウザー内でビデオをトランスコーディングすることはお勧めしません。そして、ffmpeg_asm.jsは重いです。 POCには問題ないかもしれません:)
あなたのユースケースは何ですか? webm(vp8/vp9)は最近広く使用されています。
Chromeは次のMIMEタイプをサポートします。
"video/webm"
"video/webm;codecs=vp8"
"video/webm;codecs=vp9"
"video/webm;codecs=h264"
"video/x-matroska;codecs=avc1"
したがって、次のハックでchrome MediaRecorderから直接mp4レコーディングを取得できます
var options = {mimeType: 'video/webm;codecs=h264'};
mediaRecorder = new MediaRecorder(stream, options);
.....
//Before merging blobs change output mime
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
// And name your file as video.mp4