Screenshare & getUserMedia in Chrome Extension

[jona...@gmail.com]

I'm trying to implement screen sharing using WebRTC and Kurento. According to the Chrome documentation, this now has to be done in a Chrome Extension using the chrome.desktopCapture.chooseDesktopMedia API.

I've implemented code that uses this API to connect to WebRTC and Kurento. It calls kurentoUtils.WebRtcPeer passing it the user media constraint as follows:

 userMediaConstraints =
    {
 audio:false,
 video: { mandatory: { chromeMediaSource: "desktop",
      chromeMediaSourceId: id }
       }
    };
 if (xhr.status == 200) {
    webRtcPeer = kurentoUtils.WebRtcPeer.startSendOnly(screenShare, onOffer, onError, userMediaConstraints);
 }

(Here id identifies the screen to be shared. I obtained it by following the example https://developer.chrome.com/extensions/samples#search:desktopcapture.)

The problem is that this encounters a problem in kurento-utils.js. Specifically, getUserMedia used in the WebRtcPeer.start is not defined:

 WebRtcPeer.start = function(mode, localVideo, remoteVideo, onSdp, onerror,

mediaConstraints, videoStream, audioStream, server, options) {

var wp = new WebRtcPeer(mode, localVideo, remoteVideo, onSdp, onerror,

videoStream, audioStream);

if (wp.mode !== 'recv' && !wp.stream) {

var constraints = mediaConstraints ? mediaConstraints

: wp.userMediaConstraints;

getUserMedia(constraints, function(userStream) {

wp.stream = userStream;

wp.start(server, options);

}, wp.onerror);

} else {

wp.start(server, options);

}

return wp;

};

Any ideas on how to work around this? According to the Chrome documentation, getUserMedia has been superseded by the chrome.desktopCapture API, so probably the code has to be updated. Perhaps kurento-utils.js, as written, won't work inside a Chrome extension. I wonder if anyone has already fixed this.

-- J

[Rolla Matthieu]

Is it possible to add the sounds some how too ?

On Tue, Jul 28, 2015 at 5:16 PM, <jona...@gmail.com> wrote:

FYI, the trick seems to be to substitute "navigator.webkitGetUserMedia" for "getUserMedia". This is a legacy API that still seems to work with the current Chrome. See https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia. 

Perhaps code to use this when getUserMedia isn't defined could be added to kurento-utils.js.

-- J

--
You received this message because you are subscribed to the Google Groups "kurento" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kurento+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[jona...@gmail.com]

FYI, the trick seems to be to substitute "navigator.webkitGetUserMedia" for "getUserMedia". This is a legacy API that still seems to work with the current Chrome. See https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia.

Perhaps code to use this when getUserMedia isn't defined could be added to kurento-utils.js. For example, code like this:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;




-- J

On Tuesday, July 28, 2015 at 10:07:46 AM UTC-4, jona...@gmail.com wrote:

[jona...@gmail.com]

I'm planning to open a different WebRTC connection for sharing the microphone, if that's what you mean. I don't know how to separate the audio and screenshare stream on the Kurento side, so it's better to have a separate stream to start with, so far as I can tell. And I don't know how the browser will handle a request to share the microphone if that's combined with a request to share the screen. Still, if you want to investigate I suppose trying out setting the userMediaConstraints to something like

 userMediaConstraints =
    {
 audio:true,

 video: { mandatory: { chromeMediaSource: "desktop",
      chromeMediaSourceId: id }
       }
    };

might be worth investigating.

-- J

[Dnyaneshwar]

Hello Jona,

I'm  also trying to implement screen sharing using WebRTC and Kurento in  chrome and firefox also.
Did you get any solution for screen share?

For screen sharing I am using below code for firefox

   var constraints = {
                        audio : true,
                        video : {
                            mandatory : {
                                maxWidth : 320,
                                maxHeight: 240,
                                maxFrameRate : 15,
                                minFrameRate : 15
                            }
                        },
                        onicecandidate : onIceCandidate
                    };
               
                constraints.video.mediaSource = 'window' || 'screen';
                constraints.video.chromeMediaSource = 'screen';
               
                webRtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(constraints,
                    function(error) {
                            if (error) {
                            return console.error(error);
                        }
                        webRtcPeer.generateOffer(onOfferMaster);
                    });

Is it correct way to implement the screen share in firefox?
We observed that latest kurento-utils.js (kms6) file is different than previous one(kms5.13)

Is there any solution for this?

Thank you.

[jona...@gmail.com]

I don't know; I didn't want to leave you hanging. I haven't tried to implement anything in Firefox yet. I suspect the chromeMediaSource stuff isn't doing you any good, but I don't know what the right parameters are. I would play around with Firebug and Wireshark to see what the browser is doing with various attempts. -- Jon

[Sagar Kate]

Hello,

For Desktop Sharing try this code in KMS 6,

 var options = {
                        localVideo : video,
                        onicecandidate : onIceCandidate,
                        mediaConstraints : {

                            audio : true,
                            video : {
                                mandatory : {
                                    maxWidth : 320,
                                    maxHeight: 240,
                                    maxFrameRate : 15,
                                    minFrameRate : 15,

                                },
                                mediaSource : 'window' || 'screen',
                                chromeMediaSource : 'screen',
                            }
                        }
                    }
                   webRtcPeer = new kurentoUtils.WebRtcPeer.

WebRtcPeerSendonly(options,

                    function(error) {
                        if (error) {
                            return console.error(error);
                        }

                        webRtcPeer.generateOffer(onOfferPresenter);
                    });

This is an example for One to Many Desktop Sharing Presenter.

Cheers

[Ivan Gracia]

'getUserMedia' is a function in adapter.js, which our library depends on. From that same repo

[adapter.js] is a shim to insulate apps from spec changes and prefix differences. In fact, the standards and protocols used for WebRTC implementations are highly stable, and there are only a few prefixed names. For full interop information,see webrtc.org/web-apis/interop.

Which translates to making everything easier, as each browser type and version have their own particular ways of doing things. You know, one standard...

For FF, you don't need an extension, but you'll have to add the domain to media.getusermedia.screensharing.allowed_domains

Ivan Gracia