-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added support for multichannel Opus audio (surround) (#2059)
- Loading branch information
Showing
15 changed files
with
801 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
<!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 Server: Multichannel Opus (surround)</title> | ||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js" ></script> | ||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> | ||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script> | ||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/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="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/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="multiopus.js"></script> | ||
<script> | ||
$(function() { | ||
$(".navbar-static-top").load("navbar.html", function() { | ||
$(".navbar-static-top li.dropdown").addClass("active"); | ||
$(".navbar-static-top a[href='multiopus.html']").parent().addClass("active"); | ||
}); | ||
$(".footer").load("footer.html"); | ||
}); | ||
</script> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/> | ||
<link rel="stylesheet" href="css/demo.css" type="text/css"/> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/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: Multichannel Opus (surround) | ||
<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 is a variant of the Echo Test demo meant to showcase the support | ||
for multichannel Opus, and so surround audio: everything is exactly | ||
the same in term of available controls, features, and the like, with | ||
the substantial difference that the media being captured and sent does | ||
not come from webcam and microphone, but from a pre-recorded surround | ||
file instead. More precisely, we downloaded a surround demo video from | ||
<a target="_blank" href="https://www2.iis.fraunhofer.de/AAC/multichannel.html">Fraunhofer's multichannel tests</a> | ||
and, using <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream">captureStream</a> | ||
on the video element, get access to the MediaStream to send via WebRTC. | ||
As a result, a surround audio/video stream is sent to the EchoTest plugin | ||
via WebRTC, which echoes it back, allowing you to demonstrate how the surround | ||
properties are preserved through the PeerConnection journey via Janus. | ||
The file will loop back to the beginning when it ends, since it's quite short.</p> | ||
<p>Notice that you'll need a recent version of Chrome for this to work, since | ||
it's only implemented there and not really available publicly. As a matter of | ||
fact, Chrome will by default not offer multiopus support by default, and will | ||
even reject it when offered: it's up to you to munge the SDP to force multiopus | ||
support for a conversation. The <code>janus.js</code> library will <b>NOT</b> | ||
do it for you: this demo uses the <code>customizeSdp</code> callback to mess | ||
with the SDP in an ugly way. In other contexts (e.g., VideoRoom subscribers) | ||
you'll need to do something similar when creating the answer instead.</p> | ||
<p>Press the <code>Start</code> button above to launch the demo.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="container hide" id="videos"> | ||
<div class="row"> | ||
<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 id="bitrateset" autocomplete="off" 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" autocomplete="off" id="datasend" onkeypress="return checkEnter(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-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> |
Oops, something went wrong.