forked from opentok/screensharing-extensions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
screensharing-test.html
95 lines (85 loc) · 3.72 KB
/
screensharing-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<body>
<button onclick="javascript:screenshare();" disabled id="shareBtn">Share your screen</button>
<div id="camera-publisher"></div>
<div id="camera-subscriber"></div>
<div id="screen-subscriber"></div>
<script src="//static.opentok.com/v2/js/opentok.js"></script>
<script type="text/javascript">
// Go to https://dashboard.tokbox.com/ to get your OpenTok API Key and to generate
// a test session ID and token:
var apiKey = '',
sessionId = '',
token = '';
// Replace this with the ID for your Chrome screen-sharing extension, which you can
// get at chrome://extensions/:
var extensionId = '<YOUR_CHROME_EXTENSION_ID>';
// If you register your domain with the the Firefox screen-sharing whitelist, instead of using
// a Firefox screen-sharing extension, set this to the Firefox version number, such as 36, in which
// your domain was added to the whitelist:
var ffWhitelistVersion; // = '36';
var session = OT.initSession(apiKey, sessionId);
session.connect(token, function(error) {
if (error) {
alert('Error connecting to session: ' + error.message);
return;
}
// publish a stream using the camera and microphone:
var publisher = OT.initPublisher('camera-publisher');
session.publish(publisher);
document.getElementById('shareBtn').disabled = false;
});
session.on('streamCreated', function(event) {
if (event.stream.videoType === 'screen') {
// This is a screen-sharing stream published by another client
var subOptions = {
width: event.stream.videoDimensions.width / 2,
height: event.stream.videoDimensions.height / 2
};
session.subscribe(event.stream, 'screen-subscriber', subOptions);
} else {
// This is a stream published by another client using the camera and microphone
session.subscribe(event.stream, 'camera-subscriber');
}
});
// 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, 2);
function screenshare() {
OT.checkScreenSharingCapability(function(response) {
console.info(response);
if (!response.supported || response.extensionRegistered === false) {
alert('This browser does not support screen sharing.');
} else if (response.extensionInstalled === false
&& (response.extensionRequired || !ffWhitelistVersion)) {
alert('Please install the screen-sharing extension and load this page over HTTPS.');
} else if (ffWhitelistVersion && navigator.userAgent.match(/Firefox/)
&& navigator.userAgent.match(/Firefox\/(\d+)/)[1] < ffWhitelistVersion) {
alert('For screen sharing, please update your version of Firefox to '
+ ffWhitelistVersion + '.');
} else {
// Screen sharing is available. Publish the screen.
// Create an element, but do not display it in the HTML DOM:
var screenContainerElement = document.createElement('div');
var screenSharingPublisher = OT.initPublisher(
screenContainerElement,
{ videoSource : 'screen' },
function(error) {
if (error) {
alert('Something went wrong: ' + error.message);
} else {
session.publish(
screenSharingPublisher,
function(error) {
if (error) {
alert('Something went wrong: ' + error.message);
}
});
}
});
}
});
}
</script>
</body>
</html>