forked from meetecho/janus-gateway
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscreensharingtest.html
114 lines (109 loc) · 5.56 KB
/
screensharingtest.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Janus WebRTC Server (multistream): Screen Sharing Demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.2.3/adapter.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="settings.js" ></script>
<script type="text/javascript" src="janus.js" ></script>
<script type="text/javascript" src="screensharingtest.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='screensharingtest.html']").parent().addClass("active");
});
$(".footer").load("footer.html");
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
</head>
<body>
<a href="https://github.com/meetecho/janus-gateway"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1001;" src="forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
<nav class="navbar navbar-default navbar-static-top">
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Plugin Demo: Screen Sharing
<button class="btn btn-default" autocomplete="off" id="start">Start</button>
</h1>
</div>
<div class="container" id="details">
<div class="row">
<div class="col-md-12">
<h3>Demo details</h3>
<p>This demo, as the Video Conferencing one, makes use of the Video Room plugin. Unlike
the video conferencing scenario, though, this demo implements a webinar kind of scenario:
that is, it allows a single user to share their screen with a set of passive
viewers.</p>
<p>When started, the demo asks you whether you want to be the one sharing the screen
(or an application you're using, if your browser version is recent enough)
or a viewer to an existing session. When sharing your screen/application, an ID will be returned
that you'll be able to share with other people to act as viewers.</p>
<div class="alert alert-info"><b>Note well!</b> If you want to share your screen, you may need to open
the <b>HTTPS</b> version of this page. If Janus is not behind the same webserver
as the pages that are served (that is, you didn't configure a proxying of HTTP requests
to Janus via a web frontend, e.g., Apache HTTPD), make sure you started it
with HTTPS support as well, since for security reasons you cannot contact an HTTP
backend if the page has been served via HTTPS. Besides, if you configured Janus
to make use of self-signed certificates, try and open a generic link served by Janus
in the browser itself, or otherwise AJAX requests to it will fail due to the unsafe
nature of the certificate.</div>
<p>Press the <code>Start</code> button above to launch the demo.</p>
</div>
</div>
</div>
<div class="container hide" id="screenmenu">
<div class="row">
<div class="input-group margin-bottom-md hide" id="createnow">
<span class="input-group-addon"><i class="fa fa-users fa-1"></i></span>
<input class="form-control" type="text" placeholder="Insert a title for the session" autocomplete="off" id="desc" onkeypress="return checkEnterShare(this, event);" />
<span class="input-group-btn">
<button class="btn btn-success" autocomplete="off" id="create">Share your screen</button>
</span>
</div>
</div>
<div class="divider col-md-12">
<hr class="pull-left"/>or<hr class="pull-right"/>
</div>
<div class="row">
<div class="input-group margin-bottom-md hide" id="joinnow">
<span class="input-group-addon"><i class="fa fa-play-circle-o fa-1"></i></span>
<input class="form-control" type="text" placeholder="Insert the numeric session identifier" autocomplete="off" id="roomid" onkeypress="return checkEnterJoin(this, event);" />
<span class="input-group-btn">
<button class="btn btn-success" autocomplete="off" id="join">Join an existing session</button>
</span>
</div>
</div>
</div>
<div class="container hide" id="room">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Screen Capture <span class="label label-info" id="title"></span> <span class="label label-success" id="session"></span></h3>
</div>
<div class="panel-body" id="screencapture"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="footer">
</div>
</div>
</body>
</html>