Desktop Capture from Chrome Extension to Web Page

[Olivier Anguenot]

Hi all,

In my Web Application, I want to be able to use WebRTC to share the content of a window only.

For doing that, I wrote a little Chrome extension, that use the desktopCapture API.

From my Web application, I call my extension for starting and selecting the window to share. Everything works fine.

But, when getting the stream from the chrome extension, how to send it back to the Web Application ?

My problem is that I receive an JSON object instead of a "MediaStream" object. So I can't display it in a <video> tag.

Here is an extract of the Code

//From the WebApp:

var id = //Chrome Extension ID;
var port = chrome.runtime.connect(id);


port.onMessage.addListener(function(msg) {
     
            if (msg.stream) {
              var video = document.querySelector("video");
              video.src = window.URL.createObjectURL(msg.stream);

            }
          });


          port.postMessage({video: video});
});

// From the Chrome Extension

chrome.runtime.onConnectExternal.addListener(function(port) {


  port.onMessage.addListener(function(msg) {
   
     pending_request_id = chrome.desktopCapture.chooseDesktopMedia(["screen", "window"], function(id) {


        if (!id) {
            return;
        }


        navigator.webkitGetUserMedia({
            audio:false,
            video: { mandatory: { chromeMediaSource: "desktop", chromeMediaSourceId: id } }
        }, function(stream) {
            port.postMessage({stream: stream});
        }, function() {
            port.postMessage({stream: null});
        });
     });      

  });

});

Is it possible to do that ?

Or is it an alternative solution. I try to send the reference to the <video> tag to the Extension without success...

Thanks in advance,

Olivier

[Jiayang Liu]

Call ChooseDesktopMedia with a targetTab (https://developer.chrome.com/extensions/desktopCapture), then pass the returned stream id to the tab, and call getUserMedia from the tab.

[Olivier Anguenot]

Hi Liu,

Thank you very much for your answer, It works "like a charm"

Olivier

[Serena Giuffrida]

Hi, I have the same Oliver's problem. Can you give more suggestions? How can I get tab of my web page? Thanks for your replies. 

[Gianpaolo Pazzini]

Hi,

Does it mean we should create tabs.Tab using the extension?

Then, how to pass the stream to main web page?

Regards,

Pazzini

[Jiayang Liu]

You can take this code as an example:

https://github.com/GoogleChrome/webrtc/pull/86/files

--

---
You received this message because you are subscribed to a topic in the Google Groups "discuss-webrtc" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/discuss-webrtc/pHaZqLtDGY8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to discuss-webrt...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

-jiayl

[Gianpaolo Pazzini]

Awesome.. It works nicely...

Previously I was directly using port from main page to communicate with the extension and It didn't work.

Apparently by using content-script as a 'middleware' like your example.. now it works.. thanks a lot!

Regards,

Pazzini

[Mark Ruzvier]

Is it possible for screen sharing to be used without the extension in chrome? Any timetable on when this may happen? Thanks.

[Senica Gonzalez]

I was using getUserMedia from a web app, but I guess in one of the latest releases that broke as getUserMedia is gone...?

I was interested to see that getUserMedia is present in all examples of desktopCapture. Is it gone or not? I always get Invalid State Error when trying to use it. 

Chrome took the getUserMedia flag out of Chrome and desktopCapture was suppose to replace that I thought. So, what is the deal?  It does not seem to be working for me.

This if from the background page:

chrome.tabs.query({

                                title: 'Example'

                        }, function(tabs){

                                if(!tabs.length){

                                        response({error: "Need a tab open"});

                                }else{

                                        var tab = tabs[0];

                                        var pending_id = chrome.desktopCapture.chooseDesktopMedia(['screen'], tab, function(stream){

                                                if(chrome.runtime.lastError){

                                                        console.log(chrome.runtime.lastError);

                                                        response({error: chrome.runtime.lastError});

                                                }else if(!stream){

                                                        console.log('unkown error. no stream id');

                                                        response({error: 'No stream id'});

                                                }else{

                                                        navigator.webkitGetUserMedia({

                                                                audio: false,

                                                                video: {

                                                                        mandatory: {

                                                                                chromeMediaSource: "desktop",

                                                                                chromeMediaSourceId: stream,

                                                                                maxWidth: window.screen.width,

                                                                                maxHeight: window.screen.height

                                                                        }

                                                                }

                                                        }, function(stream){

                                                                var src = URL.createObjectURL(stream);

                                                                response({error: false, src: src});

                                                        }, function(error){

                                                                console.log(error, chrome.runtime.lastError);

                                                                response({error: 'Could not get screen shot'});

                                                        });

                                                }

                                        });

                                }

                        });

On Monday, April 14, 2014 1:26:57 PM UTC-7, Olivier Anguenot wrote:

[Senica Gonzalez]

If it helps anyone, In 37.0.2062.120, getUserMedia does work from the web page itself. I'm using the extension to get the stream_id from desktopCapture and then passing that back to the web page and using getUserMedia from there.

Any other configuration (either from the extension page, extension background, or webpage, getUserMedia does not work.

                                &n

...

[Vikas]

Calling chooseDesktopMedia and then getUserMedia should work in extension alone (like in the example extension https://code.google.com/p/chromium/codesearch#chromium/src/chrome/common/extensions/docs/examples/api/desktopCapture/&q=desktopCapture&sq=package:chromium)

/Vikas