Statistics
| Branch: | Revision:

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

History | View | Annotate | Download (6.05 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 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 bf3aebf3 Lorenzo Miniero
<script type="text/javascript" src="videoroomtest.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='videoroomtest.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"/>
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: Video Room
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 bf3aebf3 Lorenzo Miniero
                                                <p>This demo is an example of how you can use the Video Room plugin to
49 cfd5c0d6 meetecho
                                                implement a simple videoconferencing application. In particular, this
50
                                                demo page allows you to have up to 6 active participants at the same time:
51 bf3aebf3 Lorenzo Miniero
                                                more participants joining the room will be instead just passive users.
52
                                                No mixing is involved: all media are just relayed in a publisher/subscriber
53
                                                approach. This means that the plugin acts as a SFU (Selective Forwarding Unit)
54
                                                rather than an MCU (Multipoint Control Unit).</p>
55 cfd5c0d6 meetecho
                                                <p>To use the demo, just insert a username to join the default room that
56
                                                is configured. This will add you to the list of participants, and allow
57
                                                you to automatically send your audio/video frames and receive the other
58
                                                participants' feeds. The other participants will appear in separate
59
                                                panels, whose title will be the names they chose when registering at
60
                                                the demo.</p>
61
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
62
                                        </div>
63
                                </div>
64
                        </div>
65 be35facb meetecho
                        <div class="container hide" id="videojoin">
66
                                <div class="row">
67
                                        <span class="label label-info" id="you"></span>
68
                                        <div class="col-md-12" id="controls">
69
                                                <div class="input-group margin-bottom-md hide" id="registernow">
70
                                                        <span class="input-group-addon">@</span>
71 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>
72 be35facb meetecho
                                                        <span class="input-group-btn">
73 7c527257 meetecho
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
74 be35facb meetecho
                                                        </span>
75
                                                </div>
76
                                        </div>
77 cfd5c0d6 meetecho
                                </div>
78
                        </div>
79 be35facb meetecho
                        <div class="container hide" id="videos">
80
                                <div class="row">
81
                                        <div class="col-md-4">
82
                                                <div class="panel panel-default">
83
                                                        <div class="panel-heading">
84 cfd5c0d6 meetecho
                                                                <h3 class="panel-title">Local Video <span class="label label-primary hide" id="publisher"></span></h3>
85 be35facb meetecho
                                                        </div>
86
                                                        <div class="panel-body" id="videolocal"></div>
87
                                                </div>
88
                                        </div>
89
                                        <div class="col-md-4">
90
                                                <div class="panel panel-default">
91
                                                        <div class="panel-heading">
92
                                                                <h3 class="panel-title">Remote Video #1 <span class="label label-info hide" id="remote1"></span></h3>
93
                                                        </div>
94 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote1"></div>
95 be35facb meetecho
                                                </div>
96
                                        </div>
97
                                        <div class="col-md-4">
98
                                                <div class="panel panel-default">
99
                                                        <div class="panel-heading">
100
                                                                <h3 class="panel-title">Remote Video #2 <span class="label label-info hide" id="remote2"></span></h3>
101
                                                        </div>
102 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote2"></div>
103 be35facb meetecho
                                                </div>
104
                                        </div>
105
                                </div>
106
                                <div class="row">
107
                                        <div class="col-md-4">
108
                                                <div class="panel panel-default">
109
                                                        <div class="panel-heading">
110
                                                                <h3 class="panel-title">Remote Video #3 <span class="label label-info hide" id="remote3"></span></h3>
111
                                                        </div>
112 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote3"></div>
113 be35facb meetecho
                                                </div>
114
                                        </div>
115
                                        <div class="col-md-4">
116
                                                <div class="panel panel-default">
117
                                                        <div class="panel-heading">
118
                                                                <h3 class="panel-title">Remote Video #4 <span class="label label-info hide" id="remote4"></span></h3>
119
                                                        </div>
120 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote4"></div>
121 be35facb meetecho
                                                </div>
122
                                        </div>
123
                                        <div class="col-md-4">
124
                                                <div class="panel panel-default">
125
                                                        <div class="panel-heading">
126
                                                                <h3 class="panel-title">Remote Video #5 <span class="label label-info hide" id="remote5"></span></h3>
127
                                                        </div>
128 3a26e009 meetecho
                                                        <div class="panel-body relative" id="videoremote5"></div>
129 be35facb meetecho
                                                </div>
130
                                        </div>
131
                                </div>
132
                        </div>
133
                </div>
134
        </div>
135
136
        <hr>
137
        <div class="footer">
138
        </div>
139
</div>
140
141
</body>
142
</html>