Skip to content

Instantly share code, notes, and snippets.

@snobear
Last active December 17, 2019 03:22
Show Gist options
  • Save snobear/87335931106e2c35e156 to your computer and use it in GitHub Desktop.
Save snobear/87335931106e2c35e156 to your computer and use it in GitHub Desktop.
chrome screen share - page js
/*
* Check if user has extension installed and launch
*
*/
function shareScreen() {
// Chrome screen-sharing extension ID
var extensionId = 'dgckdhnehiggafbppghjpnapieoegekl';
// check that the extension is installed by looking for a
// sessionStorage variable that contains the extension id
// this has to be set after installation unless the content
// script does that
//if (sessionStorage.getScreenMediaJSExtensionId) {
// sends a message to the chrome extension (background.js)
chrome.runtime.sendMessage(
extensionId,
{ type:'getScreen', id: 1 },
function(response) {
if (response) {
if (response.sourceId === '') {
// user canceled
} else {
launchScreenShare(extensionId);
}
} else {
installChromeExtension();
}
launchScreenShare(extensionId);
}); // disconnect is called here
} else {
installChromeExtension();
}
}
/*
* Prompt user to install extension
*
*/
function installChromeExtension() {
// set modal pop-up text
var installHtml = 'You need to install the Chrome extension in order to share your screen.';
installHtml += '<ol>';
installHtml += ' <li>Click <b>Install Screenshare Extension</b></li>';
installHtml += ' <li>Click <b>Add Extension</b> in the pop-up</li>';
installHtml += '</ol>';
$('#sfModal').find('h4').html('Chrome extension required');
$('#sfModal').find('p').html(installHtml);
$('#sfModal').modal('show');
}
function launchScreenShare(extensionId) {
// opentok settings
var apiKey = API.key,
sessionId = API.session,
token = API.token;
// For Google Chrome only, register your extension by ID,
// You can find it at chrome://extensions once the extension is installed
OT.registerScreenSharingExtension('chrome', extensionId);
// Check that user has a supported browser and plugin installed
// if so, go ahead and publish
OT.checkScreenSharingCapability(function(response) {
if (!response.supported) {
alert('This browser does not support screen sharing. Please use the Google Chrome browser.');
} else {
var pubOptions = {
videoSource : 'screen',
insertMode: 'append',
width: '100%',
height: '100%',
}
// Screen sharing is available, now publish it!
var screenSharingPublisher = OT.initPublisher(
'videoContainer',
pubOptions,
function(error) {
if (error) {
console.log("Screen sharing cancelled by user.");
} else {
session.publish(
screenSharingPublisher,
function(error) {
if (error) {
alert('Sorry, there was a problem with screensharing. Please try again or contact SpeedFaces support. ' + error.message);
}
});
}
});
// user stopped sharing screen event
screenSharingPublisher.on("streamDestroyed", function () {
console.log("destroyed!");
});
}
});
}
/* background-script.js */
/* background page, responsible for actually choosing media */
chrome.runtime.onMessageExternal.addListener(function (message, sender, callback) {
switch(message.type) {
case 'getScreen':
var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'],
sender.tab, function (streamid) {
// communicate this string to the app so it can call getUserMedia with it
message.type = 'gotScreen';
message.sourceId = streamid;
callback(message);
return false;
});
return true; // retain callback for chooseDesktopMedia result
case 'cancelGetScreen':
chrome.desktopCapture.cancelChooseDesktopMedia(message.request);
message.type = 'canceledGetScreen';
callback(message);
return false; //dispose callback
}
});
/* content-script.js */
sessionStorage.getScreenMediaJSExtensionId = chrome.runtime.id;
@AliceCodeJi
Copy link

123123

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment