video<\/code> de html para mostrar la se\u00f1al de un dispositivo que tenga el sistema, y con eso basta por la parte del front end.<\/p>\n\n\n\n<video id=\"video\" autoplay><\/video><\/code><\/p>\n\n\n\nPara la parte de Javascript se requiere algo m\u00e1s que una l\u00ednea de c\u00f3digo, lo primero que hay que hacer es obtener la lista de dispositivos de la siguiente forma.<\/p>\n\n\n\n
const devices = await navigator.mediaDevices.enumerateDevices(); \n\nconst cameras = devices.filter(dispositivo => dispositivo.kind === 'videoinput');\n<\/code><\/pre>\n\n\n\nEl primer paso es obtener los dispositivos, que suelen ser de dos tipos: audiooutput<\/code> y videoinput<\/code>. En este ejemplo se seleccionan los dispositivos de imagen, porque son los que queremos mostrar en el elemento video de html.\nLo que se obtiene con el c\u00f3digo anterior es un array de objetos similar a este:<\/p>\n\n\n\n{\n \"deviceId\": \"781f4b551c88a09fc960dafd9639edcdc257b9ecd9d0cfcfe387554be58b08c8\", \n\n \"kind\": \"videoinput\", \n\n \"label\": \"Camera 1\", \n\n \"groupId\": \"dda24e81ab426e6442f4b0db46a43c6df90e16fb1a02a67250ab6b9c9002fd08\" \n}\n<\/code><\/pre>\n\n\n\nLa propiedad deviceId<\/code>, que identifica al dispositivo del sistema, es la que nos interesa para reproducir el video en el elemento html de video.\nDespu\u00e9s de esto, el siguiente paso es crear un objeto del tipo MediaStreamConstraints<\/code>.<\/p>\n\n\n\nconst constraints = {\n\nvideo: {\n\ndeviceId: 123,\n\nWidth: 1920,\n\nheight: 1080,\n\nframeRate: { ideal: 30, max: 30 }\n\n}\n\n};\n<\/code><\/pre>\n\n\n\nEn la propiedad video de este objeto, se incluyen algunos valores como los del ejemplo. El m\u00e1s importante es el deviceId<\/code>, que es el dispositivo de video que queremos usar. Las otras propiedades son la resoluci\u00f3n y el frameRate<\/code>, que son importantes para la grabaci\u00f3n. Sin embargo, hay que verificar qu\u00e9 resoluciones y cuadros por segundo admite nuestro dispositivo.\nUna vez tenemos el objeto debemos pasarlo de esta manera para empezar a obtener el stream de video.<\/p>\n\n\n\nconst stream = await navigator.mediaDevices.getUserMedia(constraints);\n<\/code><\/pre>\n\n\n\nAhora lo unico que debemos hacer es pasar ese stream de datos hacia nuestro elemento video en html de esta forma.<\/p>\n\n\n\n
const videoElement = document.getElementById('video');\nvideoElement.srcObject = stream;\n<\/code><\/pre>\n\n\n\nY eso ser\u00eda todo lo que hay que hacer para que el video aparezca en la pantalla sobre elemento video.<\/p>\n\n\n\n
Grabar<\/h2>\n\n\n\n
Para grabar el stream de video en vivo, necesitamos crear un objeto de tipo MediaRecorder<\/a> que reciba como par\u00e1metros el stream y algunas opciones b\u00e1sicas como el mimeType y el bitRate.<\/p>\n\n\n\nconst mediaRecorder = new MediaRecorder(stream, { mimeType: 'video\/webm;codecs=h264', videoBitsPerSecond: bitRate });\n<\/code><\/pre>\n\n\n\nEl tema de los codecs es algo distinto, ya que no todos los navegadores tienen soporte para los mismos codecs ni contenedores. Por ejemplo, prob\u00e9 en el navegador Edge y este no tiene soporte para el contenedor mp4, por eso us\u00e9 webm y el codec h264, pero muchos solo admiten los codecs vp8 y vp9. Safari s\u00ed que admite el contenedor mp4 y codecs como h264.<\/p>\n\n\n\n
Una vez construido este objeto lo que se tiene que hacer es ejecutar el evento start para comenzar a grabar<\/p>\n\n\n\n
mediaRecorder.start();\n<\/code><\/pre>\n\n\n\nEl m\u00e9todo anterior ejecutara el evento onstart, que podemos personalizar tal vez para ejecutar alguna acci\u00f3n como en mi caso un contador de segundos.<\/p>\n\n\n\n
Una vez que necesitemos detener la grabaci\u00f3n hay que ejecutar el m\u00e9todo stop.<\/p>\n\n\n\n
mediaRecorder.stop();\n<\/code><\/pre>\n\n\n\nEste tambi\u00e9n ejecutara un evento llamado onstop, el cual tambi\u00e9n podemos extender.<\/p>\n\n\n\n
El m\u00e9todo stop, al ejecutarse, permite acceder a los datos cuando se encuentren disponibles. Estos se pueden obtener en un evento llamado ondataavailable, que entrega un objeto de tipo BlobEvent<\/a>. Este objeto tiene una propiedad llamada data, de tipo Blob<\/a>, que contiene el “video”.<\/p>\n\n\n\nEstos datos de video se guardan en la memoria interna y temporal del navegador, no se guardan directamente en el sistema de archivos si no que tenemos que \u201cdescargarlos\u201d como cualquier otro archivo de una web.<\/p>\n\n\n\n
Para obtener el video debemos crear una url para acceder al archivo de esta manera:<\/p>\n\n\n\n
mediaRecorder.ondataavailable = function (event) {\nconst { data } = event;\nif (data && data.size > 0) {\nconst url = URL.createObjectURL(data);\nconst downloadLink = document.getElementById('downloadLink');\ndownloadLink.href = url;\ndownloadLink.download = 'recorded_video.webm';\ndownloadLink.style.display = 'block';\n}\n};\n<\/code><\/pre>\n\n\n\nEl c\u00f3digo anterior se encarga de obtener los datos de video y, si existen, generar la url que dirige al archivo y mostrarla en el navegador con el elemento de url: Descargar Video<\/code><\/p>\n\n\n\nCon ello obtendremos un link de descarga para el archivo y as\u00ed obtenemos el video.<\/p>\n\n\n\n
Y eso ser\u00eda todo, dejo el enlace a Github para descargar el proyecto que hice a modo de demo.<\/p>\n\n\n\n
![\"Video](\"https:\/\/80bits.blog\/wp-content\/uploads\/2024\/05\/htmlrecordvideo1-1024x1024.png\")
<\/figure>\n\n\n\n