การแชร์หน้าจอกับ WebRTC

Sam Dutton

ดังที่เราได้รายงานไปเมื่อสัปดาห์ที่แล้ว มีหลายอย่างเกิดขึ้นในช่วงนี้กับ WebRTC ซึ่งเป็นเทคโนโลยีที่คุ้นเคยกันดี

และนี่คืออีกหนึ่งสิ่งที่เราทำเป็นครั้งแรก นั่นก็คือการแชร์หน้าจอผ่าน WebRTC

วิดีโอ Screencast: youtube.com/watch?v=tD0QtBUZsF4

และนี่คือโค้ด github.com/samdutton/rtcshare

กล่าวโดยสรุปคือ เราได้สร้างส่วนขยาย Chrome เวอร์ชันทดลองที่ใช้ RTCPeerConnection และ chrome.tabCapture เพื่อแชร์ "วิดีโอ" สดของแท็บเบราว์เซอร์ หากต้องการทดลองใช้ คุณจะต้องมี Chrome Canary และต้องเปิดใช้ API ส่วนขยายเวอร์ชันทดลองในหน้า about:flags

ต้นแบบของเราอาศัยการสาธิต appr.tc อย่างมาก และพูดตามตรงว่ามันเป็นการแฮ็กเล็กๆ น้อยๆ แต่... มันเป็นการพิสูจน์แนวคิดและใช้งานได้

โดยเราดำเนินการดังนี้

1. เมื่อผู้ใช้คลิกไอคอนส่วนขยาย ("ปุ่มบันทึก" ข้างแถบที่อยู่) สคริปต์พื้นหลังของส่วนขยาย background.js จะต่อ iframe เข้ากับตัวมันเอง ซึ่ง src คือ rtcshare.appspot.com ใน background.js จะใช้เพื่อรับค่าต่างๆ เช่น token และ room_key เท่านั้น เราบอกคุณแล้วว่านี่เป็นการแฮ็ก :^}! นี่คือเวอร์ชันที่ปรับแต่งจาก apprtc.appspot.com เช่นเดียวกับตัวอย่าง apprtc rtcshare.appspot.com ก็ใช้สำหรับไคลเอ็นต์ระยะไกลด้วย

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.
    }
}

1. เมื่อ iframe โหลดแล้ว background.js จะรับค่าจาก iframe (สร้างโดยแอป rtcshare.appspot.com) และเรียกใช้ chrome.tabCapture.capture() เพื่อเริ่มบันทึกไลฟ์สดของแท็บปัจจุบัน

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!
    });
}

1. เมื่อสตรีมแบบสดพร้อมใช้งาน (กล่าวคือ "วิดีโอ" สดของแท็บปัจจุบัน) background.js จะเริ่มกระบวนการเชื่อมต่อเพียร์ และการส่งสัญญาณจะดำเนินการผ่าน rtcshare.appspot.com โดยใช้ XHR และ Channel API ของ Google โดยรวมแล้ว การทำงานจะเหมือนกับเดโม apprtc ยกเว้นว่าสตรีมวิดีโอที่สื่อสารกับเพียร์ระยะไกลมาจาก chrome.tabCapture ไม่ใช่ getUserMedia()

function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}

1. เพื่อวัตถุประสงค์ในการสาธิต ส่วนขยายต้นแบบนี้จะเปิดแท็บใหม่พร้อม URL ที่ได้รับจาก rtcshare.appspot.com ซึ่งมีการเพิ่มสตริงการค้นหา "หมายเลขห้อง" แน่นอนว่า URL นี้สามารถเปิดในคอมพิวเตอร์เครื่องอื่นในที่อื่นได้ และนั่นอาจเป็นจุดเริ่มต้นของสิ่งที่มีประโยชน์

chrome.tabs.create({url: room_link});

เราคาดการณ์ว่าการแชร์หน้าจอจะมี Use Case ที่น่าสนใจมากมาย และแม้ว่าการพัฒนาจะอยู่ในช่วงเริ่มต้น แต่เราก็ประทับใจกับความรวดเร็วและเสถียรภาพของการจับภาพและแชร์แท็บโดยไม่ต้องใช้ปลั๊กอิน

เรายินดีรับฟังความคิดเห็นของคุณเกี่ยวกับส่วนขยายนี้และเกี่ยวกับ WebRTC API โดยทั่วไป หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ WebRTC โปรดอ่านบทความ HTML5 Rocks หรือคู่มือเริ่มต้นฉบับย่อ

ขอให้สนุกกับการแฮ็ก และขอให้ทุกท่านมีความสุขในปี 2013 จากทุกคนที่ HTML5R และ WebRTC