Cómo usar HTML5 para mostrar video en vivo desde una PC en una página web
1. Transmisión de video
La API de captura de medios de HTML5 proporciona acceso programable a la cámara, lo que permite a los usuarios transmitir video directamente desde la cámara usando getUserMedia (tenga en cuenta que actualmente esta función solo es compatible). por Chrome y Opera). Todo lo que tenemos que hacer es agregar una etiqueta de video HTML5 y usar el video de la cámara como fuente de entrada para la etiqueta.
En este punto, la etiqueta de video mostrará una transmisión de video dinámica. Necesitas tomar una foto a continuación.
2. Tomar fotografías
Tomar fotografías es capturar el contenido de la etiqueta Video en tiempo real usando la función Canvas de HTML5. Esto es fácil de implementar porque el elemento Video puede ser. utilizado como entrada a la imagen del lienzo. fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //Captura y almacena el contenido en el objeto video_element El área especificada se dibuja en el área especificada en el lienzo, que se puede dibujar de manera desigual y desigual.
document.body.append(canvas);
3. Obtener imágenes
La idea central de obtener datos de imágenes de Canvas es utilizar toDataURL de Canvas. para convertir los datos de Canvas se convierten a una imagen PNG codificada en base64 en un formato similar a . Formato "datos:imagen/png;base64,xxxxx".
var imgData=canvas.toDataURL("image/png");
De esta manera, la variable imgData almacena una larga cadena de contenido de datos de caracteres, que representa la codificación base64 del Imagen PNG. Dado que los datos de la imagen real son la parte después de la coma codificada en base64, para garantizar que los datos de la imagen realmente recibidos por el servidor sean esta parte, podemos obtenerlos de dos maneras.
El primer método es interceptar la cadena después de 22 bits como datos de imagen frontal, por ejemplo:
var data=imgData.substr(22);
Si desea obtener el tamaño de la imagen antes de cargarla, puede usar:
var length=atob(data).length; //atob puede decodificar cadenas decodificadas en base 64
Segundo método: obtenga los datos transmitidos en el backend y luego use el lenguaje del backend para interceptar la cadena después de 22 dígitos (es decir, en primer plano, omita los pasos anteriores y cárguelo directamente). Por ejemplo, en PHP:
$image=base64_decode(str_replace('data:image/jpeg;base64,',","$data);
4. Subir imagen
En la interfaz, puede usar Ajax para cargar los datos de la imagen obtenidos anteriormente en el script de fondo. Por ejemplo, cuando usa jQuery, puede usar:
$.post('upload. .php'. ,{'data':data});
En segundo plano, utilizamos un script PHP para recibir los datos y almacenarlos como una imagen
función convert_data( $datos){
$image=base64_decode(str_replace('data:image/jpeg;base64,'.",$datos);
save_too_file($image);
}
función save_too_file($image){
$fp=fopen($nombre de archivo, 'w');
fwrite($ fp,$image);
fclose($fp);
}
La solución anterior se puede utilizar no solo para capturar imágenes para cargarlas en una web. aplicación, sino también para proporcionar edición de imágenes. Por ejemplo, puede utilizar la función de edición de Canvas para realizar funciones como recortar, colorear, graffiti y círculos, y luego cargar y guardar las imágenes editadas por el usuario en el servidor. p>
Impulsada por HTML5, que aún se está agregando y revisando, la Web se está volviendo cada vez más popular. La distancia entre las aplicaciones y las aplicaciones locales será cada vez más pequeña en el futuro previsible, y cada vez más nueva y antigua. Los proyectos de desarrollo se migrarán a aplicaciones WEB.