内容简介：版权声明：本文为博主原屙文章，喜欢你就担走。 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块？
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。
参考文章：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 耐能借力奇景光电SLiM 3D传感解决方案亮相安博会
- [译] 再看 Flask 视频流
- [译] 用 Flask 输出视频流
- Pixvana开源VR视频流传输技术
- 基于视频流传输：在线教育白板技术
- WebRTC 使用之 —— 使用 getUserMedia 获取视频流
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
