যেমনটি আমরা গত সপ্তাহে রিপোর্ট করেছি , আমাদের পুরানো বন্ধু WebRTC- এর সাথে সম্প্রতি অনেক কিছু ঘটছে।
আচ্ছা... এখানে আরেকটি প্রথম: WebRTC স্ক্রিন শেয়ারিং।
এখানে একটি স্ক্রিনকাস্ট রয়েছে: youtube.com/watch?v=tD0QtBUZsF4
এবং এখানে কোড: github.com/samdutton/rtcshare
সংক্ষেপে, আমরা একটি পরীক্ষামূলক Chrome এক্সটেনশন তৈরি করেছি যা একটি ব্রাউজার ট্যাবের একটি লাইভ 'ভিডিও' ভাগ করতে RTCPeerConnection এবং chrome.tabCapture ব্যবহার করে। আপনি যদি এটি ব্যবহার করে দেখতে চান, আপনার প্রয়োজন হবে Chrome Canary , এবং আপনাকে প্রায়:পতাকা পৃষ্ঠায় পরীক্ষামূলক এক্সটেনশন APIগুলি সক্ষম করতে হবে৷
আমাদের প্রোটোটাইপ শক্তিশালী 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.
}
}
- iframe লোড হয়ে গেলে, 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 এবং Google এর চ্যানেল API ব্যবহার করে rtcshare.appspot.com এর মাধ্যমে সিগন্যালিং করা হয়। সব মিলিয়ে, এটি apprtc ডেমোর মতো কাজ করে, রিমোট পিয়ারের সাথে যোগাযোগ করা ভিডিও স্ট্রিমটি
chrome.tabCaptureথেকে এবংgetUserMedia()নয়।
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-এর সকলের পক্ষ থেকে 2013 সালের জন্য শুভকামনা!