WebRTC getUserMedia

An example of a WebRTC getUserMedia implementation

by grano

HTML

<video id="videoLocal" autoplay width=200></video>
<div id="vinfo"></div>
<button onclick="start()">start</button>
<!-- <button onclick="stop()">stop</button> -->

<canvas id='canvas'></canvas>
<!-- <button onclick="test()">Test adapter.js</button> -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

// reference https://github.com/soarflat-sandbox/web-audio/tree/master/docs/demo3
const intervalSec = 0.25;
let analyser, frequency, bufLen;
var videoTag = document.getElementById('videoLocal');

const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

function start() {
  var audioContext = new AudioContext();
  analyser = audioContext.createAnalyser();
  analyser.fftSize = 4096;   
  bufLen = analyser.frequencyBinCount;
  frequency = new Uint8Array(bufLen);
//  frequency = new Float32Array(bufLen);
  console.log('frequency',frequency)
  
  var constraints = {
    audio: true,
//    video: {
//      width: {exact: 1280},
//      height: {exact: 720}
//    }
  };
  navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
      const src = audioContext.createMediaStreamSource(stream);
//      analyser.smoothingTimeConstant = 0

      src.connect(analyser);
//      analyser.connect(audioContext.destination);
     	setInterval(update, intervalSec * 1000);

/*       videoTag.addEventListener("loadedmetadata", function(e) {
        console.log('loadedmetadata');
      });
      videoTag.addEventListener("loadeddata", function(e) {
        console.log('loadeddata');
        update(vinfo, videoTag.videoWidth + " x " + videoTag.videoHeight);
      });
       */
       })
/*     .catch(function(error) {
      if (error.name === 'ConstraintNotSatisfiedError') {
        console.error('The resolution ' + constraints.video.width.exact + 'x' +
          constraints.video.width.exact + ' px is not supported by your device.');
      } else if (error.name === 'PermissionDeniedError') {
        console.error('Permissions have not been granted to use your camera and ' +
          'microphone, you need to allow the page access to your devices in ' +
          'order for the demo to work.');
      } else {
        console.error('getUserMedia error: ' + error.name,...