vlc+flv.js 摄像头 H5 直播
2021-07-23 15:25
459 查看
##背景 业务需求:用最短的时间搞定摄像头直播到Web页面。因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中。惯性思维想当然的以为找组件,配地址就能搞定的,实际困难点比想象中的多,比如说摄像头RTSP格式是不能直接到web的、格式转码,推流用什么服务、如何解决延迟问题等等。 大佬链接奉上:基础知识 (建议不要放弃本文,继续往下看,因为我没有完全使用以上方案,哈哈哈哈。。。嗝) ##步骤 言归正传,为了实现“快速”的要求,经过摸索我使用了这款软件:vlc,用来接收摄像头并以指定格式推流。经过对比m3u8、MP4、Flv格式延迟及前台videojs、flv.js等播放组件对格式支持之后。选中flv格式,及flv.js播放组件。 ###1、摄像头测试 本文以海康威视摄像头为例,地址格式这样的:rtsp://admin:123456@192.168.1.1:666,自行配置账号、密码、ip、端口。 (客户厂里的摄像头,原谅我的厚码。。。)
###2、转码推流 摄像头源以flv视频流格式进行推流
###3、nginx 因为推流占用8001端口,web就需要部署在别的端口,直接访问8001会出现跨域问题,用nginx解决,监听6702是访问Web页面的端口,转发到本机路径的index.html,匹配路由video转发到vlc推流的8001端口
server { listen 6702; server_name localhost; location / { root C:/Users/Administrator/Desktop/xxx; try_files $uri $uri/ /index.html; } location /video/ { proxy_pass http://localhost:8001; } }
###4、拉流播放
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>flv.js</title> </head> <body> <video id="videoElement" controls autoplay muted width="1024" height="576"></video> <script src="flv.min.js"></script> <script> var player = document.getElementById('videoElement'); if (flvjs.isSupported()) { var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://xxx.xxx.x.xxx:6702/video/camera', isLive: true }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); //加载 flvPlayer.play(); //播放 } </script> </body> </html>
###5、效果
相关文章推荐
- H5利用JS调用摄像头实现拍照效果(记录)
- 使用flv.js实现视频直播
- 前端视频直播技术总结及video.js在h5页面中的应用
- linux下使用nginx-http-flv-module转发码流,web使用flv.js直播码流。
- easydarwin + ffmpeg 实现海康摄像头 rtsp 视频直播(vlc播放器可以播放,但H5以及各种flash播放器播放黑屏的问题)
- SpringMVC H5 js摄像头拍照 ajax上传返回url路径
- 使用flv.js做直播
- 如何使用flv.js直播呢
- Vue+Video.js rtmp/flv直播流媒体配置
- [置顶] JS、H5调用手机相册摄像头以及文件夹
- Vue,H5,JS网页调用摄像头解析二维码 -- 好长的标题
- iOS H5页面OC与JS简单交互
- h5实现五子棋游戏 js原生实现
- Android EventHandler—给应用添加事件處理(直播vlc)
- 第一篇博文,发一个用(h5,css,js)做的闹钟吧
- 使用RTMPdump(libRTMP)直播来自v4l2的摄像头数据
- iOS RTMP 视频直播开发笔记(6)- 封包 FLV
- js调用摄像头
- live555直播usb 摄像头实现流媒体服务
- cocos Creator js 房卡麻将/血战/H5四川麻将/源码架设/源码下载支持iOS/Android/H5..