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
|
<!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): Web Audio Processing</title>
<script type="text/javascript" src="javascript/webrtc-adapter/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="javascript/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="javascript/spin.js/spin.min.js"></script>
<script type="text/javascript" src="javascript/toastr/toastr.min.js"></script>
<script type="text/javascript" src="settings.js" ></script>
<script type="text/javascript" src="javascript/janus-gateway/janus.min.js" ></script>
<script type="text/javascript" src="webaudio.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='webaudio.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="javascript/toastr/toastr.min.css" type="text/css"/>
</head>
<body>
<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: Web Audio Processing
<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 how you can use the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>
to manipulate the audio from the microphone, before sending it to Janus,
using some dynamic controls to tweak the output. The remote audio, echoed
back by Janus, is also processed via Web Audio and rendered visually.</p>
<p>Notice that this is just a basic example, and is not meant as a
comprehensive tutorial on how to use Web Audio, but only as a simple
indication of how they can indeed be used with Janus WebRTC streams.</p>
<p>Also notice that this demo does not negotiates video for the sake of
simplicity, in order to only focus on audio controls and visualization.</p>
<p>Press the <code>Start</code> button above to launch the demo.</p>
</div>
</div>
</div>
<div class="container hide" id="demo">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Local Stream (compressor)</h3>
</div>
<div class="panel-body">
<div class="input-group margin-bottom-sm" style="width: 100%;">
<label for="threshold">Threshold</label>
<input type="text" class="form-control" id="threshold" name="threshold" placeholder="Threshold" value="" onkeypress="return checkEnter(event);" disabled></input>
</div>
<div class="input-group margin-bottom-sm" style="width: 100%;">
<label for="knee">Knee</label>
<input type="text" class="form-control" id="knee" name="knee" placeholder="Knee" value="" onkeypress="return checkEnter(event);" disabled></input>
</div>
<div class="input-group margin-bottom-sm" style="width: 100%;">
<label for="ratio">Ratio</label>
<input type="text" class="form-control" id="ratio" name="ratio" placeholder="Ratio" value="" onkeypress="return checkEnter(event);" disabled></input>
</div>
<div class="input-group margin-bottom-sm" style="width: 100%;">
<label for="attack">Attack</label>
<input type="text" class="form-control" id="attack" name="attack" placeholder="Attack" value="" onkeypress="return checkEnter(event);" disabled></input>
</div>
<div class="input-group margin-bottom-sm" style="width: 100%;">
<label for="attack">Release</label>
<input type="text" class="form-control" id="release" name="release" placeholder="Release" value="" onkeypress="return checkEnter(event);" disabled></input>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Stream (visualizer)</h3>
</div>
<div class="panel-body" id="remote">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="footer">
</div>
</div>
</body>
</html>
|
