Chrome WebRTC Screen Sharing Extension requires refresh

1.6k views Asked by At

Chrome had introduced the use of extensions for WebRTC Screen Sharing. In this, each domain has to have the extension so that people install the extension in order to share the screen using webrtc.

Here is my use case:

  1. During an on-going webrtc video call, if one person needs to do screen sharing and doesn't have the extension then after installing the extension one is required to refresh the page. This interrupts the call and both people need to join the call again.

  2. I want to control the user experience using javascript so that refresh is not required. But if we don't do refresh, html page doesn't recognize the recently installed extension.

I have seen many open source code regarding this but none of them has use case similar to mine. They assume the extension to be installed during the session.

However, I had seen www.uberconference.com and they have similar use case. I tried installing the screen sharing extension during a live call and it did not require the page refresh and did not interrupt the call. It did the screen sharing right after extension was installed.

I could not understand how they did it as uber is not open source. Many people say that refresh is must after installing the extension. Any help in this case will be highly appreciated.

Here is how I install the chrome extension using in-line installation:

$scope.installExtension= function(){

  !!navigator.webkitGetUserMedia
  && !!window.chrome
  && !!chrome.webstore
  && !!chrome.webstore.install &&
  chrome.webstore.install('https://chrome.google.com/webstore/detail/<some-id>',
    successInstallCallback,
    failureInstallCallback
  );

};

function successInstallCallback() {
  //location.reload();
}
function failureInstallCallback(error) {
  alert(error);
}
3

There are 3 answers

1
Michael Gorham On

Have you looked at Chrome Extension Inline Installation ... https://developer.chrome.com/webstore/inline_installation

I was having the same problems until I put within the html <head> tag ...

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/[your-chrome-extension-id]" >

Your extension manifest also needs to include the domain that this head tag is on.

0
xdumaine On

This is something we recently changed in getScreenMedia. View the pull request to see how we did it:

I wrote about the changes on my blog, so look there for more details, but the important bits are:

Instead of creating a communication channel on chrome.runtime.connect, and messaging directly, we can use external messaging. Instead of posting a message to the window, which gets picked up by the content script and passed to the background script (and vice versa), we can use chrome.runtime.sendMessage(extensionId, options, callback) and, in the background script chrome.runtime.onMessageExternal. This works where the other solution doesn't, because background scripts are loaded immediately upon extension installation, whereas content scripts are injected on page load.

So, basically, the extension uses a different permission:

"externally_connectable": {
  "matches": [
      "https://example.com/*"
  ]
}

And a different API:

  • chrome.runtime.sendMessage combined with chrome.runtime.onMessageExternal

instead of

  • window.postMessage combined with window.addEventListener('message') and chrome.runtime.connect.

At least two different sites https://apps.mypurecloud.com and https://beta.talky.io do screen sharing with inline extension installation with no reload at all.

0
Alexander Goncharov On

This may helps today. If you are running Janus demos on the localhost - just run it over https.

If you will run it over http : the getDisplayMedia function will not be declared (e.g. in Chrome), and then Janus will ask you for plugin install.

If you had installed your own Janus-server: to use https - you must to configure ssl-certificates in Janus server configs:
janus.transport.http.jcfg - if you're using https in server definition
janus.transport.websockets.jcfg - if you're using wss (and don't forget to enable secure web-socket in it)