我正在尝试Chrome中提供的新MediaSource API.
我正试图将二进制数据从WebSocket动态附加到视频媒体源.
从https://html5-demos.appspot.com/static/media-source.html上的示例开始,我的代码目前是:
var websocket = new WebSocket('ws://localhost:8080');
websocket.binaryType = 'arraybuffer';
var mediaSource = new MediaSource();
var buffer;
var queue = [];
var video = $('.video')[0];
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
video.play();
buffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E"');
buffer.addEventListener('updatestart', function(e) { console.log('updatestart: ' + mediaSource.readyState); });
buffer.addEventListener('update', function(e) { console.log('update: ' + mediaSource.readyState); });
buffer.addEventListener('updateend', function(e) { console.log('updateend: ' + mediaSource.readyState); });
buffer.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); });
buffer.addEventListener('abort', function(e) { console.log('abort: ' + mediaSource.readyState); }); …Run Code Online (Sandbox Code Playgroud) 我目前正在向Chrome发送视频流,以通过MediaSource API播放.
据我了解,MediaSource仅支持使用MPEG-DASH编码的MP4文件,或者支持以关键帧开头的集群的WebM文件(否则会引发错误:媒体段不以关键帧开头).
有没有办法用FFMPEG实时编码MPEG-DASH或关键帧WebM格式?
编辑:
我只是试了一下,ffmpeg ... -f webm -vcodec vp8 -g 1所以每一帧都是一个关键帧.不是理想的解决方案.它现在可以与MediaStream一起使用.有没有办法将段与WebM中的关键帧同步,所以不是每个帧都需要是一个关键帧?
关于WebM/MP4和MediaSource的参考问题:
我正在尝试从服务器到浏览器实时实时传输H264视频.H264流不包含在MP4容器内,而是通过原始H264帧的形式找到它到浏览器(通过Web套接字)的方式.
问题是:是否可以使用原始帧而不是MP4或WebM等文件容器来提供媒体源扩展?
诸如MPEG-DASH之类的mp4解决方案在低延迟,多视频同步和我需要实现的其他元素方面不具备我所需的灵活性.
我正在使用以下命令为html5流创建一个支离破碎的mp4:
-i rtsp://172.20.28.52:554/h264 -vcodec copy -an -f mp4 -reset_timestamps 1 -movflags empty_moov+default_base_moof+frag_keyframe -loglevel quiet -
Run Code Online (Sandbox Code Playgroud)
一切都运行良好,期待我试图解决的延迟问题.如果我每次从stdout进入数据时都会记录,并且到达时间戳,我得到这个输出:
16/06/2015 15:40:45.239数据大小= 24
16/06/2015 15:40:45.240得到的数据大小= 7197
16/06/2015 15:40:45.241得到数据大小= 32768
2015年6月16日15:40:45.241数据大小= 4941
2015年6月16日15:40:45.241数据大小= 12606
2015年6月16日15:40:45.241数据大小= 6345
16/06/2015 15:40:45.241得到数据大小= 6339
2015年6月16日15:40:45.242得到数据大小= 6336
2015年6月16日15:40:45.242得到数据大小= 6361
2015年6月16日15:40:45.242获得数据大小= 6337
16/06/2015 15:40:45.242得到数据大小= 6331
2015年6月16日15:40:45.242得到数据大小= 6359
16/06/2015 15:40:45.243得到的数据大小= 6346
16/06/2015 15:40:45.243得到的数据大小= 6336
2015年6月16日15:40:45.243数据大小= 6338
2015年6月16日15:40:45.243得到数据大小= 6357
2015年6月16日15:40:45.243得到数据大小= 6357
16/06/2015 15:40:45.243得到的数据大小= 6322
16/06/2015 15:40:45.243得到数据大小= 6359
2015年6月16日15:40:45.244数据大小= 6349
16/06/2015 …
media-source ×3
ffmpeg ×2
h.264 ×2
html5 ×2
video ×2
html5-video ×1
javascript ×1
mp4 ×1
mpeg-dash ×1
webm ×1