我正在尝试将实时 MediaStream(最终来自摄像机)从对等点 A 投射到对等点 B,并且我希望对等点 B 实时接收实时流,然后以增加的延迟重播它。不幸的是,不可能简单地暂停流并继续播放,因为它会跳转到实时时刻。
所以我发现我可以使用 MediaRecorder + SourceBuffer 重新观看直播。记录流并将缓冲区附加到 MSE (SourceBuffer) 并在 5 秒后播放。
这在本地设备(流)上有效。但是当我尝试在接收器 MediaStream 上使用 Media Recorder (来自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()
}
你知道为什么它不能播放视频吗?
我创建了一个fiddle https://jsfiddle.net/ofy8w1jn/5/有了所有必要的代码来尝试,javascript选项卡与上面的代码相同,(html大部分是不相关的,不需要更改)
有些人尝试减少延迟,但我实际上想将延迟增加到大约 10 秒,以便重新观看您在高尔夫挥杆或其他操作中做错的事情,如果可能的话,完全避免使用 MediaRecorder
EDIT:我在一些 RTC 扩展中发现了名为“playout-delay”的东西
允许发送者控制从捕获到渲染时间的最小和最大延迟
- https://webrtc.org/experiments/rtp-hdrext/playout-delay/ https://webrtc.org/experiments/rtp-hdrext/playout-delay/
我该如何使用它?
它对我有什么帮助吗?