Microphone activity level of WebRTC MediaStream
12,073
Solution 1
What you are looking for is webkitAudioContext
and its createMediaStreamSource
method.
Here's a code sample that draws green bar to act like a VU meter:
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);
}
}
More details about AudioContext
Solution 2
UPDATE: modified the code using:
navigator.mediaDevices.getUserMedia(constraints).then(
function(stream){
// code ...
}).catch(function(err) {
// code ...
});
Here is a fiddle: https://jsfiddle.net/elshnkhll/p07e5vcq/
Author by
user1710407
Updated on June 15, 2022Comments
-
user1710407 almost 2 years
I would like some advice on how best to get the microphone activity level of an audio
MediaStreamTrack
javascript object in Chrome/Canary. TheMediaStreamTrack
object is an audio track of theMediaStream
returned bygetUserMedia
, as part of the WebRTC javascript API.