背景

业务需求：用最短的时间搞定摄像头直播到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 直播的更多相关文章

  1. livego+obs+flv.js 搭建视频直播

    一.流程 主播通过 obs软件通过直播 ->推流到->直播服务器 客户通过浏览器 访问站点->flv.js拉取直播服务器视频流并播放 二.环境 centos7 直播服务器 https ...

  2. SRS+flv.js打造兼容性较高的直播、点播平台

    **************************************************************************************************** ...

  3. 基于node.js 的 websocket的移动端H5直播开发

    这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...

  4. flv.js的追帧、断流重连及实时更新的直播优化方案

    目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...

  5. 前端开发：H5直播起航

    前言 前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案. 发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端 ...

  6. h5直播开发之旅总结

    前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...

  7. h5直播

    直播开发之旅 ① 状态控制: 目前我们先考虑直播的三种状态: 直播前,直播中,结束. 针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示. 可 ...

  8. H5 直播 & App 直播

    H5 直播 & App 直播 polyv 直播 https://github.com/polyv 宝利威 直播 https://www.polyv.net/live/ SDK https:// ...

  9. 斗鱼 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

    斗鱼直播相信大家都听说过,打开斗鱼官网就可以直接在浏览器中观看直播.那么斗鱼是如何实现浏览器视频直播的呢?本篇文章就来解析斗鱼是如何实现直播的,以及它是如何节省 80% 的 CDN 流量,要知道视频直 ...

随机推荐

  1. GPU编程和流式多处理器（七）

    6. 杂项说明 6.1. warp级原语 warp作为执行的原始单元(自然位于线程和块之间),重要性对CUDA程序员显而易见.从SM 1.x开始,NVIDIA开始添加专门针对thread的指令. Vo ...

  2. .NET平台系列18 .NET5的超强优势

    系列目录     [已更新最新开发文章,点击查看详细] 支持所有 .NET 应用程序类型 .NET5 统一版本之后将支持所有 .NET 应用程序类型:Xamarin.ASP.NET.IoT 和桌面.此 ...

  3. 性能报告之HTML5 性能测试报告

    1. 引言 1.1. 编写目的 HTML5 作为当前"最火"的跨平台.跨终端(硬件)开发语言,越来越受到前端开发者 的重视,无论是 PC 端还是当前"火热"的移 ...

  4. UF_OBJ 对象操作

    Open C uc5027uc5028uc5029uc502auc502euc502muc502nuc502ruc5203uf5025uf5026UF_OBJ_ask_cre_mod_versions ...

  5. 07：JS（03）

    BOM与DOM操作 # 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有 """ BOM 浏览器对象模型 Browser Ob ...

  6. vue根据变量值绑定src的路径

    路径必须用require包裹起来才会起作用

  7. 《四大点，搞懂Redis到底快在哪里？》

    一.开发语言 二.纯内存访问 三.单线程 四.非阻塞多路I/O复用机制 前言 Redis是一种基于键值对(Key-Value)的NoSQL数据库 ,Redis的Value可以由String,hash, ...

  8. 基于ABP落地领域驱动设计-01.全景图

    什么是领域驱动设计? 领域驱动设计(简称:DDD)是一种针对复杂需求的软件开发方法.将软件实现与不断发展的模型联系起来,专注于核心领域逻辑,而不是基础设施细节.DDD适用于复杂领域和大规模应用,而不是 ...

  9. Linux命令大全之搜索命令

    文件搜索命令(只能搜索文件) locate 文件名 在后台数据库中按文件名搜索,搜索速度快      /var/lib/mlocate(locate文件数据库)    这个数据库默认一天更新一次,强制 ...

  10. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...