我想要一些关于如何最好地MediaStreamTrack
在 Chrome/Canary 中获取音频 javascript 对象的麦克风活动级别的建议。该对象是返回的MediaStreamTrack
音轨,作为 WebRTC javascript API 的一部分。MediaStream
getUserMedia
问问题
12112 次
3 回答
22
当麦克风有音频时,绿色条上下非常好:
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true, video:true}, function(stream){
// audioContext = new webkitAudioContext(); deprecated OLD!!
audioContext = new AudioContext(); // NEW!!
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createJavaScriptNode(2048, 1, 1);
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
//canvasContext = $("#canvas")[0].getContext("2d");
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
canvasContext.clearRect(0, 0, 60, 130);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,130);
}
}
);
</script>
<canvas id="test" style="background-color: black;"></canvas>
于 2014-03-20T07:55:25.290 回答
6
您正在寻找的是webkitAudioContext
和它的createMediaStreamSource
方法。
这是一个绘制绿色条以充当 VU 表的代码示例:
navigator.webkitGetUserMedia({audio:true, video:true}, function(stream){
audioContext = new webkitAudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createJavaScriptNode(2048, 1, 1);
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
canvasContext = $("#canvas")[0].getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
canvasContext.clearRect(0, 0, 60, 130);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,130);
}
}
于 2013-08-15T15:14:18.007 回答
5
更新:修改代码使用:
navigator.mediaDevices.getUserMedia(constraints).then(
function(stream){
// code ...
}).catch(function(err) {
// code ...
});
于 2014-12-06T06:14:54.570 回答