Part of Screen Sharing

Muaz Khan edited this page Aug 26, 2014 · 2 revisions

RTCMultiConnection supports html2canvas based part of screen capturing and sharing; however there is demos for screen-cropping as well.

  1. html2canvas based part of screen sharing demo
  2. screen sharing & cropping the resulting video

HTML2Canvas based demo is simpler to implement:

document.getElementById('share-part-of-screen').onclick = function () {
    connection.sharePartOfScreen({
        element: '#share-me',
        interval: 500
    });
};

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

Screen-cropping requires a little bit more work same as explained in bellow snippets:

// this script tag is taken from: https://github.com/andersevenrud/webrtc-screenshare-crop-demo
var CROP_X = 10;
var CROP_Y = 20;
var CROP_W = 320; // default width
var CROP_H = 240; // default height
var VIDEO_WIDTH = 0;
var VIDEO_HEIGHT = 0;
var MAX_VIDEO_WIDTH = 1920;
var MAX_VIDEO_HEIGHT = 1080;
var _canvas;
var _context;

function sendCoordinates() {
    // sending coordinates using WebRTC data channels
    connection.send({
        CROP_X: CROP_X,
        CROP_Y: CROP_Y,
        CROP_W: CROP_W,
        CROP_H: CROP_H
    });
};

function CropFrame(ev, stream, video, callback) {
    if (!_canvas) {
        if (CROP_X < 0) {
            CROP_X = 0;
        }
        if (CROP_Y < 0) {
            CROP_Y = 0;
        }
        if (CROP_W <= 0) {
            CROP_W = VIDEO_WIDTH;
        }
        if (CROP_H <= 0) {
            CROP_H = VIDEO_HEIGHT;
        }
        if (CROP_W > MAX_VIDEO_WIDTH) {
            CROP_W = MAX_VIDEO_WIDTH;
        }
        if (CROP_H > MAX_VIDEO_HEIGHT) {
            CROP_W = MAX_VIDEO_HEIGHT;
        }

        _canvas = document.createElement('canvas');
        _canvas.width = CROP_W;
        _canvas.height = CROP_H;
        _context = _canvas.getContext('2d');

        // you need to modify this line
        document.body.appendChild(_canvas);
    }

    _context.drawImage(video, CROP_X, CROP_Y, CROP_W, CROP_H, 0, 0, CROP_W, CROP_H);

    // We need to scale down the image or else we get HTTP 414 Errors
    // Also we scale down because of RTC message length restriction
    var scanvas = document.createElement('canvas');
    scanvas.width = _canvas.width;
    scanvas.height = _canvas.height;

    var wRatio = _canvas.width / 320;
    var hRatio = _canvas.height / 240;
    var maxRatio = Math.max(wRatio, hRatio);
    if (maxRatio > 1) {
        scanvas.width = _canvas.width / maxRatio;
        scanvas.height = _canvas.height / maxRatio;
    }
    scanvas.getContext('2d').drawImage(_canvas, 0, 0, scanvas.width, scanvas.height);

    callback(scanvas.toDataURL("image/jpeg"));
}

Here is how to use above snippet in your applications:

var connection = new RTCMultiConnection();

connection.session = {
    screen: true,
    data: true,
    oneway: true
};

connection.onmessage = function(event) {
    CROP_X = event.data.CROP_X;
    CROP_Y = event.data.CROP_Y;
    CROP_W = event.data.CROP_W;
    CROP_H = event.data.CROP_H;

    if (!_canvas) return;
    _canvas.width = CROP_W;
    _canvas.height = CROP_H;
};

connection.onstream = function(event) {
    var inited = false;

    event.mediaElement.addEventListener('timeupdate', function(ev) {
        if (!inited) {
            VIDEO_WIDTH = event.mediaElement.offsetWidth;
            VIDEO_HEIGHT = event.mediaElement.offsetHeight;

            event.mediaElement.style.display = 'none';
            event.mediaElement.style.visibility = 'hidden';

            inited = true;
        }

        CropFrame(ev, event.stream, event.mediaElement);
    });
};

You can invoke sendCoordinates method when user modifies CROP_X, CROP_Y, CROP_W and CROP_H values. E.g.

document.getElementbyId('sync-cropped-coordinates').onclick = sendCoordinates;

Demos Source codes:

  1. html2canvas based part of screen sharing demo
  2. screen sharing & cropping the resulting video

Referenced API:

  1. http://www.rtcmulticonnection.org/docs/sharePartOfScreen/
  2. http://www.rtcmulticonnection.org/docs/send/
  3. http://www.rtcmulticonnection.org/docs/session/

via: http://www.rtcmulticonnection.org/docs/