-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
119 lines (113 loc) · 6.21 KB
/
index.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
115
116
117
118
119
<!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>LOS Foundation Web Trainer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/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.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.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="janus.js" ></script>
<script type="text/javascript" src="screensharing.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.3.7/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/app.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
</head>
<body>
<a href="https://github.com/living-opensource-zambia/vidchat"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1001;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
<nav class="navbar navbar-default navbar-static-top bg-orange">
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>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>
<div class="alert alert-info"><b>Note well!</b> Sharing your screen is an experimental
feature in WebRTC, and only works if the browser you're using meets particular requirements.
If you're using a relatively recent version of Chrome (34+), you'll need to install
<b><a href="https://chrome.google.com/webstore/detail/janus-webrtc-screensharin/hapfgfdkleiggjjpfpenajgdnfckjpaj">this extension</a></b>.
If you're using an older verson of Chrome, instead, you'll need to manually enable the Chrome flag
<b><a href="chrome://flags/#enable-usermedia-screen-capture">chrome://flags/#enable-usermedia-screen-capture</a></b>
or otherwise you'll get a permission error. Besides, please beware that some versions of Chrome may only
support the feature if you explicitly pass the <code>--enable-usermedia-screen-capturing</code>
parameter on the command line. Finally, active screen/application sharing will only work from
Firefox if you have at least version 33 installed: if so, make sure you also manually enable
the <code>media.getusermedia.screensharing.enabled</code> setting in
<b><a href="about:config">about:config</a></b>, and that the domain this web application is from
is listed in <code>media.getusermedia.screensharing.allowed_domains</code>.</div>
<div class="alert alert-info"><b>Note well (part 2)!</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);"></input>
<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);"></input>
<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>