¿Es posible rotar fragmentos de video en javascript?

Answer

1. 

   davy.ai

   August 6, 2023 at 4:39 pm

   Una sugerencia para rotar el video en el modo de imagen sobre imagen sería utilizar el elemento canvas y dibujar el video en él, aplicar la transformación de rotación al canvas y luego utilizar el canvas como fuente para el modo de imagen sobre imagen. Aquí hay un código que demuestra este enfoque:

   const cameraRecording = async function(micStatus){
       try{
           const stream = await navigator.mediaDevices.getUserMedia({
               video : true, 
               audio: micStatus ? false : true
           });
           const video = document.createElement('video');
           video.autoplay = true;
           video.muted = true;
           video.srcObject = stream;
           video.addEventListener('play', () => {
               // Crear elemento canvas y ajustar su tamaño para que coincida con el video
               const canvas = document.createElement('canvas');
               canvas.width = video.videoWidth;
               canvas.height = video.videoHeight;
               // Obtener el contexto 2D del canvas
               const ctx = canvas.getContext('2d');
               // Comenzar a grabar video y aplicar la transformación de rotación al canvas
               record(stream, true, canvas);
               // Entrar en el modo de imagen sobre imagen utilizando el canvas como fuente
               canvas.requestPictureInPicture();
           });
       }
       catch(err){
           showError('Error al acceder a la cámara o al micrófono');
       }
   };
   
   const record = function(stream, pipStatus, canvas){
   
       recorder = new MediaRecorder(stream);
   
       recorder.addEventListener('start', (e) => {
           chunks = [];
       });
   
       recorder.addEventListener('dataavailable', (e) => {
           chunks.push(e.data);
       });
   
       recorder.addEventListener('stop', (e) => {
           stream.getTracks().forEach(track => track.stop());
           clearInterval(counting);
           setLink(chunks);
           if(pipStatus) document.exitPictureInPicture();
       });
   
       startCountDown();
       recorder.start();
   
       if(pipStatus) {
           // Utilizar requestAnimationFrame para dibujar continuamente el video en el canvas y aplicar la transformación de rotación
           const frame = () => {
               ctx.save();
               ctx.clearRect(0, 0, canvas.width, canvas.height);
               ctx.translate(canvas.width/2, canvas.height/2);
               ctx.rotate(Math.PI);
               ctx.drawImage(video, -canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
               ctx.restore();
               requestAnimationFrame(frame);
           }
           requestAnimationFrame(frame);
       }
   }
   

   En este código, creamos un nuevo elemento de video y establecemos su srcObject en el flujo de la cámara web. Añadimos un event listener para el evento ‘play’, que se dispara cuando el video comienza a reproducirse. En el callback del event listener, creamos un nuevo elemento canvas con el mismo tamaño que el video, obtenemos su contexto 2D y comenzamos a grabar el video utilizando el canvas como fuente (pasando el elemento canvas como tercer argumento a la función record). Luego, entramos en el modo de imagen sobre imagen utilizando el canvas como fuente.

   Dentro de la función record, si pipStatus es verdadero, utilizamos el método requestAnimationFrame para dibujar continuamente el video en el canvas y aplicar la transformación de rotación al canvas. Hacemos esto guardando el estado del contexto del canvas, borrando el canvas, traduciéndolo al centro, girándolo 180 grados, dibujando el video en él y restaurando el estado del contexto. Esto asegura que el video se rote correctamente dentro del modo de imagen sobre imagen.

Comments are closed.