I developed one web-based monitoring system Using js and WebRTC and now I want to develop notification function if the sound goes beyond some level.
I'm taking permission for video and audio and after permission, I want to use the function for sound notification.
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true
})
.then(stream => {
// Display your local video in #localVideo element
localVideo.srcObject = stream;
// Add your stream to be sent to the conneting peer
pc.addStream(stream);
// call function for sound check
}, onError);
I developed one web-based monitoring system Using js and WebRTC and now I want to develop notification function if the sound goes beyond some level.
I'm taking permission for video and audio and after permission, I want to use the function for sound notification.
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true
})
.then(stream => {
// Display your local video in #localVideo element
localVideo.srcObject = stream;
// Add your stream to be sent to the conneting peer
pc.addStream(stream);
// call function for sound check
}, onError);
2 Answers
Reset to default 3You can use this code.
<!DOCTYPE html>
<html>
<head>
<script>
navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
analyser.smoothingTimeConstant = 0.8;
analyser.fftSize = 1024;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
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;
if(Math.round(average)>15)
{
console.log(Math.round(average));
document.getElementById("lvl").innerHTML = Math.round(average)-10;
}
}
})
.catch(function(err) {
/* handle the error */
});
</script>
</head>
<center><p id="lvl" style="font-size:200px"></p><center>
</html>
Copy and make it an HTML file and open it in chrome and make some sound. You will e to know how it's work and if it is the same as you need copy function from the 5th line and make it one separate function and call this function is your code.
Hope it's work for you
Here is an updated snippet that doesn't use onaudioprocess:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><p id="lvl" style="font-size:200px"></p><center>
<script>
navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const microphone = audioContext.createMediaStreamSource(stream);
analyser.smoothingTimeConstant = 0.8;
analyser.fftSize = 1024;
microphone.connect(analyser);
setInterval(() => {
const array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
let sum = 0;
for (let i = 0; i < array.length; i++) {
sum += array[i];
}
const average = sum / array.length;
if (Math.round(average) > 15) {
document.getElementById("lvl").textContent = Math.round(average) - 10;
}
}, 100);
}).catch(function(err) {
console.error('Error accessing microphone: ', err);
});
</script>
</body>
</html>