一、流程

  1. 主播通过 obs软件通过直播 -》推流到-》直播服务器
  3. 客户通过浏览器 访问站点-》flv.js拉取直播服务器视频流并播放

二、环境

centos7

直播服务器

  1. https://github.com/gwuhaolin/livego

OBS

  1. 录屏客户端软件

flv.js

  1. https://github.com/Bilibili/flv.js/

播放站点

  1. nginx站点

三、流程

3.1 centos7 安装livego和开启服务

  1. 安装golang开发环境
  2. git下载livego代码
  3. go build编译成执行文件livego

运行 ./livego

  1. [root@localhost livego]# ./livego
  2. 2020/01/28 19:53:13 main.go:118: start livego, version master
  3. 2020/01/28 19:53:13 liveconfig.go:35: starting load configure file(.livego.json)......
  4. 2020/01/28 19:53:13 liveconfig.go:42: loadconfig:
  5. {
  6.   "server": [
  7.     {
  8.       "appname": "live",
  9.       "liveon": "on",
  10.       "hlson": "on"
  11.     }
  12.   ]
  13. }
  14. 2020/01/28 19:53:13 liveconfig.go:49: get config json data:{[{live on on []}]}
  15. 2020/01/28 19:53:13 main.go:62: hls server enable....
  16. 2020/01/28 19:53:13 main.go:70: RTMP Listen On :1935
  17. 2020/01/28 19:53:13 main.go:105: HTTP-Operation listen On :8090
  18. 2020/01/28 19:53:13 main.go:43: HLS listen On :7002
  19. 2020/01/28 19:53:13 main.go:87: HTTP-FLV listen On :7001

视频推送地址

  1. rtmp://192.168.199.209:1935/live

3.2 obs配置和添加视频资源

配置

添加视频源和推送

3.3 播放站点

flv.js编译flv.min.js

  1. git下载代码库
  2. 切换到代码目录
  3. npm install          # install dev-dependences
  4. npm install -g gulp  # install build tool
  5. gulp release         # packaged & minimized js will be emitted in dist folder

npm慢的解决（数据源网站太慢，可以使用淘宝提供的npm数据源）

  1. npm install -gd express --registry=http://registry.npm.taobao.org
  2. npm config set registry http://registry.npm.taobao.org
  3. npm install cnpm -g

播放页面代码 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>课程直播</title>
  7. </head>
  8. <body>
  9.     <script src="flv.min.js"></script>
  10.     <video id="videoElement"></video>
  11.     <script>
  12.         if (flvjs.isSupported()) {
  13.             var videoElement = document.getElementById('videoElement');
  14.             var flvPlayer = flvjs.createPlayer({
  15.                 type: 'flv',
  16.                 isLive: true,
  17.                 url: 'http://192.168.199.209:7001/live/test.flv'
  18.             });
  19.             flvPlayer.attachMediaElement(videoElement);
  20.             flvPlayer.load();
  21.             flvPlayer.play();
  22.         }
  23.     </script>
  24. </body>
  25. </html>

待完善的问题

  1. google浏览器js报错，flv播放

livego+obs+flv.js 搭建视频直播的更多相关文章

  1. 使用 nginx 和 rtmp 插件搭建视频直播和点播服务器

    使用 nginx 和 rtmp 模块 ,可以很容易地搭建一个视频直播和点播服务器出来. 首先,看一下最经典的参考文献: How to set up your own private RTMP serv ...

  2. vlc+flv.js 摄像头 H5 直播

    背景 业务需求:用最短的时间搞定摄像头直播到Web页面.因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中.惯性思维想当然的以为找组件,配地址就能搞定 ...

  3. 使用VLC搭建视频直播服务器

    去年我们信息之夜我们进行过视频直播服务,当时我们使用了WMS(Windows Media Server)实现了这个服务,但是编码是微软的WMV,因而像iPhone/Android这样的智能手机无法观看 ...

  4. Android中直播视频技术探究之---视频直播服务端环境搭建(Nginx+RTMP)

    一.前言 前面介绍了Android中视频直播中的一个重要类ByteBuffer,不了解的同学可以 点击查看 到这里开始,我们开始动手开发了,因为我们后续肯定是需要直播视频功能,然后把视频推流到服务端, ...

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

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

  6. Centos7.5 搭建Red5视频直播服务器

    一.安装java环境 yum install java-1.7.0-openjdk 详细步骤请参考 http://www.cnblogs.com/java-qzq/p/5845509.html 我的这 ...

  7. 利用Nginx搭建RTMP视频直播，点播服务器，ffmpeg推流，回看

        一.环境和工具 ubuntu 14.04 desktop 不用server的原因是一部分的演示用到了linux视频播放和直播软件,自己还要装桌面,麻烦. 不建议使用 最新的16TLS,我一开始 ...

  8. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

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

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

随机推荐

  1. 两种高效的事件处理模式(Proactor和Reactor)

    典型的多线程服务器的线程模型 1. 每个请求创建一个线程,使用阻塞式 I/O 操作 这是最简单的线程模型,1个线程处理1个连接的全部生命周期.该模型的优点在于:这个模型足够简单,它可以实现复杂的业务场 ...

  2. HBase 分裂（split）

    1. 为什么split 最初一个Table 只有一个region(因此只能存放在一个region server上).随着数据的不断写入,HRegion越来越大,当到达一定程度后分裂为两个,通过负载均衡 ...

  3. java 使用 apoi 更新 ppt 中图表的数据

    本文源码:    1. https://github.com/zhongchengyi/zhongcy.demos/tree/master/apoi-ppt-chart 2. 在第5节也有核心源码 1 ...

  4. linux下tomcat相关的命令

    1.查看Tomcat是否以关闭 ps -ef|grep tomcat 2.直接干掉Tomcat可以使用kill命令,直接杀死Tomcat进程(这个命令用在当你关闭tomcat报错的时候直接杀死进程) ...

  5. Logback 学习指南 一

    因为项目中用到 SpringBoot,看到官方文档中提及默认的日志实现是 logback,因此就通过阅读手册和结合实践学习了下相关的知识,记录下以备查阅. 1. logback 是什么? logbac ...

  6. ubuntu conda install ERROR missing write permission错误

    报错: ondaIOError: Missing write permissions in: /usr/local/anaconda3 # # You don't appear to have the ...

  7. 洛谷$P5366\ [SNOI2017]$遗失的答案 数论+$dp$

    正解:数论$dp$ 解题报告: 传送门$QwQ$ 考虑先质因数分解.所以$G$就相当于所有系数取$min$,$L$就相当于所有系数取$max$ 这时候考虑,因为数据范围是$1e8$,$1e8$内最多有 ...

  8. 信息熵为什么要定义成-Σp*log(p)？

    信息熵为什么要定义成-Σp*log(p)? 再解释信息熵之前,需要先来说说什么是信息量. 信息量是对信息的度量,单位一般用bit. 信息论之父克劳德·艾尔伍德·香农(Claude Elwood Sha ...

  9. 小小知识点（十七）——对数形式功率（dBm）与非对数形式功率(w)之间的换算关系

    摘自https://blog.csdn.net/shij19/article/details/52946454 dBm 物理含义是:一个表示功率绝对值的值(也可以认为是以1mW功率为基准的一个比值) ...

  10. git stash使用

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/daguanjia11/article/ ...