Изменить задержку воспроизведения в потоке WebRTC - PullRequest
Новая
       44

Изменить задержку воспроизведения в потоке WebRTC

7 голосов
/ 09 июня 2019

Я пытаюсь привести живой MediaStream (в конечном итоге с камеры) из peerA в peerB, и я хочу, чтобы peerB принимал прямой эфир в реальном времени, а затем воспроизводил его с добавленной задержкой. К сожалению, невозможно просто приостановить поток и возобновить воспроизведение, поскольку он переходит к живому моменту.

Итак, я понял, что могу использовать MediaRecorder + SourceBuffer для перемотки живого потока. Запишите поток и добавьте буферы в MSE (SourceBuffer) и воспроизведите его через 5 секунд. Это работает решетка на локальном устройстве (поток). Но когда я пытаюсь использовать Media Recorder на приемниках, MediaStream (из pc.onaddstream) выглядит так, как будто он получает некоторые данные и может добавить буфер в sourceBuffer. однако доза не повторяется. иногда я получаю только один кадр. 

const [pc1, pc2] = localPeerConnectionLoop()
const canvasStream = canvas.captureStream(200)

videoA.srcObject = canvasStream
videoA.play()

// Note: using two MediaRecorder at the same time seem problematic
// But this one works
// stream2mediaSorce(canvasStream, videoB)
// setTimeout(videoB.play.bind(videoB), 5000)

pc1.addTransceiver(canvasStream.getTracks()[0], {
  streams: [ canvasStream ]
})

pc2.onaddstream = (evt) => {
  videoC.srcObject = evt.stream
  videoC.play()

  // Note: using two MediaRecorder at the same time seem problematic
  // THIS DOSE NOT WORK
  stream2mediaSorce(evt.stream, videoD)
  setTimeout(() => videoD.play(), 2000)
}

/**
 * Turn a MediaStream into a SourceBuffer
 * 
 * @param  {MediaStream}      stream   Live Stream to record
 * @param  {HTMLVideoElement} videoElm Video element to play the recorded video in
 * @return {undefined}
 */
function stream2mediaSorce (stream, videoElm) {
  const RECORDER_MIME_TYPE = 'video/webm;codecs=vp9'
  const recorder = new MediaRecorder(stream, { mimeType : RECORDER_MIME_TYPE })

  const mediaSource = new MediaSource()
  videoElm.src = URL.createObjectURL(mediaSource)
  mediaSource.onsourceopen = (e) => {
    sourceBuffer = mediaSource.addSourceBuffer(RECORDER_MIME_TYPE);

    const fr = new FileReader()
    fr.onerror = console.log
    fr.onload = ({ target }) => {
      console.log(target.result)
      sourceBuffer.appendBuffer(target.result)
    }
    recorder.ondataavailable = ({ data }) => {
      console.log(data)
      fr.readAsArrayBuffer(data)
    }
    setInterval(recorder.requestData.bind(recorder), 1000)
  }

  console.log('Recorder created')
  recorder.start() 
}

Знаете ли вы, почему оно не воспроизводит видео?

Я создал скрипку со всем необходимым кодом, чтобы попробовать его, вкладка javascript - это тот же код, что и выше, (html в основном не имеет значения, и дозу менять не нужно)

Некоторые пытаются уменьшить задержку, но я на самом деле хочу увеличить ее до ~ 10 секунд, чтобы пересмотреть что-то, что вы сделали не так в игре в гольф или что-то в этом роде, и, если возможно, вообще избежать MediaRecorder

EDIT: Я обнаружил нечто, называемое задержкой воспроизведения, в каком-то расширении RTC

, что позволяет отправителю контролировать минимальную и максимальную задержку от перехвата до времени визуализации

Как я могу это использовать? Это поможет мне?

...