光电视频流在html5中展示

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

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

版权声明:本文为博主原屙文章,喜欢你就担走。 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块?

光电视频流在html5中展示

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播放器吗?


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

查看所有标签

猜你喜欢:

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

HTTP权威指南

HTTP权威指南

David Gourley、Brian Totty / 陈涓、赵振平 / 人民邮电出版社 / 2012-9 / 109.00元

超文本转移协议(Hypertext Transfer Protocol,HTTP)是在万维网上进行通信时所使用的协议方案。HTTP有很多应用,但最著名的是用于web浏览器和web服务器之间的双工通信。 HTTP起初是一个简单的协议,因此你可能会认为关于这个协议没有太多好 说的。但现在,你手上拿着的是却一本两磅重 的书。如果你对我们怎么会写出一本650页 的关于HTTP的书感到奇怪的话,可以去......一起来看看 《HTTP权威指南》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试