Statistics
| Branch: | Revision:

janus-gateway / html / videocalltest.html @ 70e8fc9c

History | View | Annotate | Download (7.12 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: Video Call 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="videocalltest.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='videocalltest.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
                                <h1>Plugin Demo: Video Call
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>This Video Call demo is basically an example of how you can achieve a
49
                                                scenario like the famous AppRTC demo but with media flowing through Janus. It
50
                                                basically is an extension to the Echo Test demo, where in this case the media
51
                                                packets and statistics are forwarded between the two involved peers.</p>
52
                                                <p>Using the demo is simple. Just choose a simple username to register
53
                                                at the plugin, and then either call another user (provided you know
54
                                                which username was picked) or share your username with a friend and
55
                                                wait for a call. At that point, you'll be in a video call with the
56
                                                remote peer, and you'll have the same controls the Echo Test demo
57
                                                provides to try and control the media: that is, a button to mute/unmute
58
                                                your audio and video, and a knob to try and limit your bandwidth. If
59
                                                the browser supports it, you'll also get a view of the bandwidth
60
                                                currently used by your peer for the video stream.</p>
61 a3d13e20 meetecho
                                                <p>A very simple chat based on Data Channels is available as well:
62
                                                just use the text area under your local video to send messages
63
                                                to your peer. Incoming messages will be displayed below the
64
                                                remote video instead.</p>
65 cfd5c0d6 meetecho
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
66
                                        </div>
67
                                </div>
68
                        </div>
69 be35facb meetecho
                        <div class="container hide" id="videocall">
70
                                <div class="row">
71
                                        <div class="col-md-12">
72
                                                <div class="col-md-6 container hide" id="login">
73
                                                        <div class="input-group margin-bottom-sm">
74
                                                                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
75 8253a129 Pierce Lopez
                                                                <input class="form-control" type="text" placeholder="Choose a username" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
76 be35facb meetecho
                                                        </div>
77 7c527257 meetecho
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="register">Register</button> <span class="hide label label-info" id="youok"></span>
78 be35facb meetecho
                                                </div>
79
                                                <div class="col-md-6 container hide" id="phone">
80
                                                        <div class="input-group margin-bottom-sm">
81
                                                                <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
82 8253a129 Pierce Lopez
                                                                <input class="form-control" type="text" placeholder="Who should we call?" autocomplete="off" id="peer" onkeypress="return checkEnter(this, event);"></input>
83 be35facb meetecho
                                                        </div>
84 7c527257 meetecho
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button>
85 be35facb meetecho
                                                </div>
86
                                        </div>
87
                                <div/>
88
                                <div id="videos" class="hide">
89
                                        <div class="col-md-6">
90
                                                <div class="panel panel-default">
91
                                                        <div class="panel-heading">
92 8878e296 meetecho
                                                                <h3 class="panel-title">Local Stream
93 be35facb meetecho
                                                                        <div class="btn-group btn-group-xs pull-right hide">
94 7c527257 meetecho
                                                                                <button class="btn btn-danger" autocomplete="off" id="toggleaudio">Disable audio</button>
95
                                                                                <button class="btn btn-danger" autocomplete="off" id="togglevideo">Disable video</button>
96 be35facb meetecho
                                                                                <div class="btn-group btn-group-xs">
97 7c527257 meetecho
                                                                                        <button autocomplete="off" id="bitrateset" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
98 be35facb meetecho
                                                                                                Bandwidth<span class="caret"></span>
99
                                                                                        </button>
100
                                                                                        <ul id="bitrate" class="dropdown-menu" role="menu">
101
                                                                                                <li><a href="#" id="0">No limit</a></li>
102
                                                                                                <li><a href="#" id="128">Cap to 128kbit</a></li>
103
                                                                                                <li><a href="#" id="256">Cap to 256kbit</a></li>
104
                                                                                                <li><a href="#" id="512">Cap to 512kbit</a></li>
105
                                                                                                <li><a href="#" id="1024">Cap to 1mbit</a></li>
106
                                                                                                <li><a href="#" id="1500">Cap to 1.5mbit</a></li>
107
                                                                                                <li><a href="#" id="2000">Cap to 2mbit</a></li>
108
                                                                                        </ul>
109
                                                                                </div>
110
                                                                        </div>
111
                                                                </h3>
112
                                                        </div>
113
                                                        <div class="panel-body" id="videoleft"></div>
114
                                                </div>
115 a3d13e20 meetecho
                                                <div class="input-group margin-bottom-sm">
116
                                                        <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
117 7c527257 meetecho
                                                        <input class="form-control" type="text" placeholder="Write a DataChannel message to your peer" autocomplete="off" id="datasend" onkeypress="return checkEnter(this, event);" disabled></input>
118 a3d13e20 meetecho
                                                </div>
119 be35facb meetecho
                                        </div>
120
                                        <div class="col-md-6">
121
                                                <div class="panel panel-default">
122
                                                        <div class="panel-heading">
123 8878e296 meetecho
                                                                <h3 class="panel-title">Remote Stream <span class="label label-info hide" id="callee"></span> <span class="label label-primary hide" id="curres"></span> <span class="label label-info hide" id="curbitrate"></span></h3>
124 be35facb meetecho
                                                        </div>
125
                                                        <div class="panel-body" id="videoright"></div>
126
                                                </div>
127 a3d13e20 meetecho
                                                <div class="input-group margin-bottom-sm">
128
                                                        <span class="input-group-addon"><i class="fa fa-cloud-download fa-fw"></i></span>
129
                                                        <input class="form-control" type="text" id="datarecv" disabled></input>
130
                                                </div>
131 be35facb meetecho
                                        </div>
132
                                </div>
133
                        </div>
134
                </div>
135
        </div>
136
137
        <hr>
138
        <div class="footer">
139
        </div>
140
</div>
141
142
</body>
143
</html>