A simple script to show how to request access to, then access a microphone device and also play back the audio stream to debug it. A useful starting point for making an experience revolving around microphone access.
import { Behaviour } from "@needle-tools/engine";
export class Microphone extends Behaviour {
start() {
this.getLocalStream();
}
public el: Element;
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;
}
getLocalStream() {
navigator.mediaDevices
.getUserMedia({
video: false,
audio: true,
})
.then((stream) => {
var doesnotexist = !this.el;
this.el = this.attachStream(stream, this.el, {
audio: true,
autoplay: true,
});
if (doesnotexist) document.body.appendChild(this.el);
})
.catch((err) => {
console.log("u got an error:" + err);
});
}
}