光电视频流在html5中展示

栏目: Html5 · 发布时间: 6年前

内容简介：版权声明：本文为博主原屙文章，喜欢你就担走。 https://blog.csdn.net/leftfist/article/details/86699371

光电，其实是一种类似摄像头的设备，有点怪异，呵？它比一般的摄像头看得清，看得远，还有红外功能。

如何在页面中展示它？

三个步骤：

1、将光电视频流转码

2、网站要支持转码后的视频文件

2、HTML5中播放视频文件

边转边播放。

一、将光电视频流转码

为什么要转码？

当然是不转的话，浏览器无法识别咯。

转成啥？怎么转？

转成hls。用一个ffmepg的东东转。

具体步骤：

1、下载一个ffmpeg，解压，设置环境变量path

下载： http://ffmpeg.zeranoe.com/builds/

下载并解压FFmpeg文件夹，配置环境变量：在“Path”变量原有变量值内容上加上d:\ffmpeg\bin，验证：ffmpeg -version 出现版本号则成功。

2、运行命令，视频流转换格式并保存在硬盘

ffmpeg -rtsp_transport tcp -i "rtsp://账号:密码@IP:端口/路径" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 D:/soft/nginx/html/hls/test.m3u8

上述命令中， -rtsp_transport tcp 这个比较关键，因为下载的这个版本似乎不支持udp，要改用tcp。参考文章中没有给出该参数。而且这个命令似乎要写在前面，紧跟ffmpeg命令才有效。

同时，这个命令好像是长期运行的，如果不喊停，理论上会一直运行下去。不过应该也不会导致硬盘撑爆，因为这里指定了15块？

ffmpeg有许多参数，可以用 ffmpeg -help 来查看。

二、网站要支持这个视频格式

转码，视频流生成了视频文件：***.m3u8。

参考文章中用nginx来做WEB服务器。我们就试试这个nginx。大名鼎鼎，如雷贯耳的nginx。哎，它不是用于做反向代理吗？好像在这里，我们只用来做WEB服务器。

nginx.exe -c D:\soft\nginx\conf\nginx.conf

按照参考文章的指导去做。但有一些坑需要提醒一下：

1、nginx不能位于有中文的路径里

2、运行nginx，要用管理员身份运行

三、HTML5中播放

转码，视频流生成了视频文件：***.m3u8。html5也并不天然支持这种格式。还要一些JS插件的支持。

下载 hls.js

<!DOCTYPE html>
<html>
<head>
<script src="dist/hls.js"></script>
</head>
<body>
      <center>
          <video height="600" id="video" controls></video>
      </center>
      <script>
        if(Hls.isSupported()) {
          var video = document.getElementById('video');
          var hls = new Hls();
          hls.loadSource('http://192.168.0.98:20000/hls/test.m3u8');
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED,function() {
            video.play();
        });
       }
       // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
       // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
       // This is using the built-in support of the plain video element, without using hls.js.
        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = 'http://192.168.0.98:20000/hls/test.m3u8';
          video.addEventListener('canplay',function() {
            video.play();
          });
        }
      </script>
</body>
</html>

你是光，你是电，你是唯一的神话，我只爱你、you are my super star。

参考文章：

ffmpeg+nginx+video实现rtsp流转hls流，通过H5查看监控视频

有支持M3U8格式的HTML5播放器吗？

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Ant Colony Optimization

Marco Dorigo、Thomas Stützle / A Bradford Book / 2004-6-4 / USD 45.00

The complex social behaviors of ants have been much studied by science, and computer scientists are now finding that these behavior patterns can provide models for solving difficult combinatorial opti......一起来看看《Ant Colony Optimization》这本书的介绍吧!

码农工具