1

所以我有一个有趣的小项目我正在做...尝试使用 html5 和 websockets 创建一个视频会议应用程序。我可以获取视频和音频，但我似乎无法摆脱反馈。有什么我出错的想法，或者对手头任务的一般建议吗？

"use strict";

var successCallback = function(stream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(stream);
  video.onloadedmetadata = function(e) {
    video.play();
  }

  var audioContext = new AudioContext();
  var microphone = audioContext.createMediaStreamSource(stream);
  var audioAnalyser = audioContext.createAnalyser();
  var audioGain = audioContext.createGain();
  var nyquist = audioContext.sampleRate / 2;

  // audioAnalyser.fftSize = 1024;
  audioAnalyser.smoothingTimeConstant = 0.9;
  audioAnalyser.minDecibels = -60;
  audioGain.gain.value = 0;
  // microphone -> filter -> destination.
  microphone.connect(audioAnalyser);
  audioAnalyser.connect(audioGain);
  audioGain.connect(audioContext.destination);

  var frequencyData = new Uint8Array(audioAnalyser.frequencyBinCount).slice(0, 16);
  var spectrum = document.querySelector('#spectrum');
  var frequencies = [];
  for (let i in frequencyData) {
    frequencies.push(i * audioContext.sampleRate / audioAnalyser.fftSize)
    spectrum.appendChild(document.createElement('DIV'));
  }
  console.log(frequencies)

  var bars = document.querySelectorAll("#spectrum > div");
  var avg = 0;

  function renderFrame() {
    requestAnimationFrame(renderFrame);
    // update data in frequencyData
    audioAnalyser.getByteFrequencyData(frequencyData);
    // render frame based on values in frequencyData
    var sums = 0,
      total = 1;
    for (let i in frequencyData) {
      bars[i].style.height = frequencyData[i] + "px";
      sums += frequencyData[i] * frequencies[i];
      total += frequencyData[i];
      bars[i].style.backgroundColor = "hsl(" + ~~avg + ",60%,70%)";
    }
    avg = sums / total;
  }
  renderFrame();
}

var errorCallback = function(e) {
  if (e.name == 'PermissionDeniedError') {
    console.log('Reeeejected!', e);
  } else if (e.name == 'NotFoundError') {
    video.src = '';
  }
}

var gUM = Modernizr.prefixed('getUserMedia', navigator);
gUM({
  video: true,
  audio: true
}, successCallback, errorCallback);
video {
  transform: rotateY(180deg);
  max-width: 100%;
}
.fullwidth {
  width: 100%
}
#spectrum {
  display: flex;
  width: 100%;
  height: 255px;
  align-items: flex-end;
}
#spectrum > div {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class='fullwidth'>
  <video autoplay></video>
  <div id='spectrum'></div>
</div>

4

0 回答 0