Я пытаюсь транслировать 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
РЕДАКТИРОВАТЬ: Я обнаружил что-то под названием "задержка воспроизведения" в каком-то расширении RTC.
что позволяет отправителю контролировать минимальную и максимальную задержку от захвата до времени рендеринга
Как я могу его использовать? Поможет ли мне это?
mutedсобытия. Firefox выдает ошибку SecurityError с момента запуска рекордера, например, если поток был испорчен, но в то же время они позволяют рисовать его из видео на холст и экспортировать этот холст. - person Kaiido schedule 10.06.2019