Javascript es una tecnología estándar que se utiliza para mantener la interactividad de una página web. No solo en la interacción web sino también con las opciones de grabación de medios. Sí, por supuesto, este artículo trata sobre la capacidad de grabación de medios de Javascript según el título.
Creación de una grabadora de pantalla con JavaScript (incluido el audio del micrófono)
getDisplayMedia: se utiliza para capturar la pantalla del usuario. Cuando llamamos a esta función, se le solicita al usuario que seleccione la parte que debe capturarse. Si el usuario lo rechaza, es posible que experimente un NotAllowedError. Pero si el usuario lo permite, devuelve una promesa que se resuelve en un objeto MediaStream. Se puede acceder a esta función a través del objeto navegador.
Sintaxis:
- restricciones:
{video: {mediaSource:"screen"}, audio: true}
MediaSource del video está configurado en pantalla y el sonido del sistema de grabación está configurado en verdadero si es necesario. También puede establecerlo en falso si no es necesario grabar el audio del sistema.
navigator.mediaDevices.getDisplayMedia(constraints)
Aquí, las restricciones de parámetros se conocen como las opciones que se utilizan para capturar la visualización del usuario en el modo preferido de un desarrollador, donde puede ver el uso de restricciones en la sección de restricciones.
getUserMedia: se usa para recibir el audio del micrófono en nuestro caso, pero se puede usar para acceder al micrófono, la cámara web, etc. a través de getDisplayMedia() y getUserMedia() que solicitarán al usuario el permiso y devolverán una promesa que es resuelto a un objeto MediaStream. Y se puede acceder a estas funciones a través del objeto navegador.
Sintaxis:
- restricciones:
{video:false,audio:true}
La grabación de video se establece en verdadero si es necesario grabar la cámara web, en nuestro caso es falso. Y la grabación de audio del micrófono se establece en verdadero si es necesario grabar el micrófono.
navigator.mediaDevices.getUserMedia(constraints)
Aquí, las restricciones de parámetros se conocen como las opciones que se utilizan para capturar la visualización del usuario en el modo preferido de un desarrollador; puede ver el uso de restricciones en la sección de restricciones.
Constructor MediaRecorder: Se utiliza para grabar el MediaStream proporcionado por las funciones getDisplayMedia() y getUserMedia().
Parámetros:
- Un MediaStream proporcionado por getUserMedia y getDisplayMedia
Sintaxis:
let recorder = new MediaRecorder(combine);
Constructor de MediaStream: Se utiliza para almacenar varias pistas de audio y video. Pero en nuestro caso, usamos esto para combinar nuestro audio y el video capturado que contiene los movimientos de la pantalla del usuario en un solo flujo de medios para que podamos grabar tanto la pantalla como el micrófono al mismo tiempo.
Sintaxis:
// Multiple tracks can be added to the MediaStream // object in an array format let combine = new MediaStream([tracks])
Ejemplo:
index.html
<html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title>Screen Recording with client side javascript</title> </head> <body> <div style="float: left"> <video class="recording" autoplay muted width="500px" height="500px"></video> </div> <div> <h1>OUTPUT</h1> <video class="output" autoplay controls width="500px" height="500px"></video> <button class="start-btn">Start Recording</button> <button class="stop-btn">Stop Recording</button> <a href="#" download="output.mp4" class="download-anc">Download</a> </div> <script src="script.js"></script> </body>
Aquí se usa una etiqueta de video con un nombre de clase .recording para mostrar el video capturado. Y lo hemos silenciado y la razón es para evitar el sonido no deseado al momento de grabar el audio del micrófono. Y también hemos agregado un atributo de reproducción automática que nos ayuda a reproducir el video sin ninguna interacción del usuario, como una grabadora de pantalla en tiempo real. La etiqueta de video con el nombre de clase .output se usa para mostrar la salida grabada del video al proporcionar una forma para que el usuario lo controle, descargue el video con la ayuda de los controles predeterminados proporcionados por los navegadores.
Ahora los botones con el nombre de clase .start-btn y .stop-btn se usan para iniciar y detener la grabación cuando se hace clic con la ayuda de javascript que verá en el archivo script.js.
script.js
var video = document.querySelector('.recording');
var output = document.querySelector('.output');
var start = document.querySelector('.start-btn');
var stop = document.querySelector('.stop-btn');
var anc = document.querySelector(".download-anc")
var data = [];
// In order record the screen with system audio
var recording = navigator.mediaDevices.getDisplayMedia({
video: {
mediaSource: 'screen',
},
audio: true,
})
.then(async (e) => {
// For recording the mic audio
let audio = await navigator.mediaDevices.getUserMedia({
audio: true, video: false })
// Assign the recorded mediastream to the src object
video.srcObject = e;
// Combine both video/audio stream with MediaStream object
let combine = new MediaStream(
[...e.getTracks(), ...audio.getTracks()])
/* Record the captured mediastream
with MediaRecorder constructor */
let recorder = new MediaRecorder(combine);
start.addEventListener('click', (e) => {
// Starts the recording when clicked
recorder.start();
alert("recording started")
// For a fresh start
data = []
});
stop.addEventListener('click', (e) => {
// Stops the recording
recorder.stop();
alert("recording stopped")
});
/* Push the recorded data to data array
when data available */
recorder.ondataavailable = (e) => {
data.push(e.data);
};
recorder.onstop = () => {
/* Convert the recorded audio to
blob type mp4 media */
let blobData = new Blob(data, { type: 'video/mp4' });
// Convert the blob data to a url
let url = URL.createObjectURL(blobData)
// Assign the url to the output video tag and anchor
output.src = url
anc.href = url
};
});
Producción:
Puede grabar toda su pantalla o una aplicación específica que haya abierto usted o una pestaña de Chrome específica. Aquí hemos establecido nuestras restricciones para objetar la propiedad de audio {video:{mediaSource:”screen”}, audio: true} se establece en verdadero para que tengamos una opción para compartir el audio del sistema en el indicador si es necesario grabar el audio del sistema, puede marcar la casilla de verificación y ahora hacer clic en el botón compartir para comenzar a capturar su pantalla en nuestro caso, hemos seleccionado capturar toda nuestra pantalla.
Ahora puede ver la pantalla capturada que muestra la etiqueta de video con movimientos en tiempo real. Aquí puede ver que la etiqueta de video que se usa para mostrar la salida grabada está en blanco porque no comenzamos nuestra grabación. Después de hacer clic en el botón de inicio de grabación, esto debería comenzar a grabar su pantalla y el audio de su micrófono/sistema en segundo plano. Ahora solo haz lo que sea todo lo que necesites. Por ejemplo: juegue sus juegos, explique sus tutoriales de programación, etc. y haga clic en el botón de detener la grabación cuando necesite detenerse. Después de hacer clic en el botón de detener, podrá ver la salida grabada en la etiqueta de video de salida.
Ahora puede reproducir la salida grabada con la ayuda de los controles predeterminados del navegador. También puede dar la opción a los usuarios de descargar el video para los navegadores que no tienen una opción de descarga en su reproductor de video.
Nota: Haga clic en el enlace de descarga después de detener la grabación.
Ahora podrá ver que se descargó un archivo output.mp4 y sí, ahora puede compartir su video grabado con sus amigos, familiares, redes sociales, etc.
Publicación traducida automáticamente
Artículo escrito por arungeek2021 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA