Что делать, чтобы сохранить поток записи в мобильном браузере с помощью Media Recorder API?

1

У меня есть требование к проекту для записи и хранения текущего видеопотока. Я использовал webRTC для потоковой передачи видео, а для записи потокового видео я использовал MediaRecorder API. Он полностью работает в настольной системе. Но в мобильном браузере он не работает.

Есть идеи, почему он не работает в мобильном браузере?

Ниже приведен фрагмент кода:

componentDidMount = async () => {
                recordingStream =  await navigator.mediaDevices.getDisplayMedia({
                  video: true,
                  audio: true,
                });

                const mergedAudio = await this.mergeAudioStreams();
                console.log("audio track length... ", mergedAudio.length);
                const tracks = [
                  ...recordingStream.getVideoTracks(),
                  ...mergedAudio,
                ];

                captureStream = new MediaStream(tracks);
                mediaRecorder = new MediaRecorder(captureStream, options);
                mediaRecorder.ondataavailable = this.handleDataAvailable;
                mediaRecorder.start();
       
}

handleDataAvailable = async event => {
    console.log("data-available", event);
    if (event.data.size > 0) {
      recordedChunks.push(event.data);
      this.download();
    } else {
      // ...
      console.log("in else");
    }
  };
  
 download = async () => {
    console.log("in download fn");
    var blob = await new Blob(recordedChunks, {
      type: "video/mp4",
    });
    
    
    //called the API to store the recorded video
}

mergeAudioStreams = async () => {
console.log("recordScreen fn called");

const ctx = new AudioContext();
const dest = ctx.createMediaStreamDestination();
let localSource, remoteSource;

if (this.state.localStream.getAudioTracks().length > 0) {
  localSource = ctx.createMediaStreamSource(this.state.localStream);
}

if (this.state.selectedVideo.stream.getAudioTracks().length > 0) {
  remoteSource = ctx.createMediaStreamSource(
    this.state.selectedVideo.stream
  );
}

const localGain = ctx.createGain();
const remoteGain = ctx.createGain();

localGain.gain.value = 0.7;
remoteGain.gain.value = 0.7;

localSource.connect(localGain).connect(dest);

remoteSource.connect(remoteGain).connect(dest);

console.log("combine tracks..", dest.stream.getAudioTracks());

return dest.stream.getAudioTracks();
  };
7
  • Поддерживает ли ваше устройство MediaRecorder API ?
    A_A
    1 октября в 7:32
  • Да, поддерживается. 1 октября в 8:39
  • Тогда вам, вероятно, следует описать, что именно не работает. В частности, минимальный воспроизводимый пример (включая тип устройства, на котором он не работает)
    A_A
    1 октября в 10:56
  • @A_A, я отредактировал свой вопрос и предоставил фрагмент кода. Пожалуйста, проверь это. Я тестировал последнюю версию Android Chrome. 4 октября в 4:08
  • Спасибо за обновление вопроса. Я не смогу помочь (так как у меня нет Android Chrome), но теперь другим должно быть легче вам помочь. Если возможно, сделайте фрагмент кода работоспособным, просто нажав «Выполнить фрагмент кода» (в настоящее время существует ошибка SyntaxError).
    A_A
    4 октября в 8:02