所以我有一个有趣的小项目我正在努力...尝试使用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>