https://manuais.iessanclemente.net/index.php?title=WebRTC_Comunicaciones_Web_en_Tiempo_Real&feed=atom&action=history
WebRTC Comunicaciones Web en Tiempo Real - Historial de revisiones
2024-03-29T07:21:46Z
Historial de revisiones de esta página en el wiki
MediaWiki 1.36.2
https://manuais.iessanclemente.net/index.php?title=WebRTC_Comunicaciones_Web_en_Tiempo_Real&diff=64884&oldid=prev
Veiga: /* Videos sobre WebRTC */
2018-10-08T20:16:23Z
<p><span dir="auto"><span class="autocomment">Videos sobre WebRTC</span></span></p>
<p><b>Página nueva</b></p><div>= Introducción a WebRTC =<br />
<br />
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.<br />
<br />
Los componentes de WebRTC se utilizan a través de interfaces avanzadas de programación (API's) en JavaScript.<br />
<br />
En el siguiente ejemplo accedemos a la API de WebRTC sin utilizar ninguna librería (obtenido de https://github.com/codepo8/interaction-cam/ ):<br />
<br />
<syntaxhighlight lang="javascript"><br />
<!DOCTYPE HTML><br />
<html lang="ES"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>Camara web sencilla con Web-RTC</title><br />
<style type="text/css"><br />
html {<br />
background: #111111;<br />
height: 100%;<br />
background: linear-gradient( #333, #000);<br />
}<br />
canvas {<br />
display: none;<br />
}<br />
video, img, #startbutton {<br />
display: block;<br />
float: left;<br />
border: 10px solid #fff;<br />
border-radius: 10px;<br />
}<br />
#startbutton {<br />
background: green;<br />
border: none;<br />
color: #fff;<br />
margin: 100px 20px 20px 20px;<br />
padding: 10px 20px;<br />
font-size: 20px;<br />
}<br />
#container {<br />
overflow: hidden;<br />
width: 880px;<br />
margin: 20px auto;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<video id="video"></video><br />
<button id="startbutton">Take photo</button><br />
<canvas id="canvas"></canvas><br />
<img src="http://placekitten.com/g/320/261" id="photo" alt="photo"><br />
</div><br />
<br />
<script><br />
var streaming = false,<br />
video = document.querySelector('#video'),<br />
cover = document.querySelector('#cover'),<br />
canvas = document.querySelector('#canvas'),<br />
photo = document.querySelector('#photo'),<br />
startbutton = document.querySelector('#startbutton'),<br />
width = 320,<br />
height = 0;<br />
<br />
navigator.getMedia = (navigator.getUserMedia ||<br />
navigator.webkitGetUserMedia ||<br />
navigator.mozGetUserMedia ||<br />
navigator.msGetUserMedia);<br />
<br />
navigator.getMedia(<br />
{<br />
video: true,<br />
audio: false<br />
},<br />
function(stream) {<br />
if (navigator.mozGetUserMedia) {<br />
video.mozSrcObject = stream;<br />
} else {<br />
var vendorURL = window.URL || window.webkitURL;<br />
video.src = vendorURL.createObjectURL(stream);<br />
}<br />
video.play();<br />
},<br />
function(err) {<br />
console.log("An error occured! " + err);<br />
}<br />
);<br />
<br />
video.addEventListener('canplay', function(ev) {<br />
if (!streaming) {<br />
height = video.videoHeight / (video.videoWidth / width);<br />
video.setAttribute('width', width);<br />
video.setAttribute('height', height);<br />
canvas.setAttribute('width', width);<br />
canvas.setAttribute('height', height);<br />
streaming = true;<br />
}<br />
}, false);<br />
<br />
function takepicture() {<br />
canvas.width = width;<br />
canvas.height = height;<br />
canvas.getContext('2d').drawImage(video, 0, 0, width, height);<br />
var data = canvas.toDataURL('image/png');<br />
photo.setAttribute('src', data);<br />
}<br />
<br />
startbutton.addEventListener('click', function(ev) {<br />
takepicture();<br />
ev.preventDefault();<br />
}, false);<br />
</script><br />
</body><br />
</html> <br />
</syntaxhighlight><br />
<br />
http://www.webrtc.org/<br />
<br />
= Videos sobre WebRTC =<br />
'''Aplicaciones Telco'''<br />
<br />
{{#ev:youtube|EqeKXFfOYo0}}<br />
<br />
'''Lynckia/Licode'''<br />
<br />
{{#ev:youtube|-ibMAXKhzd8}}<br />
<br />
'''MashMeTV'''<br />
<br />
{{#ev:youtube|pnqdt3wV-FQ}}<br />
<br />
= Tutoriales y Referencias =<br />
<br />
* [http://www.html5rocks.com/en/tutorials/webrtc/basics/ Getting Started with WebRTC]<br />
* [http://www.creativebloq.com/get-started-webrtc-5132617 Get Started with WebRTC]<br />
* [http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ WebRTC infrastructure]<br />
* [http://www.html5rocks.com/en/tutorials/webaudio/intro/?redirect_from_locale=es Getting Started with Web Audio API]<br />
* [http://www.codeproject.com/Articles/515192/Video-Conferencing-using-WebRTC Video Conferencing using WebRTC]<br />
* [http://dev.w3.org/2011/webrtc/editor/webrtc.html W3C Specifications]<br />
* [https://developer.mozilla.org/en-US/docs/WebRTC Mozilla WebRTC Developers Network]<br />
<br />
= Librerías de programación =<br />
* http://lynckia.com/licode/<br />
* http://simplewebrtc.com/<br />
* http://www.easyrtc.com/<br />
* http://jssip.net/<br />
* http://www.rtcmulticonnection.org/<br />
* http://peerjs.com/<br />
* http://www.pubnub.com/blog/building-video-calling-with-pubnub-and-webrtc/<br />
* http://phono.com/<br />
<br />
= Video conferencias sobre WebRTC =<br />
* https://talky.io/<br />
* https://appear.in/<br />
* https://www.secretlymeet.me/<br />
* https://videolink2.me/<br />
* https://tawk.com/<br />
* https://bistri.com/<br />
<br />
<br />
--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 11:47 23 jun 2015 (CEST)</div>
Veiga