为啥要写这篇文章
很简单因为自己用到这个技术的时候,百度一下,发现没有很完整的搭建流程,自己捣鼓了半天,总算搞起来了。
目的:就是为了让新手能够快速的搭建自己简单的直播。避免踩坑
适用人群:初学者
项目准备阶段
1、下载livego github.com/gwuhaolin/l…
2、下载flvjs github.com/bilibili/fl…
3、安装obs
启动livego
1、按照livego的官方文档下载
2、执行命令go version,看下当前电脑是否有golang环境,没有的话,安装下golang即可。
如下图所示,即安装好golang语言环境。
3、下载完成之后,如果当前电脑有golang语言环境,则进入livego文件目录下面执行
go build 会生成如图所示的livego执行命令。
4、双击livego执行命令。如下图所示,即livego启动成功
5、生成房间密钥
浏览器访问该api:http://localhost:8090/control/get?room=movie 会得到如图所示针对movie这个房间的密钥。之后需要配置在obs软件中。
安装和启动obs软件
1、启动obs软件
2、如图所示在设置里面设置推流。
3、设置服务器:rtmp://127.0.0.1:1935/live
4、设置推流密钥,图中标注的就是上面通过http://localhost:8090/control/get?room=movie获取到的。
5、开始推流
编写前端页面
最简单的就是本地写一个html文件即可。(vue项目同理),写好打开页面即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>live</title>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button onclick="flv_load()">加载</button>-->
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>
<script src="./flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
//这里的访问地址端口号是7001,live是livego默认设置的,movie是我们的房间名
url: 'http://127.0.0.1:7001/live/movie.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>
``