Tabla de contenido
1. Enciende la cámara y el micrófono.
2. Agregar botón de control de transmisión
3. Vista previa y foto locales
4. Guarde la foto de vista previa
5. Mostrar efecto de textura (portada)
6. Efectos de vista previa de video (efectos múltiples)
6.2 Efecto tridimensional suspendido
6.3 Efecto de microdermoabrasión
Prefacio
El artículo de hoy le presenta un reproductor de vista previa de video muy simple basado en el terminal de captura WebRTC.
texto
Lo que tenemos que hacer es el reproductor de video de vista previa local, por lo que primero debemos abrir la cámara, luego mostrar los botones de control del reproductor y finalmente agregar algunas funciones auxiliares, como tomar fotografías, guardar fotos, stickers, efectos de video, etc. A continuación, echemos un vistazo al funcionamiento de un determinado enlace en detalle. Para garantizar el efecto de demostración, se recomienda que los socios pequeños intenten utilizar el navegador Chrome.
1. Enciende la cámara y el micrófono.
Para abrir la cámara, puede utilizar el método getUserMedia de una de las tres principales interfaces WebRTC para lograrlo. Para obtener más información, puede consultar el siguiente código:
let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
getUserMedia.call(navigator,{
video:true
},function(localMediaStream){
let video =document.getElementById('video1');
video.srcObject = localMediaStream;
},function(e) {
console.log("error: ",e);
});En circunstancias normales, el navegador Chrome mostrará un cuadro de solicitud de autorización en la esquina superior izquierda, vamos a elegir, en este momento, elegimos "permitir".
Después de la autorización, el navegador abre nuestra cámara. En este momento, veremos la pantalla de vista previa del video local, como se muestra en la siguiente figura:
Por supuesto, también podemos configurar "audio = true" para solicitar encender nuestro micrófono local cuando llame al método getUserMedia.
2. Agregar botón de control de transmisión
Después de encender la cámara, podemos obtener una vista previa de nuestro video local, pero ¿cómo operamos nuestra cámara y altavoces? Si queremos controlar nuestra cámara y altavoces, necesitamos establecer otra configuración de propiedad de la etiqueta de video: el parámetro de controles. El uso específico puede referirse al siguiente código:
<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>Después de la configuración, iniciamos el reproductor nuevamente, y encontraremos que la pantalla de vista previa del video tiene más botones de control del reproductor, como se muestra en la siguiente figura:
A través de estos botones de control, podemos operar la reproducción y pausa de la pantalla de video local, cambiar el altavoz, iniciar y cancelar la pantalla completa y abrir la función de imagen en imagen.
3. Vista previa y foto locales
Para realizar la función de cámara local, agregamos un botón de "fotografía", que se utiliza para capturar el cuadro de video actual, y agregamos una ventana de visualización de imagen estática debajo de la ventana de vista previa del video, como se muestra en la figura siguiente. Nota: la parte superior es la actividad La ventana de video de, a continuación, es la ventana que muestra el efecto fotográfico.
El tamaño de la pantalla de la cámara también se establece en 400 px de ancho y 300 px de alto. La referencia del código clave es la siguiente:
let photo = document.querySelector("canvas#photo");
photo.width = 400;
photo.height = 300;
let video =document.getElementById('video1');
photo.getContext("2d").drawImage(video, 0, 0, photo.width, photo.height);4. Guarde la foto de vista previa
Para facilitar la observación, ajustamos la posición de visualización de la pantalla de video y las fotos, y las colocamos horizontalmente. Nota: El lado izquierdo es la ventana de video activa y el lado derecho es la ventana de fotos fijas. Agregue un botón para guardar fotos, el código clave es el siguiente:
let canvas = document.querySelector("canvas");
let a = document.createElement("a");
a.download = "photo";
a.href = canvas.toDataURL("image/jpeg");
document.body.appendChild(a);
a.click();
a.remove();
Haga clic en el botón "Guardar" y encontraremos que la foto se ha descargado al local. Encuentre la ruta de guardado de la imagen, abra la imagen, el efecto de visualización es como se muestra en la siguiente figura:
Significa que las fotos guardadas no son un problema, perfectas.
5. Mostrar efecto de textura (portada)
A continuación, agreguemos un efecto de textura en la pantalla de vista previa del video, que es la portada de la leyenda. ¿Cómo debemos operarlo? Aquí podemos usar otro cartel de atributo de la etiqueta de video para lograr este efecto. Ponemos la imagen temática 1024.jpg preparada de antemano en el directorio designado y usamos el cartel para citarla.
La referencia del código específico es la siguiente:
<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline poster="1024.jpg"></video>El efecto de la textura se muestra en la siguiente figura:
6. Efectos de vista previa de video (efectos múltiples)
Para aumentar el contraste entre los efectos de video y el video original, agregamos una ventana de vista previa del reproductor junto a la ventana de video original. La izquierda es la ventana de video original y la derecha es la ventana de video de efectos especiales. El efecto de visualización de los efectos especiales se logra principalmente a través del filtro -webkit-filter. Los efectos especiales específicos son los siguientes:
6.1 Efecto de la exposición
6.2 Efecto tridimensional suspendido
6.3 Efecto de microdermoabrasión
6.4 Efecto de color invertido
(Hagamos un GIF, de lo contrario, siempre creo que estoy tratando con imágenes estáticas)
En conclusión
Bueno, aquí básicamente hemos completado el reproductor de vista previa de video local mencionado al principio. ¿Es muy simple y muy deslumbrante? Bien, es demasiado tarde, detengámonos aquí hoy, es la 1 de la mañana y todavía estoy apresurándome con este artículo. Publicaré la dirección del código fuente en el área de comentarios más adelante. Como proyecto de demostración, los estudiantes interesados pueden hacerlo ellos mismos. Buenas noches, a la 1 am del 24 de octubre de 2020. * Feliz día del programador *