vlc+flv.js 摄像头 H5 直播
背景#
业务需求:用最短的时间搞定摄像头直播到Web页面。因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中。惯性思维想当然的以为找组件,配地址就能搞定的,实际困难点比想象中的多,比如说摄像头RTSP格式是不能直接到web的、格式转码,推流用什么服务、如何解决延迟问题等等。
大佬链接奉上:基础知识 (建议不要放弃本文,继续往下看,因为我没有完全使用以上方案,哈哈哈哈。。。嗝)
步骤#
言归正传,为了实现“快速”的要求,经过摸索我使用了这款软件:vlc,用来接收摄像头并以指定格式推流。经过对比m3u8、MP4、Flv格式延迟及前台videojs、flv.js等播放组件对格式支持之后。选中flv格式,及flv.js播放组件。
1、摄像头测试#
本文以海康威视摄像头为例,地址格式这样的:rtsp://admin:123456@192.168.1.1:666,自行配置账号、密码、ip、端口。
(客户厂里的摄像头,原谅我的厚码。。。)
2、转码推流#
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、效果#
作者:冬先生
出处:https://www.cnblogs.com/WinterSir/p/14981671.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
内容粗浅,如有错误,欢迎大佬批评指正
标签:
flvjs
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤