Como lo informamos la semana pasada, últimamente ocurrió muchas cosas con nuestro viejo amigo, WebRTC.
Esta es la primera vez: Uso compartido de pantalla mediante WebRTC.
Aquí hay una presentación en pantalla: youtube.com/watch?v=tD0QtBUZsF4
Y este es el código: github.com/samdutton/rtcshare.
En esencia, creamos una extensión de Chrome experimental que usa RTCPeerConnection
y chrome.tabCapture
para compartir un "video" en vivo de una pestaña del navegador. Si quieres probarla, necesitarás Chrome Canary y habilitar las APIs de extensiones experimentales en la página about:flags.
Nuestro prototipo se basa en gran medida en la poderosa demostración de appr.tc y, honestamente, es un truco. Pero... es una prueba de concepto y funciona.
Así es como lo hicimos:
- Cuando el usuario hace clic en el ícono de la extensión (el "botón de grabación" junto a la barra de direcciones), la secuencia de comandos en segundo plano background.js de la extensión agrega un iframe a sí mismo, cuyo
src
es rtcshare.appspot.com. En background.js, solo se usa para obtener valores comotoken
yroom_key
. ¡Te informamos que fue un hackeo :^}! Esta es una versión cortada y canalizada de apprtc.appspot.com. Al igual que en el ejemplo de apprtc, también se usa rtcshare.appspot.com para el cliente remoto.
chrome.browserAction.onClicked.addListener(function(tab) {
var currentMode = localStorage["capturing"];
var newMode = currentMode === "on" ? "off" : "on";
if (newMode === "on"){ // start capture
appendIframe();
} else { // stop capture
chrome.tabs.getSelected(null, function(tab){
localStream.stop();
onRemoteHangup();
});
// set icon, localStorage, etc.
}
}
- Cuando se carga el iframe, background.js obtiene valores de él (que genera la app rtcshare.appspot.com) y llama a
chrome.tabCapture.capture()
para comenzar a capturar una transmisión en vivo de la pestaña actual.
function appendIframe(){
iframe = document.createElement("iframe");
iframe.src="https://rtcshare.appspot.com";
document.body.appendChild(iframe);
iframe.onload = function(){
iframe.contentWindow.postMessage("sendConfig", "*");
};
}
// serialised config object messaged by iframe when it loads
window.addEventListener("message", function(event) {
if (event.origin !== "https://rtcshare.appspot.com"){
return;
}
var config = JSON.parse(event.data);
room_link = config.room_link; // the remote peer URL
token = config.token; // for messaging via Channel API
// more parameter set from config
);
function startCapture(){
chrome.tabs.getSelected(null, function(tab) {
var selectedTabId = tab.id;
chrome.tabCapture.capture({audio:true, video:true}, handleCapture); // bingo!
});
}
- Una vez que la transmisión en vivo está disponible (en otras palabras, un "video" en vivo de la pestaña actual), background.js inicia el proceso de conexión de pares, y la señalización se realiza a través de rtcshare.appspot.com mediante XHR y la API de canal de Google. En general, funciona como la demostración de apprtc, con la excepción de que la transmisión de video por Internet que se comunica al par remoto es de
chrome.tabCapture
, y no degetUserMedia()
.
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- Para fines de demostración, esta extensión de prototipo abre una nueva pestaña con la URL proporcionada por rtcshare.appspot.com, que tiene agregada una cadena de consulta 'número de habitación'. Por supuesto, esta URL podría abrirse en otra computadora o en otro lugar, y ESO podría ser el comienzo de algo útil.
chrome.tabs.create({url: room_link});
Imaginamos muchos casos de uso interesantes para compartir la pantalla y, incluso en esta etapa temprana del desarrollo, nos impresiona lo receptivo y estable que puede ser la captura y el uso compartido de pestañas sin complementos y sin complementos.
Como siempre, recibiremos con gusto tus comentarios sobre esta extensión y sobre las APIs de WebRTC en general. Si quieres obtener más información acerca de WebRTC, consulta el artículo HTML5 Rocks o nuestra Guía de inicio rápido.
¡Feliz hackeo y mejores deseos para 2013 de todos en HTML5R y WebRTC!