视频直播技术调研（2018-08-20）

最新推荐文章于 2025-06-02 09:30:13 发布

转载最新推荐文章于 2025-06-02 09:30:13 发布 · 643 阅读

文章标签：

#web

工作总结专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用FFmpeg推流至自建HTTP服务器并通过WebSocket在浏览器中解码渲染的音视频流演示项目。重点讨论了如何解决推送流格式问题，并提供了一段利用MediaSource从服务器拉取视频的前端代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下截图来自我参考云栖社区作者文章整理的PPT

原文地址：https：//yq.aliyun.com/articles/63040？spm = 5176.11065265.1996646101.searchclickresult.30faffeeqzJy2D

以下为本人实践参考代码，如有需要的请参考 https://github.com/phoboslab/jsmpeg，这个演示项目是用ffmped做为推流端，用节点搭建了一套接收http协议推送流的服务器，在建立的WebSocket服务端，浏览器拉流进行解码渲染，作者的项目说明很完整，跟着做就能实现视频播发，但是可能会遇到下面的警告然后你视频也出不来，这个是因为推送的流格式不对。

ffmpeg -f avfoundation -framerate 30 -i "0" -f mpegts -codec:v mpeg1video -b:a 800k -r 50 http://localhost:8081/supersecret

这条命令是在mac上调用摄像头进行流的推送，其他系统我没有试，重点就是'-f mpegts -codec：v mpeg1video'强制的改变了输出的格式，SMpeg仅支持使用MPEG1视频编解码器和MP2音频编解码器播放MPEG-TS容器!!!千万注意，基本上格式推送对了，应该是没有任何棘手的问题了。

-----------------------分割线------------------------- ------

其实也考虑过视频标签，综合考虑还是不太适合，但是前端通过画布绘制，网络摄像头容易出现花屏，还在研究中，希望各位看官有更好的方案在下方留言，下面贴一段视频在服务器上拉视频的代码，也是借鉴别的大神的，MediaSource的这个还是第一次接触，还在学习。

<script type="application/javascript">
        var video =document.querySelector('video');

        var mediaSource =new MediaSource();

        video.src =URL.createObjectURL(mediaSource);

        mediaSource.addEventListener('sourceopen',function(){

            var sourceBuffer =mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

            fetchAB('https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4',function(buf){

                sourceBuffer.addEventListener('updateend',function(){

                    mediaSource.endOfStream();

                    video.play();

                });

                sourceBuffer.appendBuffer(buf);

            });

        });

        function fetchAB (url,cb){

            var xhr =new XMLHttpRequest();

            xhr.open('get',url);

            xhr.responseType ='arraybuffer';

            xhr.onreadystatechange = function () {
				if (xhr.readyState == 4 && xhr.status == 200) {
					cb(xhr.response)
				};
            };

            xhr.send();

        };
	</script>

最后给大家分享一段知乎上话，笑SKR人。