Statistics
| Branch: | Revision:

janus-gateway / html / screensharingtest.html @ 8241c758

History | View | Annotate | Download (6.6 KB)

1 cfd5c0d6 meetecho
<!DOCTYPE html>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7
<title>Janus WebRTC Gateway: Screen Sharing Demo</title>
8
<script type="text/javascript" src="jquery.min.js" ></script>
9
<script type="text/javascript" src="jquery.blockUI.js" ></script>
10
<script type="text/javascript" src="js/bootstrap.js"></script>
11
<script type="text/javascript" src="js/bootbox.min.js"></script>
12
<script type="text/javascript" src="js/spin.min.js"></script>
13
<script type="text/javascript" src="janus.js" ></script>
14
<script type="text/javascript" src="screensharingtest.js"></script>
15 6d795273 Lorenzo Miniero
<script>
16
        $(function() {
17
                $(".navbar-static-top").load("navbar.html", function() {
18
                        $(".navbar-static-top li.dropdown").addClass("active");
19
                        $(".navbar-static-top a[href='screensharingtest.html']").parent().addClass("active");
20
                });
21
                $(".footer").load("footer.html");
22
        });
23
</script>
24 cfd5c0d6 meetecho
<link rel="stylesheet" href="css/cerulean/bootstrap.css" type="text/css"/>
25
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
26 6d795273 Lorenzo Miniero
<link rel="stylesheet" href="css/font-awesome.css" type="text/css"/>
27 4b12fd8e meetecho
</head>
28 cfd5c0d6 meetecho
<body>
29
30 ddc1f702 meetecho
<a href="https://github.com/meetecho/janus-gateway"><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>
31 cfd5c0d6 meetecho
32
<nav class="navbar navbar-default navbar-static-top">
33
</nav>
34
35
<div class="container">
36
        <div class="row">
37
                <div class="col-md-12">
38
                        <div class="page-header">
39
                                <h1>Plugin Demo: Screen Sharing
40 4b870f32 meetecho
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
41 cfd5c0d6 meetecho
                                </h1>
42
                        </div>
43
                        <div class="container" id="details">
44
                                <div class="row">
45
                                        <div class="col-md-12">
46
                                                <h3>Demo details</h3>
47 bf3aebf3 Lorenzo Miniero
                                                <p>This demo, as the Video Conferencing one, makes use of the Video Room plugin. Unlike
48 cfd5c0d6 meetecho
                                                the video conferencing scenario, though, this demo implements a webinar kind of scenario:
49
                                                that is, it allows a single user to share their screen with a set of passive
50
                                                viewers.</p>
51
                                                <p>When started, the demo asks you whether you want to be the one sharing the screen
52 e326e9b9 meetecho
                                                (or an application you're using, if your browser version is recent enough)
53
                                                or a viewer to an existing session. When sharing your screen/application, an ID will be returned
54 cfd5c0d6 meetecho
                                                that you'll be able to share with other people to act as viewers. Just notice that,
55
                                                for the sake of simplicity, just the screen is shared, without any additional audio
56
                                                and video feed: you may want to try and add those yourself to the demo, by relying,
57
                                                for instance, on the AudioBridge plugin for the purpose.</p>
58 e326e9b9 meetecho
                                                <div class="alert alert-info"><b>Note well!</b> Sharing your screen is an experimental
59
                                                feature in WebRTC, and only works if the browser you're using meets particular requirements.
60
                                                If you're using a recent version of Chrome (34+), you'll need to install
61
                                                <b><a href="https://chrome.google.com/webstore/detail/janus-webrtc-screensharin/hapfgfdkleiggjjpfpenajgdnfckjpaj">this extension</a></b>.
62
                                                If you're using an older verson of Chrome, instead, you'll need to manually enable the Chrome flag
63
                                                <b><a href="chrome://flags/#enable-usermedia-screen-capture">chrome://flags/#enable-usermedia-screen-capture</a></b>
64
                                                or otherwise you'll get a permission error. Besides, please beware that some versions of Chrome may only
65 6cf321c6 meetecho
                                                support the feature if you explicitly pass the <code>--enable-usermedia-screen-capturing</code>
66 e326e9b9 meetecho
                                                parameter on the command line. Finally, active screen/application sharing will only work from
67
                                                Firefox if you have at least version 33 installed: if so, make sure you also manually enable
68
                                                the <code>media.getusermedia.screensharing.enabled</code> setting in
69
                                                <b><a href="about:config">about:config</a></b>, and that the domain this web application is from
70
                                                is listed in <code>media.getusermedia.screensharing.allowed_domains</code>.</div>
71 3a26e009 meetecho
                                                <div class="alert alert-info"><b>Note well (part 2)!</b> If you want to share your screen, you'll need to open
72 cfd5c0d6 meetecho
                                                the <b>HTTPS</b> version of this page. If the gateway is not behind the same webserver
73
                                                as the pages that are served (that is, you didn't configure a proxying of HTTP requests
74
                                                to the gateway via a web frontend, e.g., Apache HTTPD), make sure you started it
75
                                                with HTTPS support as well, since for security reasons you cannot contact an HTTP
76
                                                backend if the page has been served via HTTPS. Besides, if you configured the gateway
77
                                                to make use of self-signed certificates, try and open a generic link served by Janus
78
                                                in the browser itself, or otherwise AJAX requests to it will fail due to the unsafe
79
                                                nature of the certificate.</div>
80
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
81
                                        </div>
82
                                </div>
83
                        </div>
84
                        <div class="container hide" id="screenmenu">
85
                                <div class="row">
86
                                        <div class="input-group margin-bottom-md hide" id="createnow">
87
                                                <span class="input-group-addon"><i class="fa fa-users fa-1"></i></span>
88 7c527257 meetecho
                                                <input class="form-control" type="text" placeholder="Insert a title for the session" autocomplete="off" id="desc" onkeypress="return checkEnterShare(this, event);"></input>
89 cfd5c0d6 meetecho
                                                <span class="input-group-btn">
90 7c527257 meetecho
                                                        <button class="btn btn-success" autocomplete="off" id="create">Share your screen</button>
91 cfd5c0d6 meetecho
                                                </span>
92
                                        </div>
93
                                </div>
94
                                <div class="divider col-md-12">
95
                                        <hr class="pull-left"/>or<hr class="pull-right"/>
96
                                </div>
97
                                <div class="row">
98
                                        <div class="input-group margin-bottom-md hide" id="joinnow">
99
                                                <span class="input-group-addon"><i class="fa fa-play-circle-o fa-1"></i></span>
100 7c527257 meetecho
                                                <input class="form-control" type="text" placeholder="Insert the numeric session identifier" autocomplete="off" id="roomid" onkeypress="return checkEnterJoin(this, event);"></input>
101 cfd5c0d6 meetecho
                                                <span class="input-group-btn">
102 7c527257 meetecho
                                                        <button class="btn btn-success" autocomplete="off" id="join">Join an existing session</button>
103 cfd5c0d6 meetecho
                                                </span>
104
                                        </div>
105
                                </div>
106
                        </div>
107
                        <div class="container hide" id="room">
108
                                <div class="row">
109
                                        <div class="col-md-12">
110
                                                <div class="panel panel-default">
111
                                                        <div class="panel-heading">
112
                                                                <h3 class="panel-title">Screen Capture <span class="label label-info" id="title"></span> <span class="label label-success" id="session"></span></h3>
113
                                                        </div>
114
                                                        <div class="panel-body" id="screencapture"></div>
115
                                                </div>
116
                                        </div>
117
                                </div>
118
                        </div>
119
                </div>
120
        </div>
121
122
        <hr>
123
        <div class="footer">
124
        </div>
125
</div>
126
127
</body>
128
</html>