Overview

ROBYER1

View on Github

Microphone access in a browser window (and streamed playback)

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);
      });
  }
}