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、转码推流
摄像头源以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、效果
vlc+flv.js 摄像头 H5 直播的更多相关文章
- livego+obs+flv.js 搭建视频直播
一.流程 主播通过 obs软件通过直播 ->推流到->直播服务器 客户通过浏览器 访问站点->flv.js拉取直播服务器视频流并播放 二.环境 centos7 直播服务器 https ...
- SRS+flv.js打造兼容性较高的直播、点播平台
**************************************************************************************************** ...
- 基于node.js 的 websocket的移动端H5直播开发
这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...
- flv.js的追帧、断流重连及实时更新的直播优化方案
目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...
- 前端开发：H5直播起航
前言 前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案. 发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端 ...
- h5直播开发之旅总结
前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...
- h5直播
直播开发之旅 ① 状态控制: 目前我们先考虑直播的三种状态: 直播前,直播中,结束. 针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示. 可 ...
- H5 直播 & App 直播
H5 直播 & App 直播 polyv 直播 https://github.com/polyv 宝利威 直播 https://www.polyv.net/live/ SDK https:// ...
- 斗鱼 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？
斗鱼直播相信大家都听说过,打开斗鱼官网就可以直接在浏览器中观看直播.那么斗鱼是如何实现浏览器视频直播的呢?本篇文章就来解析斗鱼是如何实现直播的,以及它是如何节省 80% 的 CDN 流量,要知道视频直 ...
随机推荐
- 三维点云去噪无监督学习：ICCV2019论文分析
三维点云去噪无监督学习:ICCV2019论文分析 Total Denoising: Unsupervised Learning of 3D Point Cloud Cleaning 论文链接: htt ...
- 视频处理器为电池供电的设计提供4K视频编码
视频处理器为电池供电的设计提供4K视频编码 Video processor enables 4K video coding for battery-powered designs OmniVision ...
- Docker基本概念介绍
前言 Docker和Kubernetes是我最近在学习的内容,本来是去年的目标,由于工作比较忙,没有时间去学习,今年剩下的半年时间我会好好系统学习下相关的内容,最后在学习下Devops相关理念,希望最 ...
- 28.qt quick-ListView高仿微信好友列表和聊天列表
1.视图模型介绍 在Qml中.常见的View视图有: ListView: 列表视图,视图中数据来自ListModel.XmlListModel或c++中继承自QAbstractItemModel或Q ...
- 如何实现一个简易版的 Spring - 如何实现 AOP（终结篇）
前言 在 上篇 实现了 判断一个类的方式是符合配置的 pointcut 表达式.根据一个 Bean 的名称和方法名,获取 Method 对象.实现了 BeforeAdvice.AfterReturni ...
- go-zero：开箱即用的微服务框架
go-zero 是一个集成了各种工程实践的 Web 和 rpc 框架,它的弹性设计保障了大并发服务端的稳定性,并且已经经过了充分的实战检验. go-zero 在设计时遵循了 "工具大于约定和 ...
- OpenCV开发实战1——抖音哈哈镜效果
前言 在抖音中,我们经常看到各种抖音玩家都喜欢使用哈哈镜效果.那么什么是哈哈镜呢? 在现实生活中,哈哈镜是指一种表面凹凸不平的镜子,可以反应出人像及物体的扭曲面貌.简单点来说就是拉伸人脸(物件),或者 ...
- SpringCloud、Nginx高并发核心编程 【2020年11月新书 】
文章太长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典极品 : 三大本< Java 高并发 三部曲 > 面试 + 大厂 + 涨薪必备 疯狂创客圈 经 ...
- 【题解】Luogu P2327 [SCOI2005]扫雷
Luogu P2327 [SCOI2005]扫雷 Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,"余" ...
- 老公 今晚还玩“丝袜哥”Swagger 么？
大家都知道Swagger是一个常用的Spring Boot接口文档生成工具,但是我们今天再介绍另外一个无需额外注解的 Spring Boot API文档生成神器,非常方便好用! JApiDocs是一个 ...