forked from meetecho/janus-gateway
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvirtualbg.html
122 lines (117 loc) · 5.79 KB
/
virtualbg.html
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
<!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.2.2/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="settings.js" ></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="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">
<div class="btn-group btn-group-xs">
<button id="backgroundset" autocomplete="off" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Background<span class="caret"></span>
</button>
<ul id="background" class="dropdown-menu" role="menu">
<li><a href="#" id="synthwave">Synthwave</a></li>
<li><a href="#" id="office">Office</a></li>
<li><a href="#" id="brickwall">Brick Wall</a></li>
<li><a href="#" id="blur">Blur</a></li>
<li><a href="#" id="none">None</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>