RTCMultiConnection Docs

RTCMultiConnection API Reference / "sharePartOfScreen" method

"sharePartOfScreen" method can be used to share "screenshots" of any HTML-element on your webpage. You can share entire <BODY> or <DIV>.

connection.sharePartOfScreen({
    element: '#elementToShare',
    interval: 500
});
  1. It is a real plugin-free screen sharing! (100% pluginfree!)
  2. It works with all browsers that supports Canvas2D API.
  3. WebRTC data channels are used to share screenshots in realtime!
  4. It can capture all HTML DOM elements except embedded contents, flash, PDF, video, and iframe from cross-doamin or iframe that is loading non-HTML stuff!
  5. Screenshots are HD (720p) and RTCMultiConnection is smart enough to share multiple longest strings or largest screenshots concurrently!

Don't forget to try demo first!

Remember, you MUST open data connection ( {data:true} ); at least fake data connection!

<img id="preview-image" style="position: absolute; top:0; left: 0;z-index:1000;">

<div id="elementToShare" contenteditable style="margin-top: 3px;">
    <h2>Welcome to <a href="http://www.rtcmulticonnection.org/" contenteditable="false">RTCMultiConnection</a>.sharePartOfScreen!</h2>
    <h3>Content is edit-able.</h3>
    <input type="text" value="Type Text!" />
    <br />
    <textarea>resize textarea</textarea>
</div>

<div style="position: fixed;left: 20%;right: 20%;text-align: center;">
    <button id="open-room">Open Room</button>
    <button id="share-part-of-screen" disabled>Share Part Of Screen</button>
</div>


<script src="//www.webrtc-experiment.com/screenshot.js"> </script>
<script src="//www.rtcmulticonnection.org/latest.js"> </script>
<script src="//www.rtcmulticonnection.org/firebase.js"> </script>

<script>
var connection = new RTCMultiConnection();

connection.session = {
    data: true
};

connection.onopen = function () {
    document.getElementById('share-part-of-screen').disabled = false;
};

document.getElementById('share-part-of-screen').onclick = function () {
    this.disabled = true;

    connection.sharePartOfScreen({
        element: '#elementToShare',
        interval: 500
    });
};

var image = document.getElementById('preview-image');
connection.onpartofscreen = function (event) {
    this.disabled = true;
    image.src = event.screenshot;

    console.log(event.screenshot);
};

connection.connect();

document.getElementById('open-room').onclick = function () {
    this.disabled = true;
    connection.open();
};
</script>


Extras...

How to invoke "sharePartOfScreen" method?

document.getElementById('share-part-of-screen').onclick = function () {
    this.disabled = true;

    // share part of screen among all users
    connection.sharePartOfScreen({
        element: '#elementToShare',
        interval: 500
    });
    
    // or, share part of screen between two users
    connection.peers['target-userid'].sharePartOfScreen({
        element: '#elementToShare',
        interval: 500
    });
};

How to invoke "pausePartOfScreenSharing" method?

document.getElementById('pause-part-of-screen').onclick = function () {
    this.disabled = true;

    // pause part of screen among all users
    connection.pausePartOfScreenSharing();
    
    // or, pause part of screen between two users
    connection.peers['target-userid'].pausePartOfScreenSharing = true;
};

How to invoke "stopPartOfScreenSharing" method?

document.getElementById('stop-part-of-screen').onclick = function () {
    this.disabled = true;

    // stop part of screen among all users
    connection.stopPartOfScreenSharing();
    
    // or, stop part of screen between two users
    connection.peers['target-userid'].stopPartOfScreenSharing = true;
};

How to invoke "resumePartOfScreenSharing" method?

document.getElementById('resume-part-of-screen').onclick = function () {
    this.disabled = true;

    // stop part of screen among all users
    connection.resumePartOfScreenSharing();
    
    // or, stop part of screen between two users
    connection.peers['target-userid'].pausePartOfScreenSharing = false;
    connection.partOfScreen.sharing = true; // necessary
};

How to receive shared screen?

var image = document.getElementById('preview-image');
connection.onpartofscreen = function (event) {
    image.src = event.screenshot;

    console.log(event.screenshot);
};

Relevant WebRTC Experiments!

  1. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing
  2. https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection.sharePartOfScreen.html

Want to ask a Question?

You can include your email for private conversation!

Latest Updates