Statistics
| Branch: | Revision:

janus-gateway / html / screensharingtest.html @ 70e8fc9c

History | View | Annotate | Download (7.11 KB)

1
<!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="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.4.3/adapter.min.js" ></script>
9
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
10
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
11
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
12
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.0/bootbox.min.js"></script>
13
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
14
<script type="text/javascript" src="janus.js" ></script>
15
<script type="text/javascript" src="screensharingtest.js"></script>
16
<script>
17
        $(function() {
18
                $(".navbar-static-top").load("navbar.html", function() {
19
                        $(".navbar-static-top li.dropdown").addClass("active");
20
                        $(".navbar-static-top a[href='screensharingtest.html']").parent().addClass("active");
21
                });
22
                $(".footer").load("footer.html");
23
        });
24
</script>
25
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
26
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
27
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
28
</head>
29
<body>
30

    
31
<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>
32

    
33
<nav class="navbar navbar-default navbar-static-top">
34
</nav>
35

    
36
<div class="container">
37
        <div class="row">
38
                <div class="col-md-12">
39
                        <div class="page-header">
40
                                <h1>Plugin Demo: Screen Sharing
41
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
42
                                </h1>
43
                        </div>
44
                        <div class="container" id="details">
45
                                <div class="row">
46
                                        <div class="col-md-12">
47
                                                <h3>Demo details</h3>
48
                                                <p>This demo, as the Video Conferencing one, makes use of the Video Room plugin. Unlike
49
                                                the video conferencing scenario, though, this demo implements a webinar kind of scenario:
50
                                                that is, it allows a single user to share their screen with a set of passive
51
                                                viewers.</p>
52
                                                <p>When started, the demo asks you whether you want to be the one sharing the screen
53
                                                (or an application you're using, if your browser version is recent enough)
54
                                                or a viewer to an existing session. When sharing your screen/application, an ID will be returned
55
                                                that you'll be able to share with other people to act as viewers. Just notice that,
56
                                                for the sake of simplicity, just the screen is shared, without any additional audio
57
                                                and video feed: you may want to try and add those yourself to the demo, by relying,
58
                                                for instance, on the AudioBridge plugin for the purpose.</p>
59
                                                <div class="alert alert-info"><b>Note well!</b> Sharing your screen is an experimental
60
                                                feature in WebRTC, and only works if the browser you're using meets particular requirements.
61
                                                If you're using a recent version of Chrome (34+), you'll need to install
62
                                                <b><a href="https://chrome.google.com/webstore/detail/janus-webrtc-screensharin/hapfgfdkleiggjjpfpenajgdnfckjpaj">this extension</a></b>.
63
                                                If you're using an older verson of Chrome, instead, you'll need to manually enable the Chrome flag
64
                                                <b><a href="chrome://flags/#enable-usermedia-screen-capture">chrome://flags/#enable-usermedia-screen-capture</a></b>
65
                                                or otherwise you'll get a permission error. Besides, please beware that some versions of Chrome may only
66
                                                support the feature if you explicitly pass the <code>--enable-usermedia-screen-capturing</code>
67
                                                parameter on the command line. Finally, active screen/application sharing will only work from
68
                                                Firefox if you have at least version 33 installed: if so, make sure you also manually enable
69
                                                the <code>media.getusermedia.screensharing.enabled</code> setting in
70
                                                <b><a href="about:config">about:config</a></b>, and that the domain this web application is from
71
                                                is listed in <code>media.getusermedia.screensharing.allowed_domains</code>.</div>
72
                                                <div class="alert alert-info"><b>Note well (part 2)!</b> If you want to share your screen, you'll need to open
73
                                                the <b>HTTPS</b> version of this page. If the gateway is not behind the same webserver
74
                                                as the pages that are served (that is, you didn't configure a proxying of HTTP requests
75
                                                to the gateway via a web frontend, e.g., Apache HTTPD), make sure you started it
76
                                                with HTTPS support as well, since for security reasons you cannot contact an HTTP
77
                                                backend if the page has been served via HTTPS. Besides, if you configured the gateway
78
                                                to make use of self-signed certificates, try and open a generic link served by Janus
79
                                                in the browser itself, or otherwise AJAX requests to it will fail due to the unsafe
80
                                                nature of the certificate.</div>
81
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
82
                                        </div>
83
                                </div>
84
                        </div>
85
                        <div class="container hide" id="screenmenu">
86
                                <div class="row">
87
                                        <div class="input-group margin-bottom-md hide" id="createnow">
88
                                                <span class="input-group-addon"><i class="fa fa-users fa-1"></i></span>
89
                                                <input class="form-control" type="text" placeholder="Insert a title for the session" autocomplete="off" id="desc" onkeypress="return checkEnterShare(this, event);"></input>
90
                                                <span class="input-group-btn">
91
                                                        <button class="btn btn-success" autocomplete="off" id="create">Share your screen</button>
92
                                                </span>
93
                                        </div>
94
                                </div>
95
                                <div class="divider col-md-12">
96
                                        <hr class="pull-left"/>or<hr class="pull-right"/>
97
                                </div>
98
                                <div class="row">
99
                                        <div class="input-group margin-bottom-md hide" id="joinnow">
100
                                                <span class="input-group-addon"><i class="fa fa-play-circle-o fa-1"></i></span>
101
                                                <input class="form-control" type="text" placeholder="Insert the numeric session identifier" autocomplete="off" id="roomid" onkeypress="return checkEnterJoin(this, event);"></input>
102
                                                <span class="input-group-btn">
103
                                                        <button class="btn btn-success" autocomplete="off" id="join">Join an existing session</button>
104
                                                </span>
105
                                        </div>
106
                                </div>
107
                        </div>
108
                        <div class="container hide" id="room">
109
                                <div class="row">
110
                                        <div class="col-md-12">
111
                                                <div class="panel panel-default">
112
                                                        <div class="panel-heading">
113
                                                                <h3 class="panel-title">Screen Capture <span class="label label-info" id="title"></span> <span class="label label-success" id="session"></span></h3>
114
                                                        </div>
115
                                                        <div class="panel-body" id="screencapture"></div>
116
                                                </div>
117
                                        </div>
118
                                </div>
119
                        </div>
120
                </div>
121
        </div>
122

    
123
        <hr>
124
        <div class="footer">
125
        </div>
126
</div>
127

    
128
</body>
129
</html>