CODEWITHSUNDEEP
javascriptweb-mediarecorder
Alex Gogl
Alex Gogl

Reputation: 719

Web MediaRecorder API cannot record audio and video simultaneously

I've been trying to record video and audio with the MediaRecorder API but it will only let me record my screen without audio. Do I need to have two separate streams and merge them into one? But why would it be possible to set { audio: true, video: true } in the navigator.mediaDevices.getDisplayMedia() method in this case?

This is my code: 

async function startRecording() {
  let mimeType = "video/webm;codecs=vp9";

  try {
    const mediaDevices = navigator.mediaDevices as any;
    const stream = await mediaDevices.getDisplayMedia({
      audio: true,
      video: true,
    });

    const options = {
      mimeType: mimeType,
      bitsPerSecond: 500000,
    };

    let recorder = new MediaRecorder(stream, options);

    const chunks = [];
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) {
        chunks.push(e.data);
      } else {
        console.log("no data to push");
      }
    };

    recorder.onstop = (e) => {
      const completeBlob = new Blob(chunks, {
        type: chunks[0].type
      });
      stream.getTracks().forEach((track) => {
        track.stop();
        console.log(track);
      });

      setVideoData({
        recorded: true,
        localVideoURL: URL.createObjectURL(completeBlob),
        blob: completeBlob,
      });
    };

    recorder.start();

  } catch (error) {
    console.log(error);
  }
}

Any pointers greatly appreciated.

Upvotes: 2

Views: 1470

Answers (1)

Brad
Brad

Reputation: 163468

Most browsers don't support capturing audio with display media. Even in Chrome and Chromium variants, capture support depends on the OS.

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility

Upvotes: 1

Related Questions