README

WebRTC Part of Screen Sharing Demos / Demos

Another realtime/p2p working demo:

• https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection.sharePartOfScreen.html

Files:

• screenshot-dev.js developers version
• screenshot.js minified

<script src="//cdn.webrtc-experiment.com/screenshot.js"></script>

<!-- or Developers version -->
<script src="//cdn.webrtc-experiment.com/screenshot-dev.js"></script>

Remember, grabMouse is used by default. You need to make it false to make sure your resulting screenshot has no cursor icon.

var divToShare = document.querySelector('div');
html2canvas(divToShare, {
    grabMouse: false,  //---- if you don't want to take mouse icon
    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.
 */

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

1. Using RTCDataChannel
2. Using Firebase
3. A realtime chat using RTCDataChannel
4. A realtime chat using Firebase
5. RTCMultiConnection.js uses Part of Screen sharing API

=

How.....why.....what.....?

1. Used html2canvas library to take screenshot of the entire webpage or part of webpage.
2. Sharing those screenshots using RTCDataChannel APIs (SCTP or RTP) or Firebase.

To share your custom part of screen:

1. Open index.html file
2. Find renderMe object that is getting an element by id: render-me

....and that's all you need to do!

=

Browser Support

via: https://github.com/niklasvh/html2canvas#browser-compatibility

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

=

License

These WebRTC Part of Screen Sharing experiments are released under MIT licence . Copyright (c) Muaz Khan.