一、流程

主播通过 obs软件通过直播 -》推流到-》直播服务器

客户通过浏览器 访问站点-》flv.js拉取直播服务器视频流并播放

二、环境

centos7

直播服务器

https://github.com/gwuhaolin/livego

OBS

录屏客户端软件

flv.js

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

播放站点

nginx站点

三、流程

3.1 centos7 安装livego和开启服务

安装golang开发环境

git下载livego代码

go build编译成执行文件livego

运行 ./livego

[root@localhost livego]# ./livego

2020/01/28 19:53:13 main.go:118: start livego, version master

2020/01/28 19:53:13 liveconfig.go:35: starting load configure file(.livego.json)......

2020/01/28 19:53:13 liveconfig.go:42: loadconfig:

{

  "server": [

    {

      "appname": "live",

      "liveon": "on",

      "hlson": "on"

    }

  ]

}

2020/01/28 19:53:13 liveconfig.go:49: get config json data:{[{live on on []}]}

2020/01/28 19:53:13 main.go:62: hls server enable....

2020/01/28 19:53:13 main.go:70: RTMP Listen On :1935

2020/01/28 19:53:13 main.go:105: HTTP-Operation listen On :8090

2020/01/28 19:53:13 main.go:43: HLS listen On :7002

2020/01/28 19:53:13 main.go:87: HTTP-FLV listen On :7001

视频推送地址

rtmp://192.168.199.209:1935/live

3.2 obs配置和添加视频资源

配置

添加视频源和推送

3.3 播放站点

flv.js编译flv.min.js

git下载代码库

切换到代码目录

npm install          # install dev-dependences

npm install -g gulp  # install build tool

gulp release         # packaged & minimized js will be emitted in dist folder

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

npm install -gd express --registry=http://registry.npm.taobao.org

npm config set registry http://registry.npm.taobao.org

npm install cnpm -g

播放页面代码 index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>课程直播</title>

</head>

<body>

    <script src="flv.min.js"></script>

    <video id="videoElement"></video>

    <script>

        if (flvjs.isSupported()) {

            var videoElement = document.getElementById('videoElement');

            var flvPlayer = flvjs.createPlayer({

                type: 'flv',

                isLive: true,

                url: 'http://192.168.199.209:7001/live/test.flv'

            });

            flvPlayer.attachMediaElement(videoElement);

            flvPlayer.load();

            flvPlayer.play();

        }

    </script>

</body>

</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. win32汇编简单实现窗口程序

    .386 .model flat,stdcall option casemap:none ;========================== ;include部分 include windows. ...

  2. 洛谷$P$2048 超级钢琴 $[NOI2010]$ $rmq$/主席树

    正解:$rmq$/主席树 解题报告: 传送门! 好像看过这题挺多次辣,,,$QwQ$ 之前$NOIp$的时候$cjk$学长讲课讲了这题(虽然那时候的$gql$太菜辣并麻油落实这道_(:з」∠)_,然后 ...

  3. 「洛谷P1306」斐波那契公约数 解题报告

    P1306 斐波那契公约数 题目描述 对于Fibonacci数列:1,1,2,3,5,8,13......大家应该很熟悉吧~~~但是现在有一个很"简单"问题:第n项和第m项的最大公 ...

  4. 「HDU3823」 Prime Friend 解题报告

    Prime Friend Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. 浅析vue封装自定义插件

    在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装 ...

  6. zabbix配置企业微信报警

    +++++++++++++++++++++++++++++++++++++++++ 1. 工作中最长使用的就是微信,普及,开源,而且免费!!! 2. 在企业微信中要记录的值: · 部门id · 企业i ...

  7. 初学者的API测试技巧

    API(应用程序编程接口)测试是一种直接在API级别执行验证的软件测试.它是集成测试的一部分,它确认API是否满足测试人员对功能.可靠性.性能和安全性的期望.与UI测试不同,API测试是在没有GUI层 ...

  8. 《C++Primer》第五版习题答案--第一章【学习笔记】

    C++Primer第五版习题解答---第一章 ps:答案是个人在学习过程中书写,可能存在错漏之处,仅作参考. 作者:cosefy Date: 2022/1/7 第一章:开始 练习1.3 #includ ...

  9. No property andp found for type String! Traversed path: CmsPage.siteId.

    Respository没有找到该参数 1)由该参数,函数名写错,不符合JPA规范 2)实体类没有该参数

  10. pip 下载源更换

    Python博大精深之处在于丰富的库,而目前最方便的下载库的方法无疑是pip.但是由于国内的网络环境导致,好多库下载是在太慢了,原因大家都懂得.. 一.临时修改 使用pip的时候加入参数 -i pip ...