Statistics
| Branch: | Revision:

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

History | View | Annotate | Download (4.71 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: Audio Bridge 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="audiobridgetest.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='audiobridgetest.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: Audio Room (mixed)
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>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
                        <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
                                                        <input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
70
                                                        <span class="input-group-btn">
71
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
72
                                                        </span>
73
                                                </div>
74
                                        </div>
75
                                </div>
76
                        </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
                                                                <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
                                                        </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>