Skip to content

Commit

Permalink
Added new demos: WebAudio and Virtual Backgrounds (#2941)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lminiero
lminiero authored Apr 11, 2022
1 parent 115f285 commit 48aac05
Show file tree
Hide file tree
Showing 7 changed files with 1,330 additions and 0 deletions.
Binary file added html/background/retro.webp
View file
Binary file not shown.
8 changes: 8 additions & 0 deletions html/demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,14 @@ <h1>Janus WebRTC Server: Demo Tests</h1>
<td><a href="canvas.html">Canvas Capture</a></td>
<td>A variant of the Echo Test demo, that shows how to use a canvas element as a WebRTC media source.</td>
</tr>
<tr>
<td><a href="webaudio.html">Web Audio Processing</a></td>
<td>A variant of the Echo Test demo, that shows how to use Web Audio to process audio before sending it to Janus.</td>
</tr>
<tr>
<td><a href="virtualbg.html">Virtual Background</a></td>
<td>A variant of the Echo Test demo, that shows how to use something like MediaPipe to add a virtual background before sending video to Janus.</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
2 changes: 2 additions & 0 deletions html/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@
<li><a href="e2etest.html">End-to-end Encryption</a></li>
<li><a href="multiopus.html">Multichannel Opus (surround)</a></li>
<li><a href="canvas.html">Canvas Capture</a></li>
<li><a href="webaudio.html">Web Audio Processing</a></li>
<li><a href="virtualbg.html">Virtual Background</a></li>
<li><a href="vp9svctest.html">VP9-SVC Video Room</a></li>
<li class="divider"></li>
<li><a href="admin.html">Admin/Monitor</a></li>
Expand Down
125 changes: 125 additions & 0 deletions html/virtualbg.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!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 (multistream): Virtual Background</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.1/adapter.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/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.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.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.4/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="janus.js" ></script>
<script type="text/javascript" src="virtualbg.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='virtualbg.html']").parent().addClass("active");
});
$(".footer").load("footer.html");
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/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.7.0/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.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: Virtual Background
<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 and Canvas demos meant to
showcase how you can use libraries like
<a href="https://google.github.io/mediapipe/" target="_blank">MediaPipe</a>
to add a virtual background to your webcam capture before sending it
to Janus: everything is exactly the same in term of available controls,
features, and the like, with the substantial difference that we'll
play a bit with what we'll send on the video stream.</p>
<p>More precisely, the demo captures the webcam feed via a
<code>getUserMedia</code> call, and then will make use of MediaPipe
to segment the video and replace the background by drawing on a
<code>canvas</code> element. The <code>canvas</code> element is then used
as the actual source of media for our PeerConnection, which means the
video we get back from the EchoTest plugin should reflect the
tweaks we've made on the stream.</p>
<p>Notice that this is a very naive implementation, which is heavily
based on the <a href="https://google.github.io/mediapipe/solutions/selfie_segmentation.html" target="_blank">example</a>
from the MediaPipe Selfie Segmentation documentation.</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" id="self">
<div class="row">
<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">
<video class="rounded centered hide" id="myvideo" width="100%" height="100%" muted="muted"></video>
<canvas id="canvas" class="hide" width="640" height="480" style="display: block; margin: auto; padding: 0"></canvas>
</div>
</div>
</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>
</div>
</div>
</div>
</div>

<hr>
<div class="footer">
</div>
</div>

</body>
</html>
Loading

0 comments on commit 48aac05

Please sign in to comment.