Merge pull request #5226 from antobinary/kurento-screenshare

Kurento screensharing - handle "stop sharing" trigger from Chrome
This commit is contained in:
Anton Georgiev 2018-03-08 10:54:44 -05:00 committed by GitHub
commit 52152c8543
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 348 additions and 340 deletions

View File

@ -1,18 +1,17 @@
var isFirefox = typeof window.InstallTrigger !== 'undefined';
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;
var isSafari = navigator.userAgent.indexOf("Safari") >= 0 && !isChrome;
var kurentoHandler = null;
const isFirefox = typeof window.InstallTrigger !== 'undefined';
const isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
const isChrome = !!window.chrome && !isOpera;
const isSafari = navigator.userAgent.indexOf('Safari') >= 0 && !isChrome;
const kurentoHandler = null;
Kurento = function (
tag,
voiceBridge,
conferenceUsername,
internalMeetingId,
onFail = null,
chromeExtension = null
) {
tag,
voiceBridge,
conferenceUsername,
internalMeetingId,
onFail = null,
chromeExtension = null,
) {
this.ws = null;
this.video;
this.screen;
@ -21,7 +20,7 @@ Kurento = function (
this.screenConstraints = {};
this.mediaCallback = null;
this.voiceBridge = voiceBridge + '-SCREENSHARE';
this.voiceBridge = `${voiceBridge}-SCREENSHARE`;
this.internalMeetingId = internalMeetingId;
this.vid_width = window.screen.width;
@ -35,9 +34,9 @@ Kurento = function (
this.caller_id_name = conferenceUsername;
this.caller_id_number = conferenceUsername;
this.kurentoPort = "bbb-webrtc-sfu";
this.kurentoPort = 'bbb-webrtc-sfu';
this.hostName = window.location.hostname;
this.socketUrl = 'wss://' + this.hostName + '/' + this.kurentoPort;
this.socketUrl = `wss://${this.hostName}/${this.kurentoPort}`;
this.iceServers = null;
@ -49,23 +48,23 @@ Kurento = function (
if (onFail != null) {
this.onFail = Kurento.normalizeCallback(onFail);
} else {
var _this = this;
const _this = this;
this.onFail = function () {
_this.logError('Default error handler');
};
}
};
this.KurentoManager= function () {
this.KurentoManager = function () {
this.kurentoVideo = null;
this.kurentoScreenshare = null;
};
KurentoManager.prototype.exitScreenShare = function () {
console.log(" [exitScreenShare] Exiting screensharing");
if(typeof this.kurentoScreenshare !== 'undefined' && this.kurentoScreenshare) {
if(this.kurentoScreenshare.ws !== null) {
this.kurentoScreenshare.ws.onclose = function(){};
console.log(' [exitScreenShare] Exiting screensharing');
if (typeof this.kurentoScreenshare !== 'undefined' && this.kurentoScreenshare) {
if (this.kurentoScreenshare.ws !== null) {
this.kurentoScreenshare.ws.onclose = function () {};
this.kurentoScreenshare.ws.close();
}
@ -77,16 +76,16 @@ KurentoManager.prototype.exitScreenShare = function () {
this.kurentoScreenshare = null;
}
if(typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
if (typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
this.exitVideo();
}
};
KurentoManager.prototype.exitVideo = function () {
console.log(" [exitScreenShare] Exiting screensharing viewing");
if(typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
if(this.kurentoVideo.ws !== null) {
this.kurentoVideo.ws.onclose = function(){};
console.log(' [exitScreenShare] Exiting screensharing viewing');
if (typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
if (this.kurentoVideo.ws !== null) {
this.kurentoVideo.ws.onclose = function () {};
this.kurentoVideo.ws.close();
}
@ -101,7 +100,7 @@ KurentoManager.prototype.exitVideo = function () {
KurentoManager.prototype.shareScreen = function (tag) {
this.exitScreenShare();
var obj = Object.create(Kurento.prototype);
const obj = Object.create(Kurento.prototype);
Kurento.apply(obj, arguments);
this.kurentoScreenshare = obj;
this.kurentoScreenshare.setScreenShare(tag);
@ -109,7 +108,7 @@ KurentoManager.prototype.shareScreen = function (tag) {
KurentoManager.prototype.joinWatchVideo = function (tag) {
this.exitVideo();
var obj = Object.create(Kurento.prototype);
const obj = Object.create(Kurento.prototype);
Kurento.apply(obj, arguments);
this.kurentoVideo = obj;
this.kurentoVideo.setWatchVideo(tag);
@ -128,30 +127,28 @@ Kurento.prototype.create = function (tag) {
};
Kurento.prototype.init = function () {
var self = this;
if("WebSocket" in window) {
console.log("this browser supports websockets");
const self = this;
if ('WebSocket' in window) {
console.log('this browser supports websockets');
this.ws = new WebSocket(this.socketUrl);
this.ws.onmessage = this.onWSMessage.bind(this);
this.ws.onclose = (close) => {
kurentoManager.exitScreenShare();
self.onFail("Websocket connection closed");
self.onFail('Websocket connection closed');
};
this.ws.onerror = (error) => {
kurentoManager.exitScreenShare();
self.onFail("Websocket connection error");
self.onFail('Websocket connection error');
};
this.ws.onopen = function () {
self.mediaCallback();
}.bind(self);
}
else
console.log("this browser does not support websockets");
};
} else { console.log('this browser does not support websockets'); }
};
Kurento.prototype.onWSMessage = function (message) {
var parsedMessage = JSON.parse(message.data);
const parsedMessage = JSON.parse(message.data);
switch (parsedMessage.id) {
case 'presenterResponse':
@ -176,79 +173,79 @@ Kurento.prototype.setRenderTag = function (tag) {
};
Kurento.prototype.presenterResponse = function (message) {
if (message.response != 'accepted') {
var errorMsg = message.message ? message.message : 'Unknown error';
console.warn('Call not accepted for the following reason: ' + JSON.stringify(errorMsg, null, 2));
if (message.response !== 'accepted') {
const errorMsg = message.message ? message.message : 'Unknown error';
console.warn(`Call not accepted for the following reason: ${JSON.stringify(errorMsg, null, 2)}`);
kurentoManager.exitScreenShare();
this.onFail(errorMessage);
} else {
console.log("Presenter call was accepted with SDP => " + message.sdpAnswer);
console.log(`Presenter call was accepted with SDP => ${message.sdpAnswer}`);
this.webRtcPeer.processAnswer(message.sdpAnswer);
}
}
};
Kurento.prototype.viewerResponse = function (message) {
if (message.response != 'accepted') {
var errorMsg = message.message ? message.message : 'Unknown error';
console.warn('Call not accepted for the following reason: ' + errorMsg);
if (message.response !== 'accepted') {
const errorMsg = message.message ? message.message : 'Unknown error';
console.warn(`Call not accepted for the following reason: ${errorMsg}`);
kurentoManager.exitScreenShare();
this.onFail(errorMessage);
} else {
console.log("Viewer call was accepted with SDP => " + message.sdpAnswer);
console.log(`Viewer call was accepted with SDP => ${message.sdpAnswer}`);
this.webRtcPeer.processAnswer(message.sdpAnswer);
}
}
};
Kurento.prototype.serverResponse = function (message) {
if (message.response != 'accepted') {
var errorMsg = message.message ? message.message : 'Unknow error';
console.warn('Call not accepted for the following reason: ' + errorMsg);
if (message.response !== 'accepted') {
const errorMsg = message.message ? message.message : 'Unknow error';
console.warn(`Call not accepted for the following reason: ${errorMsg}`);
kurentoManager.exitScreenShare();
} else {
this.webRtcPeer.processAnswer(message.sdpAnswer);
}
}
};
Kurento.prototype.makeShare = function() {
var self = this;
Kurento.prototype.makeShare = function () {
const self = this;
if (!this.webRtcPeer) {
var options = {
onicecandidate : self.onIceCandidate.bind(self)
}
const options = {
onicecandidate: self.onIceCandidate.bind(self),
};
this.startScreenStreamFrom();
}
}
};
Kurento.prototype.onOfferPresenter = function (error, offerSdp) {
let self = this;
if(error) {
console.log("Kurento.prototype.onOfferPresenter Error " + error);
const self = this;
if (error) {
console.log(`Kurento.prototype.onOfferPresenter Error ${error}`);
this.onFail(error);
return;
}
var message = {
id : 'presenter',
const message = {
id: 'presenter',
type: 'screenshare',
role: 'presenter',
internalMeetingId: self.internalMeetingId,
voiceBridge: self.voiceBridge,
callerName : self.caller_id_name,
sdpOffer : offerSdp,
callerName: self.caller_id_name,
sdpOffer: offerSdp,
vh: self.vid_height,
vw: self.vid_width
vw: self.vid_width,
};
console.log("onOfferPresenter sending to screenshare server => " + JSON.stringify(message, null, 2));
console.log(`onOfferPresenter sending to screenshare server => ${JSON.stringify(message, null, 2)}`);
this.sendMessage(message);
}
};
Kurento.prototype.startScreenStreamFrom = function () {
var self = this;
if (!!window.chrome) {
const self = this;
if (window.chrome) {
if (!self.chromeExtension) {
self.logError({
status: 'failed',
status: 'failed',
message: 'Missing Chrome Extension key',
});
self.onFail();
@ -262,55 +259,64 @@ Kurento.prototype.startScreenStreamFrom = function () {
self.screenConstraints.video = {};
console.log(self);
var options = {
const options = {
localVideo: document.getElementById(this.renderTag),
onicecandidate : self.onIceCandidate.bind(self),
mediaConstraints : self.screenConstraints,
sendSource : 'desktop'
onicecandidate: self.onIceCandidate.bind(self),
mediaConstraints: self.screenConstraints,
sendSource: 'desktop',
};
console.log(" Peer options => " + JSON.stringify(options, null, 2));
console.log(` Peer options => ${JSON.stringify(options, null, 2)}`);
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, function(error) {
if(error) {
console.log("WebRtcPeerSendonly constructor error " + JSON.stringify(error, null, 2));
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, (error) => {
if (error) {
console.log(`WebRtcPeerSendonly constructor error ${JSON.stringify(error, null, 2)}`);
self.onFail(error);
return kurentoManager.exitScreenShare();
}
self.webRtcPeer.generateOffer(self.onOfferPresenter.bind(self));
console.log("Generated peer offer w/ options " + JSON.stringify(options));
console.log(`Generated peer offer w/ options ${JSON.stringify(options)}`);
const localStream = self.webRtcPeer.peerConnection.getLocalStreams()[0];
localStream.getVideoTracks()[0].onended = function () {
return kurentoManager.exitScreenShare();
};
localStream.getVideoTracks()[0].oninactive = function () {
return kurentoManager.exitScreenShare();
};
});
}
};
Kurento.prototype.onIceCandidate = function (candidate) {
let self = this;
console.log('Local candidate' + JSON.stringify(candidate));
const self = this;
console.log(`Local candidate${JSON.stringify(candidate)}`);
var message = {
id : 'onIceCandidate',
const message = {
id: 'onIceCandidate',
role: 'presenter',
type: 'screenshare',
voiceBridge: self.voiceBridge,
candidate : candidate
}
candidate,
};
this.sendMessage(message);
}
};
Kurento.prototype.onViewerIceCandidate = function (candidate) {
let self = this;
console.log('Viewer local candidate' + JSON.stringify(candidate));
const self = this;
console.log(`Viewer local candidate${JSON.stringify(candidate)}`);
var message = {
id : 'viewerIceCandidate',
const message = {
id: 'viewerIceCandidate',
role: 'viewer',
type: 'screenshare',
voiceBridge: self.voiceBridge,
candidate : candidate,
callerName: self.caller_id_name
}
candidate,
callerName: self.caller_id_name,
};
this.sendMessage(message);
}
};
Kurento.prototype.setWatchVideo = function (tag) {
this.useVideo = true;
@ -321,16 +327,15 @@ Kurento.prototype.setWatchVideo = function (tag) {
};
Kurento.prototype.viewer = function () {
var self = this;
const self = this;
if (!this.webRtcPeer) {
var options = {
const options = {
remoteVideo: document.getElementById(this.renderTag),
onicecandidate : this.onViewerIceCandidate.bind(this)
}
onicecandidate: this.onViewerIceCandidate.bind(this),
};
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function(error) {
if(error) {
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function (error) {
if (error) {
return self.onFail(error);
}
@ -340,27 +345,27 @@ Kurento.prototype.viewer = function () {
};
Kurento.prototype.onOfferViewer = function (error, offerSdp) {
let self = this;
if(error) {
console.log("Kurento.prototype.onOfferViewer Error " + error);
const self = this;
if (error) {
console.log(`Kurento.prototype.onOfferViewer Error ${error}`);
return this.onFail();
}
var message = {
id : 'viewer',
const message = {
id: 'viewer',
type: 'screenshare',
role: 'viewer',
internalMeetingId: self.internalMeetingId,
voiceBridge: self.voiceBridge,
callerName : self.caller_id_name,
sdpOffer : offerSdp
callerName: self.caller_id_name,
sdpOffer: offerSdp,
};
console.log("onOfferViewer sending to screenshare server => " + JSON.stringify(message, null, 2));
console.log(`onOfferViewer sending to screenshare server => ${JSON.stringify(message, null, 2)}`);
this.sendMessage(message);
};
Kurento.prototype.stop = function() {
//if (this.webRtcPeer) {
Kurento.prototype.stop = function () {
// if (this.webRtcPeer) {
// var message = {
// id : 'stop',
// type : 'screenshare',
@ -368,28 +373,28 @@ Kurento.prototype.stop = function() {
// }
// kurentoHandler.sendMessage(message);
// kurentoHandler.disposeScreenShare();
//}
}
// }
};
Kurento.prototype.dispose = function() {
Kurento.prototype.dispose = function () {
if (this.webRtcPeer) {
this.webRtcPeer.dispose();
this.webRtcPeer = null;
}
}
};
Kurento.prototype.disposeScreenShare = function() {
Kurento.prototype.disposeScreenShare = function () {
if (this.webRtcPeer) {
this.webRtcPeer.dispose();
this.webRtcPeer = null;
}
}
};
Kurento.prototype.sendMessage = function(message) {
var jsonMessage = JSON.stringify(message);
console.log('Sending message: ' + jsonMessage);
Kurento.prototype.sendMessage = function (message) {
const jsonMessage = JSON.stringify(message);
console.log(`Sending message: ${jsonMessage}`);
this.ws.send(jsonMessage);
}
};
Kurento.prototype.logger = function (obj) {
console.log(obj);
@ -401,77 +406,73 @@ Kurento.prototype.logError = function (obj) {
Kurento.normalizeCallback = function (callback) {
if (typeof callback == 'function') {
if (typeof callback === 'function') {
return callback;
} else {
console.log(document.getElementById('BigBlueButton')[callback]);
return function (args) {
document.getElementById('BigBlueButton')[callback](args);
};
}
console.log(document.getElementById('BigBlueButton')[callback]);
return function (args) {
document.getElementById('BigBlueButton')[callback](args);
};
};
/* Global methods */
// this function explains how to use above methods/objects
window.getScreenConstraints = function(sendSource, callback) {
let chromeMediaSourceId = sendSource;
let screenConstraints = {video: {}};
window.getScreenConstraints = function (sendSource, callback) {
const chromeMediaSourceId = sendSource;
const screenConstraints = { video: {} };
// Limiting FPS to a range of 5-10 (5 ideal)
screenConstraints.video.frameRate = {ideal: 5, max: 10};
screenConstraints.video.frameRate = { ideal: 5, max: 10 };
// Limiting max resolution to screen size
screenConstraints.video.height = {max: window.screen.height};
screenConstraints.video.width = {max: window.screen.width};
screenConstraints.video.height = { max: window.screen.height };
screenConstraints.video.width = { max: window.screen.width };
if(isChrome) {
getChromeScreenConstraints ((constraints) => {
if (isChrome) {
getChromeScreenConstraints((constraints) => {
if (!constraints) {
document.dispatchEvent(new Event("installChromeExtension"));
document.dispatchEvent(new Event('installChromeExtension'));
return;
}
let sourceId = constraints.streamId;
const sourceId = constraints.streamId;
kurentoManager.kurentoScreenshare.extensionInstalled = true;
// this statement sets gets 'sourceId" and sets "chromeMediaSourceId"
screenConstraints.video.chromeMediaSource = { exact: [sendSource]};
screenConstraints.video.chromeMediaSource = { exact: [sendSource] };
screenConstraints.video.chromeMediaSourceId = sourceId;
console.log("getScreenConstraints for Chrome returns => ");
console.log('getScreenConstraints for Chrome returns => ');
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
}, chromeExtension);
}
else if (isFirefox) {
screenConstraints.video.mediaSource= "screen";
} else if (isFirefox) {
screenConstraints.video.mediaSource = 'screen';
console.log("getScreenConstraints for Firefox returns => ");
console.log('getScreenConstraints for Firefox returns => ');
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
} else if (isSafari) {
screenConstraints.video.mediaSource = 'screen';
console.log('getScreenConstraints for Safari returns => ');
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
}
else if(isSafari) {
screenConstraints.video.mediaSource= "screen";
console.log("getScreenConstraints for Safari returns => ");
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
}
}
};
window.kurentoInitialize = function () {
if (window.kurentoManager == null || window.KurentoManager == undefined) {
if (window.kurentoManager == null || window.KurentoManager === undefined) {
window.kurentoManager = new KurentoManager();
}
};
window.kurentoShareScreen = function() {
window.kurentoShareScreen = function () {
window.kurentoInitialize();
window.kurentoManager.shareScreen.apply(window.kurentoManager, arguments);
};
@ -490,18 +491,21 @@ window.kurentoWatchVideo = function () {
window.kurentoExitVideo = function () {
window.kurentoInitialize();
window.kurentoManager.exitVideo();
}
};
window.getChromeScreenConstraints = function(callback, extensionId) {
chrome.runtime.sendMessage(extensionId, {
getStream: true,
sources: [
"window",
"screen",
"tab"
]},
function(response) {
window.getChromeScreenConstraints = function (callback, extensionId) {
chrome.runtime.sendMessage(
extensionId, {
getStream: true,
sources: [
'window',
'screen',
'tab',
],
},
(response) => {
console.log(response);
callback(response);
});
};;
},
);
};

View File

@ -1,18 +1,17 @@
var isFirefox = typeof window.InstallTrigger !== 'undefined';
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;
var isSafari = navigator.userAgent.indexOf("Safari") >= 0 && !isChrome;
var kurentoHandler = null;
const isFirefox = typeof window.InstallTrigger !== 'undefined';
const isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
const isChrome = !!window.chrome && !isOpera;
const isSafari = navigator.userAgent.indexOf('Safari') >= 0 && !isChrome;
const kurentoHandler = null;
Kurento = function (
tag,
voiceBridge,
conferenceUsername,
internalMeetingId,
onFail = null,
chromeExtension = null
) {
tag,
voiceBridge,
conferenceUsername,
internalMeetingId,
onFail = null,
chromeExtension = null,
) {
this.ws = null;
this.video;
this.screen;
@ -21,7 +20,7 @@ Kurento = function (
this.screenConstraints = {};
this.mediaCallback = null;
this.voiceBridge = voiceBridge + '-SCREENSHARE';
this.voiceBridge = `${voiceBridge}-SCREENSHARE`;
this.internalMeetingId = internalMeetingId;
this.vid_width = window.screen.width;
@ -35,9 +34,9 @@ Kurento = function (
this.caller_id_name = conferenceUsername;
this.caller_id_number = conferenceUsername;
this.kurentoPort = "bbb-webrtc-sfu";
this.kurentoPort = 'bbb-webrtc-sfu';
this.hostName = window.location.hostname;
this.socketUrl = 'wss://' + this.hostName + '/' + this.kurentoPort;
this.socketUrl = `wss://${this.hostName}/${this.kurentoPort}`;
this.iceServers = null;
@ -49,23 +48,23 @@ Kurento = function (
if (onFail != null) {
this.onFail = Kurento.normalizeCallback(onFail);
} else {
var _this = this;
const _this = this;
this.onFail = function () {
_this.logError('Default error handler');
};
}
};
this.KurentoManager= function () {
this.KurentoManager = function () {
this.kurentoVideo = null;
this.kurentoScreenshare = null;
};
KurentoManager.prototype.exitScreenShare = function () {
console.log(" [exitScreenShare] Exiting screensharing");
if(typeof this.kurentoScreenshare !== 'undefined' && this.kurentoScreenshare) {
if(this.kurentoScreenshare.ws !== null) {
this.kurentoScreenshare.ws.onclose = function(){};
console.log(' [exitScreenShare] Exiting screensharing');
if (typeof this.kurentoScreenshare !== 'undefined' && this.kurentoScreenshare) {
if (this.kurentoScreenshare.ws !== null) {
this.kurentoScreenshare.ws.onclose = function () {};
this.kurentoScreenshare.ws.close();
}
@ -77,16 +76,16 @@ KurentoManager.prototype.exitScreenShare = function () {
this.kurentoScreenshare = null;
}
if(typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
if (typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
this.exitVideo();
}
};
KurentoManager.prototype.exitVideo = function () {
console.log(" [exitScreenShare] Exiting screensharing viewing");
if(typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
if(this.kurentoVideo.ws !== null) {
this.kurentoVideo.ws.onclose = function(){};
console.log(' [exitScreenShare] Exiting screensharing viewing');
if (typeof this.kurentoVideo !== 'undefined' && this.kurentoVideo) {
if (this.kurentoVideo.ws !== null) {
this.kurentoVideo.ws.onclose = function () {};
this.kurentoVideo.ws.close();
}
@ -101,7 +100,7 @@ KurentoManager.prototype.exitVideo = function () {
KurentoManager.prototype.shareScreen = function (tag) {
this.exitScreenShare();
var obj = Object.create(Kurento.prototype);
const obj = Object.create(Kurento.prototype);
Kurento.apply(obj, arguments);
this.kurentoScreenshare = obj;
this.kurentoScreenshare.setScreenShare(tag);
@ -109,7 +108,7 @@ KurentoManager.prototype.shareScreen = function (tag) {
KurentoManager.prototype.joinWatchVideo = function (tag) {
this.exitVideo();
var obj = Object.create(Kurento.prototype);
const obj = Object.create(Kurento.prototype);
Kurento.apply(obj, arguments);
this.kurentoVideo = obj;
this.kurentoVideo.setWatchVideo(tag);
@ -128,30 +127,28 @@ Kurento.prototype.create = function (tag) {
};
Kurento.prototype.init = function () {
var self = this;
if("WebSocket" in window) {
console.log("this browser supports websockets");
const self = this;
if ('WebSocket' in window) {
console.log('this browser supports websockets');
this.ws = new WebSocket(this.socketUrl);
this.ws.onmessage = this.onWSMessage.bind(this);
this.ws.onclose = (close) => {
kurentoManager.exitScreenShare();
self.onFail("Websocket connection closed");
self.onFail('Websocket connection closed');
};
this.ws.onerror = (error) => {
kurentoManager.exitScreenShare();
self.onFail("Websocket connection error");
self.onFail('Websocket connection error');
};
this.ws.onopen = function () {
self.mediaCallback();
}.bind(self);
}
else
console.log("this browser does not support websockets");
};
} else { console.log('this browser does not support websockets'); }
};
Kurento.prototype.onWSMessage = function (message) {
var parsedMessage = JSON.parse(message.data);
const parsedMessage = JSON.parse(message.data);
switch (parsedMessage.id) {
case 'presenterResponse':
@ -176,79 +173,79 @@ Kurento.prototype.setRenderTag = function (tag) {
};
Kurento.prototype.presenterResponse = function (message) {
if (message.response != 'accepted') {
var errorMsg = message.message ? message.message : 'Unknown error';
console.warn('Call not accepted for the following reason: ' + JSON.stringify(errorMsg, null, 2));
if (message.response !== 'accepted') {
const errorMsg = message.message ? message.message : 'Unknown error';
console.warn(`Call not accepted for the following reason: ${JSON.stringify(errorMsg, null, 2)}`);
kurentoManager.exitScreenShare();
this.onFail(errorMessage);
} else {
console.log("Presenter call was accepted with SDP => " + message.sdpAnswer);
console.log(`Presenter call was accepted with SDP => ${message.sdpAnswer}`);
this.webRtcPeer.processAnswer(message.sdpAnswer);
}
}
};
Kurento.prototype.viewerResponse = function (message) {
if (message.response != 'accepted') {
var errorMsg = message.message ? message.message : 'Unknown error';
console.warn('Call not accepted for the following reason: ' + errorMsg);
if (message.response !== 'accepted') {
const errorMsg = message.message ? message.message : 'Unknown error';
console.warn(`Call not accepted for the following reason: ${errorMsg}`);
kurentoManager.exitScreenShare();
this.onFail(errorMessage);
} else {
console.log("Viewer call was accepted with SDP => " + message.sdpAnswer);
console.log(`Viewer call was accepted with SDP => ${message.sdpAnswer}`);
this.webRtcPeer.processAnswer(message.sdpAnswer);
}
}
};
Kurento.prototype.serverResponse = function (message) {
if (message.response != 'accepted') {
var errorMsg = message.message ? message.message : 'Unknow error';
console.warn('Call not accepted for the following reason: ' + errorMsg);
if (message.response !== 'accepted') {
const errorMsg = message.message ? message.message : 'Unknow error';
console.warn(`Call not accepted for the following reason: ${errorMsg}`);
kurentoManager.exitScreenShare();
} else {
this.webRtcPeer.processAnswer(message.sdpAnswer);
}
}
};
Kurento.prototype.makeShare = function() {
var self = this;
Kurento.prototype.makeShare = function () {
const self = this;
if (!this.webRtcPeer) {
var options = {
onicecandidate : self.onIceCandidate.bind(self)
}
const options = {
onicecandidate: self.onIceCandidate.bind(self),
};
this.startScreenStreamFrom();
}
}
};
Kurento.prototype.onOfferPresenter = function (error, offerSdp) {
let self = this;
if(error) {
console.log("Kurento.prototype.onOfferPresenter Error " + error);
const self = this;
if (error) {
console.log(`Kurento.prototype.onOfferPresenter Error ${error}`);
this.onFail(error);
return;
}
var message = {
id : 'presenter',
const message = {
id: 'presenter',
type: 'screenshare',
role: 'presenter',
internalMeetingId: self.internalMeetingId,
voiceBridge: self.voiceBridge,
callerName : self.caller_id_name,
sdpOffer : offerSdp,
callerName: self.caller_id_name,
sdpOffer: offerSdp,
vh: self.vid_height,
vw: self.vid_width
vw: self.vid_width,
};
console.log("onOfferPresenter sending to screenshare server => " + JSON.stringify(message, null, 2));
console.log(`onOfferPresenter sending to screenshare server => ${JSON.stringify(message, null, 2)}`);
this.sendMessage(message);
}
};
Kurento.prototype.startScreenStreamFrom = function () {
var self = this;
if (!!window.chrome) {
const self = this;
if (window.chrome) {
if (!self.chromeExtension) {
self.logError({
status: 'failed',
status: 'failed',
message: 'Missing Chrome Extension key',
});
self.onFail();
@ -262,55 +259,64 @@ Kurento.prototype.startScreenStreamFrom = function () {
self.screenConstraints.video = {};
console.log(self);
var options = {
const options = {
localVideo: document.getElementById(this.renderTag),
onicecandidate : self.onIceCandidate.bind(self),
mediaConstraints : self.screenConstraints,
sendSource : 'desktop'
onicecandidate: self.onIceCandidate.bind(self),
mediaConstraints: self.screenConstraints,
sendSource: 'desktop',
};
console.log(" Peer options => " + JSON.stringify(options, null, 2));
console.log(` Peer options => ${JSON.stringify(options, null, 2)}`);
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, function(error) {
if(error) {
console.log("WebRtcPeerSendonly constructor error " + JSON.stringify(error, null, 2));
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, (error) => {
if (error) {
console.log(`WebRtcPeerSendonly constructor error ${JSON.stringify(error, null, 2)}`);
self.onFail(error);
return kurentoManager.exitScreenShare();
}
self.webRtcPeer.generateOffer(self.onOfferPresenter.bind(self));
console.log("Generated peer offer w/ options " + JSON.stringify(options));
console.log(`Generated peer offer w/ options ${JSON.stringify(options)}`);
const localStream = self.webRtcPeer.peerConnection.getLocalStreams()[0];
localStream.getVideoTracks()[0].onended = function () {
return kurentoManager.exitScreenShare();
};
localStream.getVideoTracks()[0].oninactive = function () {
return kurentoManager.exitScreenShare();
};
});
}
};
Kurento.prototype.onIceCandidate = function (candidate) {
let self = this;
console.log('Local candidate' + JSON.stringify(candidate));
const self = this;
console.log(`Local candidate${JSON.stringify(candidate)}`);
var message = {
id : 'onIceCandidate',
const message = {
id: 'onIceCandidate',
role: 'presenter',
type: 'screenshare',
voiceBridge: self.voiceBridge,
candidate : candidate
}
candidate,
};
this.sendMessage(message);
}
};
Kurento.prototype.onViewerIceCandidate = function (candidate) {
let self = this;
console.log('Viewer local candidate' + JSON.stringify(candidate));
const self = this;
console.log(`Viewer local candidate${JSON.stringify(candidate)}`);
var message = {
id : 'viewerIceCandidate',
const message = {
id: 'viewerIceCandidate',
role: 'viewer',
type: 'screenshare',
voiceBridge: self.voiceBridge,
candidate : candidate,
callerName: self.caller_id_name
}
candidate,
callerName: self.caller_id_name,
};
this.sendMessage(message);
}
};
Kurento.prototype.setWatchVideo = function (tag) {
this.useVideo = true;
@ -321,16 +327,15 @@ Kurento.prototype.setWatchVideo = function (tag) {
};
Kurento.prototype.viewer = function () {
var self = this;
const self = this;
if (!this.webRtcPeer) {
var options = {
const options = {
remoteVideo: document.getElementById(this.renderTag),
onicecandidate : this.onViewerIceCandidate.bind(this)
}
onicecandidate: this.onViewerIceCandidate.bind(this),
};
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function(error) {
if(error) {
self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function (error) {
if (error) {
return self.onFail(error);
}
@ -340,27 +345,27 @@ Kurento.prototype.viewer = function () {
};
Kurento.prototype.onOfferViewer = function (error, offerSdp) {
let self = this;
if(error) {
console.log("Kurento.prototype.onOfferViewer Error " + error);
const self = this;
if (error) {
console.log(`Kurento.prototype.onOfferViewer Error ${error}`);
return this.onFail();
}
var message = {
id : 'viewer',
const message = {
id: 'viewer',
type: 'screenshare',
role: 'viewer',
internalMeetingId: self.internalMeetingId,
voiceBridge: self.voiceBridge,
callerName : self.caller_id_name,
sdpOffer : offerSdp
callerName: self.caller_id_name,
sdpOffer: offerSdp,
};
console.log("onOfferViewer sending to screenshare server => " + JSON.stringify(message, null, 2));
console.log(`onOfferViewer sending to screenshare server => ${JSON.stringify(message, null, 2)}`);
this.sendMessage(message);
};
Kurento.prototype.stop = function() {
//if (this.webRtcPeer) {
Kurento.prototype.stop = function () {
// if (this.webRtcPeer) {
// var message = {
// id : 'stop',
// type : 'screenshare',
@ -368,28 +373,28 @@ Kurento.prototype.stop = function() {
// }
// kurentoHandler.sendMessage(message);
// kurentoHandler.disposeScreenShare();
//}
}
// }
};
Kurento.prototype.dispose = function() {
Kurento.prototype.dispose = function () {
if (this.webRtcPeer) {
this.webRtcPeer.dispose();
this.webRtcPeer = null;
}
}
};
Kurento.prototype.disposeScreenShare = function() {
Kurento.prototype.disposeScreenShare = function () {
if (this.webRtcPeer) {
this.webRtcPeer.dispose();
this.webRtcPeer = null;
}
}
};
Kurento.prototype.sendMessage = function(message) {
var jsonMessage = JSON.stringify(message);
console.log('Sending message: ' + jsonMessage);
Kurento.prototype.sendMessage = function (message) {
const jsonMessage = JSON.stringify(message);
console.log(`Sending message: ${jsonMessage}`);
this.ws.send(jsonMessage);
}
};
Kurento.prototype.logger = function (obj) {
console.log(obj);
@ -401,77 +406,73 @@ Kurento.prototype.logError = function (obj) {
Kurento.normalizeCallback = function (callback) {
if (typeof callback == 'function') {
if (typeof callback === 'function') {
return callback;
} else {
console.log(document.getElementById('BigBlueButton')[callback]);
return function (args) {
document.getElementById('BigBlueButton')[callback](args);
};
}
console.log(document.getElementById('BigBlueButton')[callback]);
return function (args) {
document.getElementById('BigBlueButton')[callback](args);
};
};
/* Global methods */
// this function explains how to use above methods/objects
window.getScreenConstraints = function(sendSource, callback) {
let chromeMediaSourceId = sendSource;
let screenConstraints = {video: {}};
window.getScreenConstraints = function (sendSource, callback) {
const chromeMediaSourceId = sendSource;
const screenConstraints = { video: {} };
// Limiting FPS to a range of 5-10 (5 ideal)
screenConstraints.video.frameRate = {ideal: 5, max: 10};
screenConstraints.video.frameRate = { ideal: 5, max: 10 };
// Limiting max resolution to screen size
screenConstraints.video.height = {max: window.screen.height};
screenConstraints.video.width = {max: window.screen.width};
screenConstraints.video.height = { max: window.screen.height };
screenConstraints.video.width = { max: window.screen.width };
if(isChrome) {
getChromeScreenConstraints ((constraints) => {
if (isChrome) {
getChromeScreenConstraints((constraints) => {
if (!constraints) {
document.dispatchEvent(new Event("installChromeExtension"));
document.dispatchEvent(new Event('installChromeExtension'));
return;
}
let sourceId = constraints.streamId;
const sourceId = constraints.streamId;
kurentoManager.kurentoScreenshare.extensionInstalled = true;
// this statement sets gets 'sourceId" and sets "chromeMediaSourceId"
screenConstraints.video.chromeMediaSource = { exact: [sendSource]};
screenConstraints.video.chromeMediaSource = { exact: [sendSource] };
screenConstraints.video.chromeMediaSourceId = sourceId;
console.log("getScreenConstraints for Chrome returns => ");
console.log('getScreenConstraints for Chrome returns => ');
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
}, chromeExtension);
}
else if (isFirefox) {
screenConstraints.video.mediaSource= "screen";
} else if (isFirefox) {
screenConstraints.video.mediaSource = 'screen';
console.log("getScreenConstraints for Firefox returns => ");
console.log('getScreenConstraints for Firefox returns => ');
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
} else if (isSafari) {
screenConstraints.video.mediaSource = 'screen';
console.log('getScreenConstraints for Safari returns => ');
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
}
else if(isSafari) {
screenConstraints.video.mediaSource= "screen";
console.log("getScreenConstraints for Safari returns => ");
console.log(screenConstraints);
// now invoking native getUserMedia API
callback(null, screenConstraints);
}
}
};
window.kurentoInitialize = function () {
if (window.kurentoManager == null || window.KurentoManager == undefined) {
if (window.kurentoManager == null || window.KurentoManager === undefined) {
window.kurentoManager = new KurentoManager();
}
};
window.kurentoShareScreen = function() {
window.kurentoShareScreen = function () {
window.kurentoInitialize();
window.kurentoManager.shareScreen.apply(window.kurentoManager, arguments);
};
@ -490,18 +491,21 @@ window.kurentoWatchVideo = function () {
window.kurentoExitVideo = function () {
window.kurentoInitialize();
window.kurentoManager.exitVideo();
}
};
window.getChromeScreenConstraints = function(callback, extensionId) {
chrome.runtime.sendMessage(extensionId, {
getStream: true,
sources: [
"window",
"screen",
"tab"
]},
function(response) {
window.getChromeScreenConstraints = function (callback, extensionId) {
chrome.runtime.sendMessage(
extensionId, {
getStream: true,
sources: [
'window',
'screen',
'tab',
],
},
(response) => {
console.log(response);
callback(response);
});
};;
},
);
};