muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.52k stars 1.75k forks source link

Add Audio Track #708

Open dmaciasaviles opened 3 years ago

dmaciasaviles commented 3 years ago

Hello,

First of all congratulations on the work, it's great.

I have a video conferencing application and I would like to be able to record remote video (video + audio) and local audio in the same file. I have been trying in various ways but I can't (AddStream among others). Can you help me with this?

Thanks a lot

lexbeloff commented 3 years ago

You can create a mixed audio stream which includes your remote and local audio. Here's an example.

let audioContext = null;
const isRecordAvailable = typeof window.AudioContext !== 'undefined' || typeof window.webkitAudioContext !== 'undefined';

const getAudioContext = () => {
  if (!isRecordAvailable) return null;

  return new (window.AudioContext || window.webkitAudioContext);
};

const getMixedAudioStream = () => {
    const audioStreams = // array of all your streams;
    if (!audioStreams.length) return null;

    if (audioContext === null) {
      audioContext = getAudioContext();
    }

    const audioSources = audioStreams.map((stream) => audioContext.createMediaStreamSource(stream));
    const audioDestination = audioContext.createMediaStreamDestination();

    audioSources.forEach(audioSource => {
      audioSource.connect(audioDestination);
    });

  return audioDestination.stream;
};

And then simply pass the result to the RecordRTC instance.

RecordRTC([...yourVideoStreams, getMixedAudioStream()], {
  type: 'video',
  mimeType: 'video/webm',
  // your options
});

Maybe there is a simplier way to do that but i still working on it. Also you can try addTrack to your remote stream. Didn't try this myself with RecordRTC