WebRTC (Web Real-Time Communication) es una API que está siendo elaborada por la World Wide Web Consortium (W3C) para permitir a las aplicaciones del navegador realizar llamadas de voz, chat de vídeo y uso compartido de archivos P2P sin plugins.
muchos programadores que están explorando esta API y probando los ejemplos que encuentran en internet no entienden por qué no funcionan cuando los descargan y abren en el navegador chrome, veamos imagen de abajo.
Pero esos mismos ejemplos con el mismo código cuando se ejecutan directamente en un sitio web si funcionan, primero piden permiso de utilizar la cámara y el micrófono y luego se ejecutan
Veamos una imagen de la ejecución de una pagina web con la api webrtc
DONDE ESTÁ EL PROBLEMA?
El problema esta en que los desarrolladores de chrome consideran que puede ser muy peligroso por seguridad dejar activar cámaras y micrófonos sin un respaldo confiable por lo tanto han restringido su uso bajo unas condiciones, veamos las disposiciones originales en el siguiente enlace:
Texto traducido al español por el traductor de chrome:
Nosotros (el cromo de Seguridad) originalmente envió esto a varias listas de correo de desarrollo del navegador. Ver el original de correo electrónico de intención de Desaprobar sobre blink-dev. Esto se basa en la idea original de preferir orígenes seguras para nuevas y potentes características.Deprecating Características Potentes sobre inseguros Orígenes
Este es un documento vivo - a medida que aprendemos más, probablemente tendrá que cambiar esta página.
Propuesta
Queremos empezar a aplicar los conceptos en https://w3c.github.io/webappsec-secure-contexts/ a las características que ya han enviado y que no cumplen con los (nuevos, que no están presentes en el momento) requisitos. En particular, esto requiere que aproximadamente características de gran alcance solamente sean accesibles en los "orígenes seguros" (como HTTPS), donde la cadena de ancestro completo también es seguro.
Queremos empezar exigiendo orígenes seguras para estas características existentes:
El movimiento del dispositivo / Orientación
EME
Pantalla completa
Geolocalización
getUserMedia ()
Al igual que con gradualmente marcado HTTP como no seguro, esperamos a migrar gradualmente estas características para asegurar-solamente, sobre la base de umbrales de utilización, comenzando con el uso más bajo y avanzar hacia superior. También esperamos que indique gradualmente en el UX que las características están en desuso de los orígenes no seguros.
La estrategia de depreciación para cada una de estas características no se decide y puede muy bien diferir de función para función. No sabemos actualmente cuáles serán los umbrales, o cómo muy utilizado las características encontramos en que tipo de orígenes. Estamos en el proceso de recopilación de datos, e informar cuando lo tenemos. No hay planes firmes para nada en este momento, excepto eventual depreciación. Tenemos la intención de este para estimular un debate público sobre la mejor manera de acercarse a este desprecio. Así que, para ese momento, nos encantaría saber lo que piensa la comunidad.
Prueba de una característica de gran alcance en desuso
Después de una característica ha quedado obsoleto, si usted es un desarrollador que necesita para seguir probando una función en un servidor que no tenga un certificado válido, tiene dos opciones:
localhost es tratado como un origen seguro a través de HTTP, así que si usted es capaz de ejecutar el servidor de host local, que debe ser capaz de probar la función en ese servidor.
Puede ejecutar cromo con el --unsafely-treat-insegura-origen-como-secure = "example.com" bandera (en sustitución de "example.com" con el origen de que realmente desea probar), que tratará ese origen tan segura para esta sesión. Tenga en cuenta que también hay que incluir la --user-data-dir = / test / solamente / profile / dir para crear un perfil de prueba fresca de la bandera de trabajar.
QUE DICEN EN RESUMEN LAS DISPOSICIONES DE CHROME PARA UTILIZAR WEBRTC?
1. que para poder utilzar getUsermedia y webrtc se necesita alojar la pagina en un servidor seguro con https, y no en uno con http recordemos que un https es “Hyper Text Transfer Protocol” con una ‘S’ añadida al final, que hace referencia a “Secure Sockets Layer” otro importante protocolo desarrollado para realizar transferencias de forma segura en Internet.
2. Que para probar la API webrtc con getUserMedia () en nuestro equipo local necesitamos instalar en nuestro equipo un servidor local como APACHE etc, corriendo la pagina en localhost/webrtc.html, tener
Si no queremos complicarnos con todo lo anterior en el navegador chrome una buena alternativa es ejecutar la pagina web en un navegador como mozilla firefox que no requiere de servidor local ni el protocolo https.
ejemplo utilizando api WEBRTC ---getUseredia()
<!DOCTYPE HTML>
<html lang="ES">
<head>
<meta charset="UTF-8">
<title>Camara web sencilla con Web-RTC</title>
<style type="text/css">
html {
background: #111111;
height: 100%;
background: linear-gradient( #333, #000);
}
canvas {
display: none;
}
video, img, #startbutton {
display: block;
float: left;
border: 10px solid #fff;
border-radius: 10px;
}
#startbutton {
background: green;
border: none;
color: #fff;
margin: 100px 20px 20px 20px;
padding: 10px 20px;
font-size: 20px;
}
#container {
overflow: hidden;
width: 880px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="container">
<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
</div>
<script>
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 320,
height = 0;
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);
</script>
</body>
</html>
