landocss Ответов: 1

Как добавить аудио в мой экранный диктофон?


Я делаю экранный рекордер с ванильным Javascript. Вот этот код:

const start = document.getElementById("start");
const stop = document.getElementById("stop");
const video = document.querySelector("video");
let recorder, stream;

async function startRecording() {
  stream = await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: "screen" }
  }); 

  recorder = new MediaRecorder(stream);

  const chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.onstop = e => {
     let link = document.createElement('a');
     const myValue = prompt("filename:", ".webm");
     link.download = myValue;
    const completeBlob = new Blob(chunks, { type: chunks[0].type });
    video.src = URL.createObjectURL(completeBlob);
     link.href = URL.createObjectURL(completeBlob);
     link.click();
URL.revokeObjectURL(link.href);
   
    
  };

  recorder.start();
}

start.addEventListener("click", () => {
  start.setAttribute("disabled", true);
  stop.removeAttribute("disabled");

  startRecording();
});

stop.addEventListener("click", () => {
  stop.setAttribute("disabled", true);
  start.removeAttribute("disabled");

  recorder.stop();
  stream.getVideoTracks()[0].stop();
 

});

Прямо сейчас он просто записывает и загружает веб-видео, но там нет аудио, так как бы я это добавил?

Что я уже пробовал:

Я попробовал использовать:
async function startRecording() {
  stream = await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: "screen" },
    audio: true
  }); 

Но это не сработало. Пожалуйста помочь.

1 Ответов

Рейтинг:
2

Sandeep Mewara

Для аудио попробуйте:

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true
});

Ссылка: Запись экрана в 10 строках Vanilla JS - DEV[^]


landocss

Я знал это, но могу ли я сделать и то, и другое?

Sandeep Mewara

вместе, похоже, что в настоящее время он доступен только в chrome и edge. только не ФФ. Убедитесь, что то, что вы пытаетесь сделать, доступно в соответствии с поддержкой браузера:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

Смотрите это: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

landocss

Я использую chrome.

Sandeep Mewara

Согласно документации, это прямой синтаксис, как общий, и он должен работать. Я бы предложил повторить попытку, следуя примерам documentatin, чтобы понять, почему это не работает для вас. Это возможно, как описано выше.

landocss

Все, что он делает, это записывает звук. Ты сказал, что это сделал. Но это не так.