12

WEBRtc: Video y audio sin plugins.

27Ene
en API, Desarrollo web, Firefox, Javascript, Uncategorized

WebRTC (Web Real-Time Communication) es una definición -de un conjunto de APIs- creada por la World Wide Web Consortium (W3C), con el objetivo de permitir a los navegadores ejecutar aplicaciones para vídeo llamada, vídeo chat y compartición de ficheros P2P sin necesidad de plugins.

La definición de la W3C todavía no esta terminada, por lo que puede estar sujeta a grandes cambios. Aun así ya existen experimentaciones tempranas, ejemplo de ello es el soporte para este tipo de comunicación en tiempo real que brindan los navegadores y Google Chrome, Mozilla Firefox y Opera Browser.

Se espera que la evolución de esta especificación se base en:

  • La definición de un conjunto de protocolos que permitan la comunicación en tiempo real en los navegadores.
  • Problemas de privacidad que surgen al exponer nuevas capacidades.
  • Discusiones técnicas en la implementación de canales de datos
  • Experiencias ganadas por experimentaciones tempranas
  • Retroalimentación recibida de los usuarios

Mozilla no se ha quedado atrás, y en la versión de Firefox 18, ya está implementada la API mozGetUserMedia() que permite acceder a la webcam y al micrófono y la API mozRTCPeerConnection() que permite la conexión peer to peer, todo usando javascript. Para los que tengan webcam les dejo a continuación un ejemplo de acceder a la misma desde Firefox.

NOTA: Primero debemos acceder al about:config y poner en true las siguientes preferencias.

media.navigator.enabled
media.navigator.permission.disabled

<!DOCTYPE html>
<html>
<head>
	<title>Probando WEBRtc</title>
</head>
<body>
	<div id="main">
		<br><br>
		<div style="display: block;" id="startbuttons">
			<input value="Video" onclick="startVideo();" type="button">
		</div>
		<div id="images">
		<div id="content"></div>
		<div id="frames"></div>
		</div>
			<div style="display: none;" id="stopbuttons">
			<input value="Stop" onclick="stopMedia();" type="button">
		</div>
	</div>

	<script type="application/javascript">
	var video_status = false;
	var video = document.createElement("video");
	video.setAttribute("width", 300);
	video.setAttribute("height", 300);

	var video_status = false;

	var start = document.getElementById("startbuttons");
	var stop = document.getElementById("stopbuttons");

	var content = document.getElementById("content");

	var saved_stream = null;
	var capturing = false;

	function startVideo() {
		video_status = true;
		startMedia({video:true});
	}

	function stopMedia() {
		if (video_status) {
			video.mozSrcObject = null;
			content.removeChild(video);
			capturing = false;
			video_status = false;
		}
		saved_stream = null;
		stop.style.display = "none";
		start.style.display = "block";
	}

	function startMedia(param) {
		stop.style.display = "block";
		start.style.display = "none";
		try {
			window.navigator.mozGetUserMedia(param, function(stream) {
		if (video_status) {
			content.appendChild(video);
			video.mozSrcObject = stream;
			video.play();
		}
		}, function(err) {
			alert("Ocurrió un error al cargar el video.");
			stopMedia();
		});
		} catch(e) {
			alert("Ocurrió la siguiente excepción: "+ e);
			stopMedia();
		}
	}
	</script>

</body>
</html>
Etiquetado en:

12 Comentarios

  1. liusvel dice:

    Este articulo esta muy bueno gracias , no sabia que ya est se estaba implementando de manera nativa en los buscadores y la verdad que constituye un paso de avance , solo quisiera de ser posible algun ejemplo de como usar esta funcion mozRTCPeerConnection() que permite la conexión peer to peer .

    • abraham dice:

      El ejemplo lo tengo, lo que pasa que no lo he podido probar porque se necesita de un servidor, y la aplicación que tengo para eso esta hecha en node.js y no se como correrla. si lo deseas te puedo mandar el ejemplo.

  2. Yordanis dice:

    Mandamelo a mi también(ymleon) para ver si entre todos logramos algo.

  3. Victor Manuel dice:

    Esta super tocao eso, tambien me gustaria que me lo mandaran a mi correo, para cacharrearlo… saludos. victor@otegr.co.cu

  4. Raykinho CR7 dice:

    Gracias ,por haberme mandado este sitio.

  5. F@lcón dice:

    Tengo una video conferencia de Node.js hecha por su creador Ryan Dahl para el que le pueda interesar, mi usuario es jlfalcon

  6. Gustavo dice:

    Saludos a mi también me gustaría que me lo enviaran a mi corre para poder conocer mejor el tema.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.