WebRTC/getUserMedia - Включенный микрофон глушит видео
Стандартный WebRTC - JS Записывает видео на сервер при нажатии на кнопку "Старт", заканчивает по кнопке "стоп".
const URL = 'voi';
var gumVideo = document.querySelector('video#gum');
gumVideo.setAttribute('autoplay', '');
gumVideo.setAttribute('muted', '');
gumVideo.setAttribute('playsinline', '');
let div = document.createElement('div');
div.id = 'messages';
let start = document.createElement('button');
start.id = 'start';
start.innerHTML = 'Начать запись';
let stop = document.createElement('button');
stop.id = 'stop';
stop.innerHTML = 'Остановить';
document.body.appendChild(div);
document.body.appendChild(start);
document.body.appendChild(stop);
navigator.mediaDevices.getUserMedia({ audio: {
channelCount: 1,
sampleRate: 16000,
sampleSize: 16,
volume: 1
},
video: {width: 640, height: 480 },video: { frameRate: { ideal: 15, max: 20 } }})
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
document.querySelector('#start').addEventListener('click', function(){
mediaRecorder.start();
});
gumVideo.srcObject = stream;
let audioChunks = [];
mediaRecorder.addEventListener("dataavailable",function(event) {
audioChunks.push(event.data);
});
document.querySelector('#stop').addEventListener('click', function(){
mediaRecorder.stop();
});
mediaRecorder.addEventListener("stop", function() {
const audioBlob = new Blob(audioChunks, {
type: "video/webm"
});
let fd = new FormData();
fd.append('voice', audioBlob);
sendVoice(fd);
audioChunks = [];
});
});
async function sendVoice(form) {
let promise = await fetch(URL, {
method: 'POST',
body: form});
if (promise.ok) {
let response = await promise.json();
console.log(response.data);
audio.src = response.data;
audio.controls = true;
audio.autoplay = true;
document.querySelector('#messages').appendChild(audio);
}
}
Есть проблема на телефонах: На сайте, перед записью воспроизводится видео, но после того как даем доступ к камере и микрофону, звук в воспроизводимом видео - почти полностью заглушается.
Суть я понимаю, причина - работающий микрофон, так как если сделать:
navigator.mediaDevices.getUserMedia({ audio: false
Проблема уходит. Но мне нужен аудио поток для записи.
Нужно: чтобы не глушилось видео после того, как дали доступ к Микрофону и Камере.
P.S. В онлайн-чатах с телефона подобной проблемы нет, звук нормальный не смотря на то, что предоставлен доступ к микрофону.