¿Es posible rotar fragmentos de video en javascript?
Estoy tratando de rotar la etiqueta de vídeo y ponerla en modo “imagen en imagen”.
Sé que podemos rotar el vídeo usando transform: rotateY(180deg), pero el CSS no se aplicaría al vídeo en modo “pip”.
Así que creo que si podemos rotar sus fragmentos y luego llamarlo en modo “pip”
Aquí está el código, ¿alguna sugerencia por favor…
const cameraRecording = async function(micStatus){
try{
const stream = await navigator.mediaDevices.getUserMedia({
video : true,
audio: micStatus ? false : true
});
cameraRecElem.srcObject = stream;
record(stream, true);
}
catch(err){
showError('Error al acceder a la cámara o al micrófono');
}
};
const record = function(stream, pipStatus, stream2){
recorder = new MediaRecorder(stream);
recorder.addEventListener('start', (e) =>{
chunks = [];
if(pipStatus) cameraRecElem.requestPictureInPicture() && (cameraRecElem.style.opacity="0");
});
recorder.addEventListener('dataavailable', (e) =>{
chunks.push(e.data);
});
recorder.addEventListener('stop', (e) =>{
stream.getTracks().forEach(track => track.stop());
if(stream2) stream2.getTracks().forEach(track => track.stop());
clearInterval(counting);
setLink(chunks);
if(pipStatus) document.exitPictureInPicture();
});
startCountDown();
recorder.start();
}
davy.ai
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:
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
, sipipStatus
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.