web前端javascript播放H.264/MJPEG视频/支持双码流

最新推荐文章于 2024-07-19 15:07:45 发布

狼丶宇先森

最新推荐文章于 2024-07-19 15:07:45 发布

阅读量3.4k

点赞数

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/qq_33270001/article/details/100123784

版权

前端同时被 2 个专栏收录

82 篇文章 2 订阅

订阅专栏

javascript

66 篇文章 1 订阅

订阅专栏

最近遇到调试本地的车牌识别相机,需要解码视频编码H.264/MJPEG/支持双码流2格式的视频,解析方法如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script type="text/javascript">
    var ws = {};//初始化ws对象

    //init()方法为了初始化ws的一些具体回调函数，在body的onload事件中触发
    function init() {
      //链接服务端
      ws = new WebSocket("ws://192.168.0.101:9080/ws");

      //配置客户端连接成功的回调方法
      ws.onopen = function (event) {
        console.log("open...");
      };

      //配置客户端处理消息的回调方法
      ws.onmessage = function (event) {
        //创建FileReader对象，该对象时html5中的特有对象，详细用法可以//参照html5相关资料
        var reader = new FileReader();

        //设置FileReader对象的读取文件回调方法
        reader.onload = function (eve) {
          //判断文件是否读取完成
          if (eve.target.readyState == FileReader.DONE) {
            //读取文件完成后，创建img标签来显示服务端传来的字节数//组
            var img = document.getElementById("show");
            //读取文件完成后内容放在this===当前
            //fileReader对象的result属性中，将该内容赋值img标签//浏览器就可以自动解析内容格式并且渲染在浏览器中
            img.src = this.result;
            //将标签添加到id为show的div中否则，即便是有img也看不见
            // document.getElementById("show") = img;
          }
        };

        //调用FileReader的readAsDataURL的方法自动就会触发onload事件
        reader.readAsDataURL(event.data);
      };
    }
  </script>

  <body onload="init()">
    <img id="show" style="width:300px; height:300px; border:1px solid" />
  </body>
</html>