![](/img/trans.png)
[英]HTML5 Video, MediaSource, appendBuffer, How to skip some chunks
[英]HTML5 Video stream from websocket via MediaSource and MediaSourceBuffer
我正在尝试从 websocket 播放视频
<video id="output" width="320" height="240" autoplay></video>
<script>
function sockets(buffer) {
const socket = new WebSocket('wss://localhost:5002/ws')
socket.onmessage = async function (event) {
// event.data is a blob
buffer.appendBuffer(new Uint8Array(event.data))
}
}
let ms = new MediaSource()
let output = document.getElementById('output')
output.src = URL.createObjectURL(ms)
ms.onsourceopen = () => {
let buffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"')
sockets(buffer)
}
</script>
我在这里接收 MediaRecorder 块作为 Blob,并尝试使用 MediaSource API 顺序播放它们。 没有错误,也没有任何反应。 这里有什么根本错误吗?
我试过了:
更新:这是视频的制作方式:
let options = { mimeType: 'video/webm;codecs=vp8' }
let stream = await navigator.mediaDevices.getUserMedia({ video: true })
mediaRecorder = new MediaRecorder(stream, options)
mediaRecorder.ondataavailable = event => {
if (event.data && event.data.size > 0) {
send(event.data)
}
}
这里的根本问题是您不能 stream 那些来自MediaRecorder
的数据并期望另一端播放它; 这不是一个完整的视频。 只有在接收端能够接收初始化字节时它才会起作用——我怀疑这在现实世界的场景中是否会起作用。
您可以做的是创建一个间隔,例如每 1 秒启动/停止MediaRecorder
,以制作 1 秒的视频块,您可以通过网络传输(我知道和测试的最好的是 websockets)
我强烈建议不要使用MediaRecorder
,因为您正在执行帖子中未指明的实时视频流,但如果是,最好创建一个 canvas 来复制 stream 并做一些可以捕获您的requestAnimationFrame
的东西视频 stream 变成你可以传输的东西。
以我的经验, MediaRecorder
响应延迟,这通常会在视频中增加相当大的延迟,更不用说套接字也会引入的延迟。
通常,其他开发人员会建议您只走 WebRTC 路线,但根据我的经验,WebRTC 通常也不会更快。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.