Statistics
| Branch: | Revision:

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

History | View | Annotate | Download (6.79 KB)

1 3d95072f Lorenzo Miniero
<!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 2c7dab14 joshdickson40
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.4.3/adapter.min.js" ></script>
9 5ca69d0d Lorenzo Miniero
<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 3d95072f Lorenzo Miniero
<script type="text/javascript" src="janus.js" ></script>
15
<script type="text/javascript" src="devicetest.js"></script>
16 6d795273 Lorenzo Miniero
<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 5ca69d0d Lorenzo Miniero
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
26 3d95072f Lorenzo Miniero
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
27 5ca69d0d Lorenzo Miniero
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
28 3d95072f Lorenzo Miniero
</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 1f658b58 Lorenzo Miniero
                                                        <label for="audio-device">Audio device (input):</label>
71 3d95072f Lorenzo Miniero
                                                        <select id="audio-device" class="form-control"></select>
72
                                                </div>
73
                                                <div class="form-group" style="margin-right: 20px;">
74 1f658b58 Lorenzo Miniero
                                                        <label for="video-device">Video device (input):</label>
75 3d95072f Lorenzo Miniero
                                                        <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 1f658b58 Lorenzo Miniero
                                                                <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 3d95072f Lorenzo Miniero
                                                        </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>