Skip to content

Commit

Permalink
Added support for multichannel Opus audio (surround) (#2059)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lminiero
lminiero committed May 11, 2020
1 parent 0c8c6c0 commit 38322aa
Show file tree
Hide file tree
Showing 15 changed files with 801 additions and 12 deletions.
4 changes: 4 additions & 0 deletions html/demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ <h1>Janus WebRTC Server: Demo Tests</h1>
<td><a href="devicetest.html">Device Selection</a></td>
<td>A variant of the Echo Test demo, that allows you to choose a specific capture device.</td>
</tr>
<tr>
<td><a href="multiopus.html">Multichannel Opus (surround)</a></td>
<td>A variant of the Echo Test demo, that shows multichannel/surround Opus support.</td>
</tr>
<tr>
<td><a href="vp9svctest.html">VP9-SVC Video Room</a></td>
<td>A variant of the Video Room demo, that allows you to test the VP9 SVC layer selection, if available.</td>
Expand Down
131 changes: 131 additions & 0 deletions html/multiopus.html
View file
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>
Loading

0 comments on commit 38322aa

Please sign in to comment.