Introducción a WebRTC

WebRTC (Real-Time Communications) o comunicaciones web en tiempo real, es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (peer o pares). Es un conjunto de estándares que proporcionan a cualquier navegador la posibilidad de compartir datos de aplicación y realizar videoconferencias de cliente a cliente sin necesidad de instalar complementos o software de terceros.

Los componentes de WebRTC se utilizan a través de interfaces avanzadas de programación (API's) en JavaScript.

En el siguiente ejemplo accedemos a la API de WebRTC sin utilizar ninguna librería (obtenido de https://github.com/codepo8/interaction-cam/ ):

<!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>