手摸手利用flvjs和livego,搭建自己的直播详细版本

2,557 阅读1分钟

为啥要写这篇文章

很简单因为自己用到这个技术的时候,百度一下,发现没有很完整的搭建流程,自己捣鼓了半天,总算搞起来了。

目的:就是为了让新手能够快速的搭建自己简单的直播。避免踩坑

适用人群:初学者

项目准备阶段

1、下载livego github.com/gwuhaolin/l…

2、下载flvjs github.com/bilibili/fl…

3、安装obs

启动livego

1、按照livego的官方文档下载

2、执行命令go version,看下当前电脑是否有golang环境,没有的话,安装下golang即可。 如下图所示,即安装好golang语言环境。

image.png 3、下载完成之后,如果当前电脑有golang语言环境,则进入livego文件目录下面执行 go build 会生成如图所示的livego执行命令。

image.png 4、双击livego执行命令。如下图所示,即livego启动成功

image.png

5、生成房间密钥

浏览器访问该api:http://localhost:8090/control/get?room=movie 会得到如图所示针对movie这个房间的密钥。之后需要配置在obs软件中。

image.png

安装和启动obs软件

1、启动obs软件

2、如图所示在设置里面设置推流。

image.png

3、设置服务器:rtmp://127.0.0.1:1935/live

4、设置推流密钥,图中标注的就是上面通过http://localhost:8090/control/get?room=movie获取到的。

image.png

5、开始推流

image.png

编写前端页面

最简单的就是本地写一个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>
``