Part of screen sharing

Pause Sharing

Copyright © 2013 Muaz Khan<@muazkh>. @WebRTCWeb

intro:

1. Sharing part of the screen or region of screen (i.e. a DIV, SECTION, ARTICLE or ASIDE)... not the entire screen!
2. Everything inside that DIV is synchronized in realtime.
3. Works fine on all modern web browsers supporting WebRTC Data Channels.

how?

1. Share screenshots of the entire DIV, ASIDE or BODY element in realtime!
2. Using Firebase to transmit screenshots in realtime! (sharing screenshots after each 500 milliseconds)
3. It is better to "pause sharing" to scroll down and see others' shared regions.
4. It supports multi-user connectivity too! Hmm! i.e. you can share region of screen with many friends!

Try Part of Screen Sharing using WebRTC Data Channel / 100% realtime!

<script src="https://www.webrtc-experiment.com/screenshot.js"></script>
<script>
var divToShare = document.querySelector('div');
html2canvas(divToShare, {
    onrendered: function (canvas) {
        var screenshot = canvas.toDataURL();
        // image.src = screenshot;
        // context.drawImage(screenshot, x, y, width, height);
        // firebase.push(screenshot);
        // pubnub.send(screenshot);
        // socketio.send(screenshot);
        // signaler.send(screenshot);
        // window.open(screenshot);
    }
});

/*
 
Note:
 Put above code in a function; use "requestAnimationFrame" to loop the function
 and post/transmit DataURL in realtime!

 
What above code will do?
 Above code will take screenshot of the DIV or other HTML element and return you
 and image. You can preview image to render in IMG element or draw to Canvas2D.
 */
</script>
            

Part of screen sharing is open-sourced on Github!