Statistics
| Branch: | Revision:

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

History | View | Annotate | Download (6.79 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: Echo Test</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="devicetest.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='devicetest.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>Device Selection
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 is a variant of the Echo Test demo: everything is exactly
49
                                                the same in term of available controls, features, and the like, with
50
                                                the substantial difference that you can select which of the available
51
                                                devices (microphones, webcams) you want to use for the media setup.</p>
52
                                                <p>The demo will start by automatically selecting some default devices,
53
                                                pretty much as the regular Echo Test demo already does. Once done,
54
                                                you'll be able to individually change the capture audio and/or video
55
                                                device: this will result in the Echo Test channel being reset and
56
                                                recreated, in order to use the device(s) you selected instead.</p>
57
                                                <p>The feature exploits a functionality made available in the
58
                                                <code>janus.js</code> library, meaning you should be able to
59
                                                easily adapt all the other demos to follow the same approach as
60
                                                well, and that you'll be able to do the same in your Janus-based
61
                                                web application too.</p>
62
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
63
                                        </div>
64
                                </div>
65
                        </div>
66
                        <div class="container">
67
                                <div class="row hide" id="devices">
68
                                        <form class="form-inline">
69
                                                <div class="form-group" style="margin-right: 20px;">
70
                                                        <label for="audio-device">Audio device (input):</label>
71
                                                        <select id="audio-device" class="form-control"></select>
72
                                                </div>
73
                                                <div class="form-group" style="margin-right: 20px;">
74
                                                        <label for="video-device">Video device (input):</label>
75
                                                        <select id="video-device" class="form-control"></select>
76
                                                </div>
77
                                                <div class="form-group">
78
                                                        <div id="change-devices" class="form-control btn btn-primary">Change devices</div>
79
                                                </div>
80
                                        </form>
81
                                        <hr>
82
                                </div>
83
                                 <div class="row hide" id="videos">
84
                                        <div class="col-md-6">
85
                                                <div class="panel panel-default">
86
                                                        <div class="panel-heading">
87
                                                                <h3 class="panel-title">Local Stream
88
                                                                        <div class="btn-group btn-group-xs pull-right hide">
89
                                                                                <button class="btn btn-danger" autocomplete="off" id="toggleaudio">Disable audio</button>
90
                                                                                <button class="btn btn-danger" autocomplete="off" id="togglevideo">Disable video</button>
91
                                                                                <div class="btn-group btn-group-xs">
92
                                                                                        <button id="bitrateset" autocomplete="off" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
93
                                                                                                Bandwidth<span class="caret"></span>
94
                                                                                        </button>
95
                                                                                        <ul id="bitrate" class="dropdown-menu" role="menu">
96
                                                                                                <li><a href="#" id="0">No limit</a></li>
97
                                                                                                <li><a href="#" id="128">Cap to 128kbit</a></li>
98
                                                                                                <li><a href="#" id="256">Cap to 256kbit</a></li>
99
                                                                                                <li><a href="#" id="512">Cap to 512kbit</a></li>
100
                                                                                                <li><a href="#" id="1024">Cap to 1mbit</a></li>
101
                                                                                                <li><a href="#" id="1500">Cap to 1.5mbit</a></li>
102
                                                                                                <li><a href="#" id="2000">Cap to 2mbit</a></li>
103
                                                                                        </ul>
104
                                                                                </div>
105
                                                                        </div>
106
                                                                </h3>
107
                                                        </div>
108
                                                        <div class="panel-body" id="videoleft"></div>
109
                                                </div>
110
                                                <div class="input-group margin-bottom-sm">
111
                                                        <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
112
                                                        <input class="form-control" type="text" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled></input>
113
                                                </div>
114
                                        </div>
115
                                        <div class="col-md-6">
116
                                                <div class="panel panel-default">
117
                                                        <div class="panel-heading">
118
                                                                <h3 class="panel-title">Remote Stream
119
                                                                        <span class="label label-primary hide" id="curres"></span>
120
                                                                        <span class="label label-info hide" id="curbitrate"></span>
121
                                                                        <div class="btn-group btn-group-xs pull-right hide" id="output-devices">
122
                                                                                <div class="btn-group btn-group-xs">
123
                                                                                        <button id="outputdeviceset" autocomplete="off" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
124
                                                                                                Output device<span class="caret"></span>
125
                                                                                        </button>
126
                                                                                        <ul id="audiooutput" class="dropdown-menu" role="menu">
127
                                                                                        </ul>
128
                                                                                </div>
129
                                                                        </div>
130
                                                                </h3>
131
                                                        </div>
132
                                                        <div class="panel-body" id="videoright"></div>
133
                                                </div>
134
                                                <div class="input-group margin-bottom-sm">
135
                                                        <span class="input-group-addon"><i class="fa fa-cloud-download fa-fw"></i></span>
136
                                                        <input class="form-control" type="text" id="datarecv" disabled></input>
137
                                                </div>
138
                                        </div>
139
                                </div>
140
                        </div>
141
                </div>
142
        </div>
143

    
144
        <hr>
145
        <div class="footer">
146
        </div>
147
</div>
148

    
149
</body>
150
</html>