Part of Screen Sharing using DataChannel.js

Shared DIVs will be visible here ↓

How to use this experiment?

1. Setup data connection.
2. Click a DIV to share.
3. Change DIV's content; all DIVs are edit-able.

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 WebRTC Data Channel to transmit screenshots in realtime!
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 Firebase

<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!

Feedback