vlc+flv.js 摄像头 H5 直播

冬先生 2024-09-27 16:21:42 原文

背景

业务需求：用最短的时间搞定摄像头直播到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 流量,要知道视频直 ...

随机推荐

MindSpore特性支持类
MindSpore特性支持类 Q:请问MindSpore支持梯度截断吗? A:支持,可以参考梯度截断的定义和使用. Q:如何在训练神经网络过程中对计算损失的超参数进行改变? A:暂时还未有这样的功能. ...
【NX二次开发】Block UI 选择表达式
属性说明属性类型描述常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
CMD批处理（1）——批处理常用命令总结
echo 打开回显或关闭回显功能,或显示消息.如果没有任何参数,echo命令将显示当前的回显设置. 命令格式1:echo [{on|off}] 命令格式2:echo [message] 例.在命令 ...
Unity3D 本地数据持久化几种方式
下面介绍几种 Unity本地记录存储的实现方式. 第一种 Unity自身提供的 PlayerPrefs //保存数据 PlayerPrefs.SetString("Name",mN ...
Linux定时任务-cronie
1.cronie服务介绍 Linux crontab(cronie)是用来定期执行程序的命令. 当安装完成操作系统之后,默认就会启动此任务调度命令. crond 命令每分钟会定期检查是否有要执行的工作 ...
9.4、安装zabbix(3)
(10)监控mysql: 1)安装mariadb-server: [root@slave-node1 ~]# yum install mariadb-server [root@slave-node1 ...
POJ 1556 计算几何判断线段相交最短路
题意: 在一个左下角坐标为(0,0),右上角坐标为(10,10)的矩形内,起点为(0,5),终点为(10,5),中间会有许多扇垂直于x轴的门,求从起点到终点在能走的情况下的最短距离. 分析: 既然是求 ...
Flask（5）- 动态路由
前言前面几篇文章讲的路由路径(rule)都是固定的,就是一个路径和一个视图函数绑定,当访问这条路径时会触发相应的处理函数这样无法处理复杂的情况,比如常见的一个课程分类下有很多个课程,那么他们的 p ...
gitolite安装及配置
1.客户端(1)使用ssh-keygen命令在当前用户根目录下生成密钥(2)将该密钥远程拷贝到gitserver服务器上:scp ~/.ssh/id_rsa.pub user@ip:/tmp/neu. ...
SpringBoot中如何监听两个不同源的RabbitMQ消息队列
spring-boot如何配置监听两个不同的RabbitMQ 由于前段时间在公司开发过程中碰到了一个问题,需要同时监听两个不同的rabbitMq,但是之前没有同时监听两个RabbitMq的情况,因此在 ...