JavaScript - Hacer un archivo de video y guardarlo a partir del contenido de un iframe

Val: 8

Hacer un archivo de video y guardarlo a partir del contenido de un iframe

Publicado por Carlos (2 intervenciones) el 29/05/2021 16:07:44

Lo que pretendo hacer es capturar con javascrit en video el contenido de un div o un iframe de una pagina web y guardarlo en un archivo en la PC. Debo aclarar que tengo acceso para editar el codigo de la pagina web donde esta incrustado el div o el iframe.
Lo que más logre fue con navigator.mediaDevices.getDisplayMedia() capturar una ventana del navegador y guardarla en un archivo de video en la PC, con lo que si bien no es el objetivo de máxima satisfaría en parte mis necesidades, pero me resulta imprescindible poder direccionar en forma directa a la ventana a grabar sin pasar por la ventana de selección que presenta el navigator.mediaDevices.getDisplayMedia() para indicarle cual es el elemento a compartir.
Agradezco toda sugerencia posible para resolver la cuestion
Los codigos que uso son los siguientes
HTML

<!DOCTYPE html>

<html>

  <head>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  </head>

  <body>

	<video width="640" height="360" id="video" autoplay></video>

	<div style="position:absolute; top:400px; left:50px;">

	  <br>

        <button id="comenzar">Comenzar</button>

        <button id="detener">Detener</button>

	</div>

	<script src="grabar.js"></script>

  </body>

</html>

JAVASCRIPT

$(document).ready(function(){

	var video=document.getElementById('video');

	var comenzar=document.getElementById('comenzar');

	var detener=document.getElementById('detener');

	video.style.display="none";

	comenzar.addEventListener("click", comenzarGrabacion);

    detener.addEventListener("click", detenerGrabacion);

});

const constraints = {

  video: true, audio: true,

};

const comenzarGrabacion = () => {

		video.style.display="";

	navigator.mediaDevices.getDisplayMedia(constraints)

	.then((stream) => {

	video.srcObject = stream;

	console.log(video.srcObject);

	video.play,

                // Comenzar a grabar con el stream

                mediaRecorder = new MediaRecorder(stream);

                mediaRecorder.start();

                //window.alert("Graba");

                // En el arreglo pondremos los datos que traiga el evento dataavailable

                const fragmentosDeAudio = [];

                // Escuchar cuando haya datos disponibles

                mediaRecorder.addEventListener("dataavailable", evento => {

                    // Y agregarlos a los fragmentos

                    fragmentosDeAudio.push(evento.data);

});

                // Cuando se detenga (haciendo click en el botón) se ejecuta esto

                mediaRecorder.addEventListener("stop", () => {

					//window.alert("Para");

					// Pausar vídeo

                    video.pause();

                    // Detener el stream

                    stream.getTracks().forEach(track => track.stop());

                    // Detener la cuenta regresiva

                    // Convertir los fragmentos a un objeto binario

                    const blobVideo = new Blob(fragmentosDeAudio);

                    // Crear una URL o enlace para descargar

                    const descarga = URL.createObjectURL(blobVideo);

                    // Crear un elemento <a> invisible para descargar el audio

                    let a = document.createElement("a");

                    document.body.appendChild(a);

                    a.style = "display: none";

                    a.href = descarga;

                    a.download = "grabacion.webm";

                    // Hacer click en el enlace

                    a.click();

                    // Y remover el objeto

                    window.URL.revokeObjectURL(descarga);

					video.style.display="none";

});

});

};

const detenerGrabacion = () => {

        if (!mediaRecorder) return alert("No se está grabando");

		//window.alert("Detiene");

        mediaRecorder.stop();

        mediaRecorder = null;

};

Saludos

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 566

Val: 3

Hacer un archivo de video y guardarlo a partir del contenido de un iframe

Publicado por Jovanna (1 intervención) el 10/06/2021 09:56:55

intente usar titiritero. Es un navegador virtual, le permite capturar ventanas del navegador y tomar fotos

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar