Veiga: /* Videos sobre WebRTC */

2018-10-08T20:16:23Z

Videos sobre WebRTC

Página nueva

= 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/ ):

<syntaxhighlight lang="javascript">
<!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>
</syntaxhighlight>

http://www.webrtc.org/

= Videos sobre WebRTC =
'''Aplicaciones Telco'''

{{#ev:youtube|EqeKXFfOYo0}}

'''Lynckia/Licode'''

{{#ev:youtube|-ibMAXKhzd8}}

'''MashMeTV'''

{{#ev:youtube|pnqdt3wV-FQ}}

= Tutoriales y Referencias =

* [http://www.html5rocks.com/en/tutorials/webrtc/basics/ Getting Started with WebRTC]
* [http://www.creativebloq.com/get-started-webrtc-5132617 Get Started with WebRTC]
* [http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ WebRTC infrastructure]
* [http://www.html5rocks.com/en/tutorials/webaudio/intro/?redirect_from_locale=es Getting Started with Web Audio API]
* [http://www.codeproject.com/Articles/515192/Video-Conferencing-using-WebRTC Video Conferencing using WebRTC]
* [http://dev.w3.org/2011/webrtc/editor/webrtc.html W3C Specifications]
* [https://developer.mozilla.org/en-US/docs/WebRTC Mozilla WebRTC Developers Network]

= Librerías de programación =
* http://lynckia.com/licode/
* http://simplewebrtc.com/
* http://www.easyrtc.com/
* http://jssip.net/
* http://www.rtcmulticonnection.org/
* http://peerjs.com/
* http://www.pubnub.com/blog/building-video-calling-with-pubnub-and-webrtc/
* http://phono.com/

= Video conferencias sobre WebRTC =
* https://talky.io/
* https://appear.in/
* https://www.secretlymeet.me/
* https://videolink2.me/
* https://tawk.com/
* https://bistri.com/

--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 11:47 23 jun 2015 (CEST)

WebRTC Comunicaciones Web en Tiempo Real - Historial de revisiones

Veiga: /* Videos sobre WebRTC */