Part of Screen Sharing using DataChannel.js

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Open New DataChannel Connection

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.


  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=""></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);



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!


Enter your email too; if you want "direct" reply!

Latest Updates