コンピューターのブラウザー上で、Canvas で描画されたアニメーションをビデオに記録することができ、ワンクリックでビデオ アニメーションの生成を実現し、ビデオ制作をより簡単かつ迅速に行うことができます。ここでは、その実装プロセスについて説明します。
準備
Google Chrome でテストすることをお勧めします
- HTML、Canvas、JavaScript の知識があれば十分
録画映像
一部のブラウザでは、クラスを使用してビデオを録画できますMediaRecorder。次のコードで、サポートされているかどうかを確認してください。
if(!MediaRecorder){
alert('当前浏览器不支持录制视频');
return;
}
ドキュメントで見つかった canvas タグ要素から、canvas がメソッドcanvasに渡されます。コードは次のとおりです。createRecorder()
<html>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const recorder = createRecorder(canvas);
//...
console.log('init', {
canvas, context, recorder })
}
</script>
</body>
</html>
最初の方法は、デフォルトのビデオを録画することです。コードは次のとおりです。
createRecorder(canvas){
let stream = canvas.captureStream();
const mimeType = 'video/webm';
let recorder = new MediaRecorder(stream, {
mimeType:mimeType });
const data = []
recorder.ondataavailable = function(event){
if(event?.data.size) data.push(event.data);
}
recorder.onstop = () => {
let url = URL.createObjectURL(new Blob(data, {
type:mimeType }));
this.videoSrc = url;
}
return recorder;
},
ここで生成される形式の動画ファイルは
webm、一般的なブラウザでサポートされています
h264ビデオとして記録およびエンコードする別の方法。コードは次のとおりです。
createRecorder(canvas){
let stream = canvas.captureStream();
let recorder = new MediaRecorder(stream, {
mimeType:'video/webm;codecs=h264' });
const data = []
recorder.ondataavailable = function(event){
if(event?.data.size) data.push(event.data);
}
recorder.onstop = () => {
let url = URL.createObjectURL(new Blob(data, {
type:'video/webm' }));
this.videoSrc = url;
}
recoder.onerror = (err) => console.error(err)
return recorder;
},
構成のうちmimeType、以下はオプションです。他のブラウザはサポートしていないようです。Google Chrome のみがサポートしています。
- 「ビデオ/webm」
- 「video/webm;codecs=vp8」
- 「video/webm;codecs=vp9」
- 「ビデオ/webm;コーデック = h264」
- 「ビデオ/x-matroska;コーデック = avc1」
ビデオを生成する
コードを次のように変更して、mp4 ファイルを生成できます。
let url = URL.createObjectURL(new Blob(data, {
type:'video/mp4' }));
生成された
mp4ビデオ ファイルはテスト済みであり、この mp4 ビデオを再生すると一部のプレーヤーでフレーム ドロップが発生し、再生の進行状況を調整できないため、生成された mp4 ビデオには問題があります。
デフォルトの webm ビデオを直接生成し、ツールを使用して mp4 ビデオに変換することをお勧めします。
- [NodeJs] ffmpeg を使用してビデオ webm を mp4 に変換する の記事を読むことができます。
- 構成の mimeType を
video/webm;codecs=h264この変換にすばやく設定します
メソッドを呼び出してcreateRecorder(canvas)から記録を開始し、タイマーが切れたら記録を停止します。コードは次のとおりです。
//...
const recorder = this.createRecorder(canvas);
//定时10s
let endTime = 10000;
//开始录制
recorder.start();
setTimeout(()=>{
recorder.stop()
//this.closeTimer();
},endTime);
//开始canvas动画...
記録が停止したら、メソッドを使用してcreateObjectURL()生成されたビデオにアクセスし、videoSrcラベルをvideo介して直接再生します
<video :src="videoSrc" />
aボタンをクリックしてビデオをダウンロードすることをシミュレートするラベルを作成します。コードは次のとおりです。
onClickDownload(){
let a = document.createElement('a');
a.setAttribute('href', this.videoSrc);
a.setAttribute('download', '');
a.style.display='none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
機能を改善する
現在、録画されたビデオには音声がありません.必要に応じて、プロのビデオ編集ツールを使用してダビングすることができます.
ビデオのタイムラインにサウンドファイルを素材として追加して、ビデオ再生のサウンドを実現することができます. .
互換性の問題
WebRTC一部のブラウザは録画機能をサポートしていない場合があります.ブラウザを使用し"video/webm"て一般的なエンコードタイプを録画することをお勧めします.他のエンコードのビデオ録画を使用すると、トランスコードエラーまたは互換性の問題が発生する可能性があります.
