Statistics
| Branch: | Revision:

janus-gateway / html / videoroomtest.html @ e67b71f9

History | View | Annotate | Download (5.53 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 bf3aebf3 Lorenzo Miniero
<title>Janus WebRTC Gateway: Video Room Demo</title>
8 be35facb meetecho
<script type="text/javascript" src="jquery.min.js" ></script>
9
<script type="text/javascript" src="jquery.blockUI.js" ></script>
10
<script type="text/javascript" src="js/bootstrap.js"></script>
11
<script type="text/javascript" src="js/bootbox.min.js"></script>
12
<script type="text/javascript" src="js/spin.min.js"></script>
13
<script type="text/javascript" src="janus.js" ></script>
14 bf3aebf3 Lorenzo Miniero
<script type="text/javascript" src="videoroomtest.js"></script>
15 6d795273 Lorenzo Miniero
<script>
16
        $(function() {
17
                $(".navbar-static-top").load("navbar.html", function() {
18
                        $(".navbar-static-top li.dropdown").addClass("active");
19
                        $(".navbar-static-top a[href='videoroomtest.html']").parent().addClass("active");
20
                });
21
                $(".footer").load("footer.html");
22
        });
23
</script>
24 be35facb meetecho
<link rel="stylesheet" href="css/cerulean/bootstrap.css" type="text/css"/>
25
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
26 6d795273 Lorenzo Miniero
<link rel="stylesheet" href="css/font-awesome.css"/>
27 4b12fd8e meetecho
</head>
28 be35facb meetecho
<body>
29
30 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>
31 be35facb meetecho
32
<nav class="navbar navbar-default navbar-static-top">
33
</nav>
34
35
<div class="container">
36
        <div class="row">
37
                <div class="col-md-12">
38
                        <div class="page-header">
39 bf3aebf3 Lorenzo Miniero
                                <h1>Plugin Demo: Video Room
40 4b870f32 meetecho
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
41 be35facb meetecho
                                </h1>
42
                        </div>
43 cfd5c0d6 meetecho
                        <div class="container" id="details">
44
                                <div class="row">
45
                                        <div class="col-md-12">
46
                                                <h3>Demo details</h3>
47 bf3aebf3 Lorenzo Miniero
                                                <p>This demo is an example of how you can use the Video Room plugin to
48 cfd5c0d6 meetecho
                                                implement a simple videoconferencing application. In particular, this
49
                                                demo page allows you to have up to 6 active participants at the same time:
50 bf3aebf3 Lorenzo Miniero
                                                more participants joining the room will be instead just passive users.
51
                                                No mixing is involved: all media are just relayed in a publisher/subscriber
52
                                                approach. This means that the plugin acts as a SFU (Selective Forwarding Unit)
53
                                                rather than an MCU (Multipoint Control Unit).</p>
54 cfd5c0d6 meetecho
                                                <p>To use the demo, just insert a username to join the default room that
55
                                                is configured. This will add you to the list of participants, and allow
56
                                                you to automatically send your audio/video frames and receive the other
57
                                                participants' feeds. The other participants will appear in separate
58
                                                panels, whose title will be the names they chose when registering at
59
                                                the demo.</p>
60
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
61
                                        </div>
62
                                </div>
63
                        </div>
64 be35facb meetecho
                        <div class="container hide" id="videojoin">
65
                                <div class="row">
66
                                        <span class="label label-info" id="you"></span>
67
                                        <div class="col-md-12" id="controls">
68
                                                <div class="input-group margin-bottom-md hide" id="registernow">
69
                                                        <span class="input-group-addon">@</span>
70 5865a93a meetecho
                                                        <input autocomplete="off" class="form-control" autocomplete="off" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);"></input>
71 be35facb meetecho
                                                        <span class="input-group-btn">
72 7c527257 meetecho
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
73 be35facb meetecho
                                                        </span>
74
                                                </div>
75
                                        </div>
76 cfd5c0d6 meetecho
                                </div>
77
                        </div>
78 be35facb meetecho
                        <div class="container hide" id="videos">
79
                                <div class="row">
80
                                        <div class="col-md-4">
81
                                                <div class="panel panel-default">
82
                                                        <div class="panel-heading">
83 cfd5c0d6 meetecho
                                                                <h3 class="panel-title">Local Video <span class="label label-primary hide" id="publisher"></span></h3>
84 be35facb meetecho
                                                        </div>
85
                                                        <div class="panel-body" id="videolocal"></div>
86
                                                </div>
87
                                        </div>
88
                                        <div class="col-md-4">
89
                                                <div class="panel panel-default">
90
                                                        <div class="panel-heading">
91
                                                                <h3 class="panel-title">Remote Video #1 <span class="label label-info hide" id="remote1"></span></h3>
92
                                                        </div>
93 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote1"></div>
94 be35facb meetecho
                                                </div>
95
                                        </div>
96
                                        <div class="col-md-4">
97
                                                <div class="panel panel-default">
98
                                                        <div class="panel-heading">
99
                                                                <h3 class="panel-title">Remote Video #2 <span class="label label-info hide" id="remote2"></span></h3>
100
                                                        </div>
101 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote2"></div>
102 be35facb meetecho
                                                </div>
103
                                        </div>
104
                                </div>
105
                                <div class="row">
106
                                        <div class="col-md-4">
107
                                                <div class="panel panel-default">
108
                                                        <div class="panel-heading">
109
                                                                <h3 class="panel-title">Remote Video #3 <span class="label label-info hide" id="remote3"></span></h3>
110
                                                        </div>
111 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote3"></div>
112 be35facb meetecho
                                                </div>
113
                                        </div>
114
                                        <div class="col-md-4">
115
                                                <div class="panel panel-default">
116
                                                        <div class="panel-heading">
117
                                                                <h3 class="panel-title">Remote Video #4 <span class="label label-info hide" id="remote4"></span></h3>
118
                                                        </div>
119 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote4"></div>
120 be35facb meetecho
                                                </div>
121
                                        </div>
122
                                        <div class="col-md-4">
123
                                                <div class="panel panel-default">
124
                                                        <div class="panel-heading">
125
                                                                <h3 class="panel-title">Remote Video #5 <span class="label label-info hide" id="remote5"></span></h3>
126
                                                        </div>
127 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote5"></div>
128 be35facb meetecho
                                                </div>
129
                                        </div>
130
                                </div>
131
                        </div>
132
                </div>
133
        </div>
134
135
        <hr>
136
        <div class="footer">
137
        </div>
138
</div>
139
140
</body>
141
</html>