一、流程

主播通过 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. java框架篇---Struts2 本地化/国际化(i18n)(转)

    源地址:https://www.cnblogs.com/oumyye/p/4368453.html 国际化(i18n)是规划和实施的产品和服务,使他们能很容易地适应特定的本地语言和文化的过程中,这个过 ...

  2. 洛谷$P4318$ 完全平方数 容斥+二分

    正解:容斥/杜教筛+二分 解题报告: 传送门$QwQ$ 首先一看这数据范围显然是考虑二分这个数然后$check$就计算小于等于它的不是讨厌数的个数嘛. 于是考虑怎么算讨厌数的个数? 看到这个讨厌数说, ...

  3. samba服务器红帽5.4搭建,亲测可用!!!

    samba服务器搭建 服务器的环境 红帽5.4 vm15 挂载光盘 mount mount -t iso9660 设备目录 /mnt 表示挂载 软件包安装 samba服务器只需安装两个软件包,先找到软 ...

  4. 1028 人口普查 (20 分)C语言

    题目描述 某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的--假设已知镇上没有超过200岁的老人,而今天是20 ...

  5. PHP 转化 Excel导入时间

    $fixation = 25569; $fixationT = 24 * 60 * 60; $date = gmdate('Y-m-d H:i:s', ('excel导入的时间'- $fixation ...

  6. Spring boot项目搭建及简单实例

    Spring boot项目搭建 Spring Boot 概述 Build Anything with Spring Boot:Spring Boot is the starting point for ...

  7. ArcEngine连接Oracle数据库

    问题1: 最近写服务需要用ArcEngine连接Oracle数据库,以前连接数据库都会弹出一个窗体.然后填好之后就可以连接了,这样很麻烦. 代码如下: private bool ConnectToSd ...

  8. C#调用Fortran生成的DLL的方法报内存不足

    最近在研究一个程序,公司给的,程序是VB写的,程序里面还有一个计算的模型,用Fortran语言写的. 在调试到这个模型里面的方法时报错,说是内存不足,于是就在网上查找方法,看了两篇博客之后问题解决了. ...

  9. KnockoutJs官网教程学习(一)

    这一教程中你将会体验到一些用knockout.js和Model-View-ViewModel(MVVM)模式去创建一个Web UI的基础方式. 将学会如何用views(视图)和declarative ...

  10. js去除字符串的前后空白

    使用gravatar生成邮箱的头像时需要对邮箱地址哈希化,其中需要去除邮箱地址的首尾空白,查找了一些资料,总结一下 使用 js 提供的函数 trim() trim() 方法会删除一个字符串两端的空白字 ...