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

Sam Dutton

Twitter GitHub Glitch Mastodon หน้าแรก

ตามที่เรารายงานไว้เมื่อสัปดาห์ที่แล้ว มีหลายเรื่องเกิดขึ้นเมื่อเร็วๆ นี้กับเพื่อนเก่าของเราอย่าง 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});

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

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

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