Share your screen over Web(Screen sharing with HTML5)

A whole new concept on how a user can share his desktop or browser screens to other users is Screen sharing .
Is it possible?

While webRTC has not yet been supported by IE and Safari and these browsers  donot support screensharing  as well,there are several webapps that allow you and me to share the screens without the need of any plug-ins.The only one thing that is required to allow screen sharing is a browser called Chrome.Some of the webapps that support this screen sharing is same.io,talky.io and appear.in

Want to know how to do this in chrome?

Then follow the below steps-
  1.          Type chrome://flags in the address bar
  2.          You will find a setting like  “Enable screen capture support in getUserMedia()”
  3.          Click the enable button
  4.          Restart your browser.


Webapps like same.io and talky.io allows a user to share their screens. By allowing your chrome browser to access your web camera and microphone and by clicking on the “Share my Screen” button the user can share his screens.

Once the user hits that button the user will be provided with a unique web url and if anyone gets to know this url can access your screen through the chrome browser.

The other webapp talky.io allows private sessions wherein a user can protect his screens using a password.

Appear.in is a web app for video meetings that allows the user to share the desktop screen to other participants.




However a tech savvy guy named Rafael Weinstein has proposed a technique which uses Mutation observers and a websocket.

Let’s see how this works:

  1. The presenter shares his screen to the viewer using a websocket
  2. As the user performs any scroll operation the observer sends the changes and the report back to the viewer using Rafael mutation summary library.

Another method on how screensharing is done is:
  1. Rewrite all the pages on the URL to absolute to prevent static images and CSS elements from broken links
  2. Clone the page’s document
  3. Make the clone readonly, hidden and non-selectable and prevent scrolling.
  4. Capture the current position of the screen and add them as data-* attributes as duplicate
  5. Create a new BLOB page as duplicate.


The code for this is as follows-

 function screenshot(){
    urlsToAbsolute(document.images);  
    urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
    urlsToAbsolute(document.scripts);

    var screen= document.documentElement.cloneNode(true);

    screen.style.pointerEvents = 'none';
    screen.style.overflow = 'hidden';
    screen.style.userSelect = 'none';

    var blob1 = new Blob([screen.outerHTML], {type: 'text/html'});

    window.open(window.URL.createObjectURL(blob1));
 }

   

Before the final BLOB is created this java script code should be written so that  when then presenter scrolls the page the user follows.

Set the scrollX and scrollY positions


 addOnPageLoad().
 screen.dataset.scrollX = window.scrollX;
 screen.dataset.scrollY = window.scrollY;


and finally write this below code –


 var script = document.createElement('script');
 script.textContent = '(' + addOnPageLoad_.toString() + ')();';.
 screenshot.querySelector('body').appendChild(script);
 function addOnPageLoad() {
    window.addEventListener('DOMContentLoaded', function(e) {
        var scrollX = document.documentElement.dataset.scrollX || 0;
        var scrollY = document.documentElement.dataset.scrollY || 0;
        window.scrollTo(scrollX, scrollY);
    });
 }


Another method is make the screenshot as a png file and share it using a websocket.

 var img_mimetype = 'images/jpeg';
 var IMG_QUALITY = 90;
 var SEND_INTERVAL = 280;
 var wes = new WebSocket('ws://...', 'sample-protocol');
 wes.binaryType = 'blob';
 function captureAndSendTab() {
    var opts = {format: img_mimetype, quality: IMG_QUALITY};
    chrome.tabs.captureVisibleTab(null, opts, function(dataUrl){
       wes.send(convertDataURIToBlob(dataUrl, IMG_MIMETYPE));
    });
  }
 var intervalId = setInterval(function() {
     if (ws.bufferedAmount == 0) {
         captureAndSendTab();
      }
    }, SEND_INTERVAL);


Conclusion:


Though without the use of WebRTC we have several technologies that help us to make screen sharing possible we still have to wait for the WebRTC to take a leap in making this screen sharing possible with HTML5 .

So guys wait to see the revolution that WebRTC is going to bring.

Share this

Related Posts

Previous
Next Post »