我正在尝试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); }); …我目前正在向Chrome发送视频流,以通过MediaSource API播放.
据我了解,MediaSource仅支持使用MPEG-DASH编码的MP4文件,或者支持以关键帧开头的集群的WebM文件(否则会引发错误:媒体段不以关键帧开头).
有没有办法用FFMPEG实时编码MPEG-DASH或关键帧WebM格式?
编辑:
我只是试了一下,ffmpeg ... -f webm -vcodec vp8 -g 1所以每一帧都是一个关键帧.不是理想的解决方案.它现在可以与MediaStream一起使用.有没有办法将段与WebM中的关键帧同步,所以不是每个帧都需要是一个关键帧?
关于WebM/MP4和MediaSource的参考问题:
我正在尝试使用媒体源扩展API将H.264内容直播到HTML5.
以下方法效果很好:
ffmpeg -i rtsp://10.50.1.29/media/video1 -vcodec copy -f mp4 -reset_timestamps 1 -movflags frag_keyframe+empty_moov -loglevel quiet out.mp4
然后:
mp4box -dash 1000 -frag 1000 -frag-rap out.mp4
我可以使用MP4Box输出(out_dashinit.mp4)并通过Web Sockets(块大块)将其发送到将客户端提供给媒体源API的JavaScript客户端.
但是,这对于实时内容来说不是一个好方法.
我现在要做的是创建一个单独的管道,以便以最小的可能延迟实时完成.使用FFmpeg,可以将输出重定向到stdout而不是out.mp4抓取内容.我无法弄清楚是否可以将MP4Box组合到管道中.
stdout)的东西,并可以逐步这样做,以便每当输出数据准备好,我将能够采取它并将其传输到Web客户端,基本上生成一个永无止境的虚线MP4.我正在尝试从服务器到浏览器实时实时传输H264视频.H264流不包含在MP4容器内,而是通过原始H264帧的形式找到它到浏览器(通过Web套接字)的方式.
问题是:是否可以使用原始帧而不是MP4或WebM等文件容器来提供媒体源扩展?
诸如MPEG-DASH之类的mp4解决方案在低延迟,多视频同步和我需要实现的其他元素方面不具备我所需的灵活性.
media-source ×3
ffmpeg ×2
h.264 ×2
html5 ×2
html5-video ×2
video ×2
javascript ×1
mpeg-dash ×1
webm ×1