背景

业务需求：用最短的时间搞定摄像头直播到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. IPv6 与 IPv4现状

    IPv6 与 IPv4现状 一．概述 (1) IPv4可提供bai4,294,967,296个地址,IPv6将原来的32位地址空间增大du到128位,数目是zhi2的128次方.能够对地球上每平方米d ...

  2. TensorRT IRNNv2Layer

    TensorRT IRNNv2Layer IRNNv2Layer层实现递归层,如递归神经网络(RNN).门控递归单元(GRU)和长短期记忆(LSTM).支持的类型有RNN.GRU和LSTM.它执行一个 ...

  3. python工业互联网应用实战18—前后端分离模式之jquery vs vue

    前面我们分三章来说明了使用django template与jquery的差别,通过jquery如何来实现前后端的分离,同时再9章节使用vue.js 我们浅尝辄止的介绍了JQuery到vue的切换,由于 ...

  4. selenium-python元素定位技巧（一）

    在python-selenium元素定位中,有很多小技巧,在此记录总结 技巧一.尽量不要用可见的文本去定位 尽量不要用可见的文本去定位(特别是支持国际化的软件-比如禅道),因为一旦切换语言后,使用该方 ...

  5. oracle表ddl审计

    ============= 表ddl 审计============== 1.table信息 SQL> select * from test; ID CUST_CREDIT_LIMIT TIME ...

  6. Python 机器学习实战 —— 监督学习（上）

    前言 近年来AI人工智能成为社会发展趋势,在IT行业引起一波热潮,有关机器学习.深度学习.神经网络等文章多不胜数.从智能家居.自动驾驶.无人机.智能机器人到人造卫星.安防军备,无论是国家级军事设备还是 ...

  7. 在VScode 中使用RT-Thread Studio初体验

    前言 工欲善其事,必先利其器,VScode是什么东东,想必大家都非常熟悉了,丰富的插件,有好的开发界面,是很多程序开发者的不二之选,RT-Thread竟然也开发了Vscode插件,真的是非常的nice ...

  8. Spring Boot WebFlux-02——WebFlux Web CRUD 实践

    第02课:WebFlux Web CRUD 实践 上一篇基于功能性端点去创建一个简单服务,实现了 Hello.这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD We ...

  9. 【模拟8.09】轰炸行动（bomb） （tarjan缩点和拓扑排序）

    很显然的tarjan嘛......拓扑也很容易想到 我是不会说我因为懒把拓扑改成DFS结果扔了40分然后就是纯板子了 因为我们一条路径的点如果不是一个一个炸,同时炸两个,他们一定会相互到达.... 找 ...

  10. NOIP模拟测试28「阴阳·虎·山洞」

    写这几个题解我觉得我就像在按照官方题解抄一样 阴阳 题解 将题目中给的阴阳看作黑色和白色 首先我们观察到最后生成图中某种颜色必须是竖着单调递增或竖着单调递减 类似这样 否则不满足这个条件 但合法染色方 ...