Statistics
| Branch: | Revision:

janus-gateway / html / audiobridgetest.html @ 1f44763c

History | View | Annotate | Download (4.71 KB)

1 be35facb 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: Audio Bridge Demo</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 be35facb meetecho
<script type="text/javascript" src="janus.js" ></script>
15
<script type="text/javascript" src="audiobridgetest.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='audiobridgetest.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 be35facb meetecho
<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 4b12fd8e meetecho
</head>
29 be35facb meetecho
<body>
30
31 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>
32 be35facb meetecho
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 bf3aebf3 Lorenzo Miniero
                                <h1>Plugin Demo: Audio Room (mixed)
41 4b870f32 meetecho
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
42 be35facb meetecho
                                </h1>
43
                        </div>
44 cfd5c0d6 meetecho
                        <div class="container" id="details">
45
                                <div class="row">
46
                                        <div class="col-md-12">
47
                                                <h3>Demo details</h3>
48
                                                <p>The Audio Bridge demo is a simple example of how to implement
49
                                                an audio conferencing application through Janus. Since it makes use
50
                                                of the AudioBridge plugin, all the audio contributions will be mixed,
51
                                                which means that a single PeerConnection will be created no matter
52
                                                how many participants will join the room.</p>
53
                                                <p>To try the demo, just insert a username to join the default audio
54
                                                room that is configured. This will add you to the mixed audio conference.
55
                                                A container on the left will display a list of the other participants
56
                                                in the room as they join, with a simple indicator to inform you whether
57
                                                they're muted or not. You can mute/unmute yourself using the icon that
58
                                                will appear next to your name.</p>
59
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
60
                                        </div>
61
                                </div>
62
                        </div>
63 be35facb meetecho
                        <div class="container hide" id="audiojoin">
64
                                <div class="row">
65
                                        <span class="label label-info" id="you"></span>
66
                                        <div class="col-md-12" id="controls">
67
                                                <div class="input-group margin-bottom-md hide" id="registernow">
68
                                                        <span class="input-group-addon">@</span>
69 7c527257 meetecho
                                                        <input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
70 be35facb meetecho
                                                        <span class="input-group-btn">
71 7c527257 meetecho
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
72 be35facb meetecho
                                                        </span>
73
                                                </div>
74
                                        </div>
75 cfd5c0d6 meetecho
                                </div>
76 be35facb meetecho
                        </div>
77
                        <div class="container hide" id="room">
78
                                <div class="row">
79
                                        <div class="col-md-6">
80
                                                <div class="panel panel-default">
81
                                                        <div class="panel-heading">
82 7c527257 meetecho
                                                                <h3 class="panel-title">Participants <span class="label label-info hide" id="participant"></span>
83
                                                                <button class="btn-xs btn-danger hide pull-right" autocomplete="off" id="toggleaudio">Mute</button></h3>
84 be35facb meetecho
                                                        </div>
85
                                                        <div class="panel-body">
86
                                                                <ul id="list" class="list-group">
87
                                                                </ul>
88
                                                        </div>
89
                                                </div>
90
                                        </div>
91
                                        <div class="col-md-6">
92
                                                <div class="panel panel-default">
93
                                                        <div class="panel-heading">
94
                                                                <h3 class="panel-title">Mixed Audio</span></h3>
95
                                                        </div>
96
                                                        <div class="panel-body" id="mixedaudio"></div>
97
                                                </div>
98
                                        </div>
99
                                </div>
100
                        </div>
101
                </div>
102
        </div>
103
104
        <hr>
105
        <div class="footer">
106
        </div>
107
</div>
108
109
</body>
110
</html>