Statistics
| Branch: | Revision:

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

History | View | Annotate | Download (7.12 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 Call 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="videocalltest.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='videocalltest.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: Video Call
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 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
                                                <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
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
66
                                        </div>
67
                                </div>
68
                        </div>
69
                        <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
                                                                <input class="form-control" type="text" placeholder="Choose a username" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
76
                                                        </div>
77
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="register">Register</button> <span class="hide label label-info" id="youok"></span>
78
                                                </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
                                                                <input class="form-control" type="text" placeholder="Who should we call?" autocomplete="off" id="peer" onkeypress="return checkEnter(this, event);"></input>
83
                                                        </div>
84
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button>
85
                                                </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
                                                                <h3 class="panel-title">Local Stream
93
                                                                        <div class="btn-group btn-group-xs pull-right hide">
94
                                                                                <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
                                                                                <div class="btn-group btn-group-xs">
97
                                                                                        <button autocomplete="off" id="bitrateset" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
98
                                                                                                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
                                                <div class="input-group margin-bottom-sm">
116
                                                        <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
117
                                                        <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
                                                </div>
119
                                        </div>
120
                                        <div class="col-md-6">
121
                                                <div class="panel panel-default">
122
                                                        <div class="panel-heading">
123
                                                                <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
                                                        </div>
125
                                                        <div class="panel-body" id="videoright"></div>
126
                                                </div>
127
                                                <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
                                        </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>