/usr/share/janus/demos/videocalltest.html is in janus-demos 0.2.6-1build2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Janus WebRTC Gateway: Video Call Demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/5.0.1/adapter.min.js" ></script>
<script type="text/javascript" src="javascript/jquery/jquery.min.js" ></script>
<script type="text/javascript" src="javascript/jquery-blockui/jquery.blockUI.js" ></script>
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.0/bootbox.min.js"></script>
<script type="text/javascript" src="javascript/spin.js/spin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<script type="text/javascript" src="janus.js" ></script>
<script type="text/javascript" src="videocalltest.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='videocalltest.html']").parent().addClass("active");
});
$(".footer").load("footer.html");
});
</script>
<link rel="stylesheet" href="javascript/bootswatch/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.css"/>
</head>
<body>
<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>
<nav class="navbar navbar-default navbar-static-top">
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Plugin Demo: Video Call
<button class="btn btn-default" autocomplete="off" id="start">Start</button>
</h1>
</div>
<div class="container" id="details">
<div class="row">
<div class="col-md-12">
<h3>Demo details</h3>
<p>This Video Call demo is basically an example of how you can achieve a
scenario like the famous AppRTC demo but with media flowing through Janus. It
basically is an extension to the Echo Test demo, where in this case the media
packets and statistics are forwarded between the two involved peers.</p>
<p>Using the demo is simple. Just choose a simple username to register
at the plugin, and then either call another user (provided you know
which username was picked) or share your username with a friend and
wait for a call. At that point, you'll be in a video call with the
remote peer, and you'll have the same controls the Echo Test demo
provides to try and control the media: that is, a button to mute/unmute
your audio and video, and a knob to try and limit your bandwidth. If
the browser supports it, you'll also get a view of the bandwidth
currently used by your peer for the video stream.</p>
<p>If you're interested in testing how simulcasting can be used within
the context of this sample videocall application, just pass the
<code>?simulcast=true</code> query string to the url of this page and
reload it. If you're using a browser that does support simulcasting
(Chrome or Firefox) and the call will end up using VP8, you'll
send multiple qualities of the video you're capturing. Notice that
simulcasting will only occur if the browser thinks there is enough
bandwidth, so you'll have to play with the Bandwidth selector to
increase it. New buttons to play with the feature will automatically
appear for your peer; at the same time, if your peer enabled simulcasting
new buttons will appear for you when watching the remote stream. Notice that
no simulcast support is needed for watching, only for publishing.</p>
<p>A very simple chat based on Data Channels is available as well:
just use the text area under your local video to send messages
to your peer. Incoming messages will be displayed below the
remote video instead.</p>
<p>Press the <code>Start</code> button above to launch the demo.</p>
</div>
</div>
</div>
<div class="container hide" id="videocall">
<div class="row">
<div class="col-md-12">
<div class="col-md-6 container hide" id="login">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Choose a username" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
</div>
<button class="btn btn-success margin-bottom-sm" autocomplete="off" id="register">Register</button> <span class="hide label label-info" id="youok"></span>
</div>
<div class="col-md-6 container hide" id="phone">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Who should we call?" autocomplete="off" id="peer" onkeypress="return checkEnter(this, event);"></input>
</div>
<button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button>
</div>
</div>
<div/>
<div id="videos" class="hide">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Local Stream
<div class="btn-group btn-group-xs pull-right hide">
<button class="btn btn-danger" autocomplete="off" id="toggleaudio">Disable audio</button>
<button class="btn btn-danger" autocomplete="off" id="togglevideo">Disable video</button>
<div class="btn-group btn-group-xs">
<button autocomplete="off" id="bitrateset" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Bandwidth<span class="caret"></span>
</button>
<ul id="bitrate" class="dropdown-menu" role="menu">
<li><a href="#" id="0">No limit</a></li>
<li><a href="#" id="128">Cap to 128kbit</a></li>
<li><a href="#" id="256">Cap to 256kbit</a></li>
<li><a href="#" id="512">Cap to 512kbit</a></li>
<li><a href="#" id="1024">Cap to 1mbit</a></li>
<li><a href="#" id="1500">Cap to 1.5mbit</a></li>
<li><a href="#" id="2000">Cap to 2mbit</a></li>
</ul>
</div>
</div>
</h3>
</div>
<div class="panel-body" id="videoleft"></div>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
<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>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<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>
</div>
<div class="panel-body" id="videoright"></div>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-cloud-download fa-fw"></i></span>
<input class="form-control" type="text" id="datarecv" disabled></input>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="footer">
</div>
</div>
</body>
</html>
|