Web端解码视频流：（Part1 纯Java Script 解码[不建议大家这样做，因为普适性不强]）

来源：互联网发布：手机报表软件下载编辑：程序博客网时间：2024/05/09 04:57

最近在做Web端解码实时视频流的工作，由于一开始对视频直播技术一无所知，耗费了很大力气去调研，为了方便后来者入门，特写此博客。

1.基础知识

所谓的FLV、AVI、MP4等视频文件与H.264、H.263、MPEG1、MPEG2等’有什么区别？

简单来说，后者是视频的压缩编码标准，前者是后者的容器，即会对在后者生成的文件头添加一些索引信息，以方便播放器播放。具体信息可查看链接https://www.zhihu.com/question/20997688

2.调研

调研到的几个用JavaScript 解码的工程如下：

（1）Broadway.js GitHub地址点击打开链接

（2）jsmpeg.js GitHub地址点击打开链接, 和其另一篇介绍性文章点击打开链接

（3）prism.js GitHub地址点击打开链接（并未找到演示性Demo）

（4）ORBX.js 未开源？（并未找到太多信息）

3.具体实现

本部分主要针对Broadway.js以及jsmpeg.js介绍其实现流程：

（1）Broadway.js

从github上下载下其源代码，其中最主要的代码在文件夹Player下，在其中添加一个任意名称的.html文件，并将如下代码写入此文件

<!DOCTYPE html><html><head><meta name="viewport" content="width=320, initial-scale=1"/><title>h264 streaming</title><style type="text/css">body {background: #333;text-align: center;margin-top: 10%;}#videoCanvas {/* Always stretch the canvas to 640x480, regardless of itsinternal size. */width: 640px;height: 480px;}</style></head><body><!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg willchange this internal resolution to whatever the source provides. The size thecanvas is displayed on the website is dictated by the CSS style.--><!--<canvas id="videoCanvas" width="640" height="480"><p>Please use a browser that supports the Canvas Element, like<a href="http://www.google.com/chrome">Chrome</a>,<a href="http://www.mozilla.com/firefox/">Firefox</a>,<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10</p></canvas>--><script type="text/javascript" src="Decoder.js"></script>  <script type="text/javascript" src="YUVCanvas.js"></script>  <script type="text/javascript" src="Player.js"></script><script type="text/javascript">var player = new Player({size: {        width: 640,        height: 320         }});    document.body.appendChild(player.canvas);var strhost = "ws://" + window.location.host + "/test";// Setup the WebSocket connection and start the playervar client = new WebSocket( strhost );   client.binaryType = 'arraybuffer';           client.onopen = function(evt) {             onOpen(evt)         };         client.onclose = function(evt) {             onClose(evt)         };         client.onmessage = function(evt) {             onMessage(evt)         };         client.onerror = function(evt) {             onError(evt)         };             function onOpen(evt) {                     //alert("open");    }       function onClose(evt) {         //alert("close");    }       function onMessage(evt) {         var messageData = new Uint8Array(evt.data);               player.decode(messageData);    }       function onError(evt) {         alert("error");    }  </script></body></html>

其次需要准备一个H.264编码的裸视频（注意：不能有容器），并建立websocket服务器，而后即可显示视频。

（2）jsmpeg.js

其github上的工程几乎不用修改即可使用，但这次传递的需要是有容器的视频。

4.存在的问题

jsmpeg.js 对视频的解码只支持MPEG1的编码格式。

Browadway.js 在解码过程中有时会黑屏，而且高清的H.264视频无法解析。

阅读全文

0 0