I found Mozilla's Getting browser microphone permission. It defines a function to request permission and listen to client's microphone as such:
function getLocalStream() {
navigator.mediaDevices.getUserMedia({video: false, audio: true}).then( stream => {
window.localStream = stream; // A
window.localAudio.srcObject = stream; // B
window.localAudio.autoplay = true; // C
}).catch( err => {
console.log("u got an error:" + err)
});
}
I checked in Chrome, Firefox and Safari - all of them throw an error about window.localAudio being undefined. Where did this tutorial get it from? Was window.localAudio ever a thing? What was it supposed to do?
I will try to give you something more useful than the question you have asked. The function will create the element if it is not present and there are few options available. In the example I'm adding the newly created audio element to the body, but it will work even it is not added - it's a matter of choice.
<html>
<head>
<script>
var el;
function attachStream(stream, el, options) {
var item;
var URL = window.URL;
var element = el;
var opts = {
autoplay: true,
mirror: false,
muted: false,
audio: false,
disableContextMenu: false
};
if (options) {
for (item in options) {
opts[item] = options[item];
}
}
if (!element) {
element = document.createElement(opts.audio ? 'audio' : 'video');
} else if (element.tagName.toLowerCase() === 'audio') {
opts.audio = true;
}
if (opts.autoplay) element.autoplay = 'autoplay';
if (opts.muted) element.muted = true;
if (!opts.audio && opts.mirror) {
['', 'moz', 'webkit', 'o', 'ms'].forEach(function(prefix) {
var styleName = prefix ? prefix + 'Transform' : 'transform';
element.style[styleName] = 'scaleX(-1)';
});
}
element.srcObject = stream;
return element;
};
function getLocalStream() {
navigator.mediaDevices.getUserMedia({
video: false,
audio: true
}).then(
stream => {
var doesnotexist = !el;
el = attachStream(stream, el, {
audio: true,
autoplay: true
});
if (doesnotexist) document.body.appendChild(el);
}
).catch(err => {
console.log("u got an error:" + err)
});
}
window.addEventListener('DOMContentLoaded', (event) => {
getLocalStream();
});
</script>
</head>
<body>
</body>
</html>