几个月前,我基于MediaSource
开发了一个h264播放器。我没想到原来的回答之后这么久还会有人看到,所以我觉得应该编辑一下这篇文章,让它更有帮助性。顺便说一句,我不是专业人士,这篇文章只是基于我使用MediaSource
API 的经验。欢迎评论指正我的错误。谢谢!
var buf = ms.addSourceBuffer('video/mp4; codecs="avc1.64001E"');
创建buf之后,我认为每次调用SourceBuffer.appendBuffer
时,buf
都期望接收一个分段的MP4数据块。
然而,您将RAW H264数据传递给它,我认为浏览器应该给出异常。
在我的情况下,我使用了ffmpeg
从RTSP流中读取数据,将数据转换为fMP4格式(不进行编码),并将输出发送到stdout
,然后让其他应用程序将数据发送到浏览器。(实际上,我使用了WebSocket。)
以下是参数:
ffmpeg -i rtsp://example.com/ -an -c:v copy -f mp4 \
-movflags +frag_keyframe+empty_moov+default_base_moof pipe:1
我还想分享一件事。我不确定ffmpeg
是如何工作的,但每次从stdout
读取时它不会输出一个完整的片段。因此在我的后端程序中,我首先缓存了数据。下面是Java的伪代码:
byte[] oldbuf;
byte[] buffer = ReadDataFromFfmpegStdout();
if (buffer[4] == 'm' && buffer[5] == 'o' && buffer[6] == 'o' && buffer[7] == 'f') {
send(oldbuf);
oldbuf = buffer;
} else {
append(oldbuf, buffer);
}
你可以在GitHub上查看这个项目
131/h264-live-player,它基于JavaScript H.264解码器
mbebenita/Broadway。
node server-static.js
的示例通过WebSocket流传输原始h264视频,客户端代码将其渲染在画布中。克隆该库,按照安装说明操作,在
samples
文件夹中放置您的h264文件,在
server-static.js#L28中修改
video_path
为您的视频文件,执行
node server-static.js
即可在浏览器中播放视频。
请注意,Broadway仅支持基本配置的H.264编码格式。