যেমনটা আমরা গত সপ্তাহে জানিয়েছিলাম , আমাদের পুরোনো বন্ধু WebRTC-কে নিয়ে ইদানীং অনেক কিছু ঘটছে।
আচ্ছা... এই নিন আরও একটি প্রথম: WebRTC স্ক্রিনশেয়ারিং।
এখানে একটি স্ক্রিনকাস্ট রয়েছে: youtube.com/watch?v=tD0QtBUZsF4
এবং এই হলো কোডটি: github.com/samdutton/rtcshare
মূলত, আমরা একটি পরীক্ষামূলক ক্রোম এক্সটেনশন তৈরি করেছি যা RTCPeerConnection এবং chrome.tabCapture ব্যবহার করে একটি ব্রাউজার ট্যাবের লাইভ 'ভিডিও' শেয়ার করে। আপনি যদি এটি ব্যবহার করে দেখতে চান, তাহলে আপনার Chrome Canary লাগবে এবং about:flags পেজে Experimental Extension APIs চালু করতে হবে।
আমাদের প্রোটোটাইপটি শক্তিশালী appr.tc ডেমোর ওপর ব্যাপকভাবে নির্ভরশীল এবং সত্যি বলতে, এটি কিছুটা জোড়াতালি দেওয়া! কিন্তু... এটি একটি ধারণার প্রমাণ, এবং এটি কাজ করে।
আমরা যেভাবে এটা করেছি তা নিচে দেওয়া হলো:
- যখন ব্যবহারকারী এক্সটেনশন আইকনে (অ্যাড্রেস বারের পাশের 'রেকর্ড বাটন') ক্লিক করেন, তখন এক্সটেনশনটির ব্যাকগ্রাউন্ড স্ক্রিপ্ট 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.
}
}
- যখন আইফ্রেমটি লোড হয়ে যায়, background.js সেখান থেকে (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!
});
}
- লাইভ স্ট্রিমটি উপলব্ধ হলেই (অন্য কথায়, বর্তমান ট্যাবের একটি লাইভ 'ভিডিও'), background.js পিয়ার সংযোগ প্রক্রিয়াটি শুরু করে, এবং XHR ও গুগলের চ্যানেল এপিআই ব্যবহার করে rtcshare.appspot.com- এর মাধ্যমে সিগন্যালিং করা হয়। মোটকথা, এটি apprtc ডেমোর মতোই কাজ করে, তবে পার্থক্য হলো রিমোট পিয়ারের কাছে পাঠানো ভিডিও স্ট্রিমটি
getUserMedia()থেকে না এসেchrome.tabCaptureথেকে আসে।
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- ডেমো প্রদর্শনের উদ্দেশ্যে, এই প্রোটোটাইপ এক্সটেনশনটি rtcshare.appspot.com থেকে প্রাপ্ত URL-সহ একটি নতুন ট্যাব খোলে, যেটিতে একটি 'রুম নম্বর' কোয়েরি স্ট্রিং যুক্ত করা আছে। অবশ্যই, এই URL-টি অন্য কোনো কম্পিউটারে, অন্য কোনো জায়গায় খোলা যেতে পারে, এবং সেটাই হয়তো কোনো দরকারি কিছুর সূচনা হতে পারে!
chrome.tabs.create({url: room_link});
আমরা স্ক্রিনশেয়ারিংয়ের অনেকগুলো আকর্ষণীয় ব্যবহারের ক্ষেত্র কল্পনা করছি এবং উন্নয়নের এই প্রাথমিক পর্যায়েও, প্লাগইন-মুক্ত ট্যাব ক্যাপচার ও শেয়ারিং কতটা দ্রুত সাড়া দেয় এবং স্থিতিশীল হতে পারে, তা দেখে আমরা মুগ্ধ।
বরাবরের মতোই, এই এক্সটেনশনটি এবং সাধারণভাবে WebRTC API-গুলো সম্পর্কে আপনার মতামতকে আমরা স্বাগত জানাই। আপনি যদি WebRTC সম্পর্কে আরও জানতে চান, তাহলে HTML5 Rocks আর্টিকেলটি অথবা আমাদের কুইক স্টার্ট গাইডটি দেখে নিতে পারেন।
শুভ হ্যাকিং -- এবং HTML5R ও WebRTC-এর পক্ষ থেকে ২০১৩ সালের জন্য আন্তরিক শুভেচ্ছা!