En el navegador de la computadora, la animación dibujada por Canvas se puede grabar en un video, realizando la generación de un solo clic para compartir animaciones de video, haciendo que la producción de videos sea más fácil y rápida, y el proceso de implementación se describirá aquí.
Preparar
Se recomienda probar en Google Chrome
- Familiarizado con HTML, Canvas, conocimiento de JavaScript es suficiente
Grabar video
Las clases se pueden usar en algunos navegadores MediaRecorderpara grabar video, el siguiente código, verifique si es compatible
if(!MediaRecorder){
alert('当前浏览器不支持录制视频');
return;
}
Desde el elemento de etiqueta de lienzo que se encuentra en el documento, el lienzo canvasse pasa al createRecorder()método, el código es el siguiente
<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>
El primer método es grabar el video predeterminado, el código es el siguiente
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;
},
El formato de archivo de video generado aquí es
webmcompatible con navegadores comunes
Otra h264forma de grabar y codificar como video, el código es el siguiente
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;
},
Entre las configuraciones mimeType, las siguientes son opcionales, otros navegadores no parecen admitirlo, solo Google Chrome lo admite
- "video/webm"
- “video/webm;códecs=vp8”
- “video/webm;códecs=vp9”
- “video/webm;códecs=h264”
- “video/x-matroska;códecs=avc1”
generar vídeo
El código se puede cambiar a lo siguiente para generar archivos mp4
let url = URL.createObjectURL(new Blob(data, {
type:'video/mp4' }));
El
mp4archivo de video generado ha sido probado, y algunos reproductores experimentarán caídas de fotogramas al reproducir este video mp4, y el progreso de la reproducción no se puede ajustar, por lo que el video mp4 generado es problemático.
Lo mejor es generar directamente el video webm predeterminado y convertirlo en video mp4 a través de herramientas,
- Puede leer el artículo [NodeJs] Use ffmpeg para convertir video webm a mp4
- Establezca la configuración mimeType para
video/webm;codecs=h264esta conversión más rápido
Llame al método createRecorder(canvas), luego comience a grabar, detenga la grabación cuando se acabe el tiempo, el código es el siguiente
//...
const recorder = this.createRecorder(canvas);
//定时10s
let endTime = 10000;
//开始录制
recorder.start();
setTimeout(()=>{
recorder.stop()
//this.closeTimer();
},endTime);
//开始canvas动画...
Después de que se detenga la grabación, use el método createObjectURL()para acceder al video generado y reprodúzcalo directamente videoSrca través de la etiquetavideo
<video :src="videoSrc" />
Cree una aetiqueta para simular hacer clic en el botón para descargar el video, el código es el siguiente
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);
},
Mejorar la función
Actualmente, no hay sonido en el video grabado. Si es necesario, puede usar una herramienta de edición de video profesional para copiarlo. Puede agregar el
archivo de sonido como material a la línea de tiempo del video para obtener el sonido de la reproducción del video. .
Problemas de compatibilidad
Es posible que algunos navegadores no admitan WebRTCla función de grabación. Se recomienda usar el navegador para grabar el "video/webm"tipo de codificación general. El uso de otra codificación de grabación de video puede causar errores de transcodificación o problemas de compatibilidad.
