Statistics
| Branch: | Revision:

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

History | View | Annotate | Download (6.05 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: Video Room 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="videoroomtest.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='videoroomtest.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"/>
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: Video Room
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 demo is an example of how you can use the Video Room plugin to
49
                                                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
                                                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
                                                <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
                        <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
                                                        <input autocomplete="off" class="form-control" autocomplete="off" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);"></input>
72
                                                        <span class="input-group-btn">
73
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
74
                                                        </span>
75
                                                </div>
76
                                        </div>
77
                                </div>
78
                        </div>
79
                        <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
                                                                <h3 class="panel-title">Local Video <span class="label label-primary hide" id="publisher"></span></h3>
85
                                                        </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
                                                        <div class="panel-body relative" id="videoremote1"></div>
95
                                                </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
                                                        <div class="panel-body relative" id="videoremote2"></div>
103
                                                </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
                                                        <div class="panel-body relative" id="videoremote3"></div>
113
                                                </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
                                                        <div class="panel-body relative" id="videoremote4"></div>
121
                                                </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
                                                        <div class="panel-body relative" id="videoremote5"></div>
129
                                                </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>