0%

搭建属于自己的直播间

前言

之前在工作室直播的时候,同学一直用的QQ直播,直播质量极其廉价,然后又不是很想用B站直播之类的,毕竟都是自己看,于是就萌生了要自建直播间供工作室大佬使用的想法。

安装直播服务器

使用 Docker 安装 nginx-rtmp

所谓万物皆可 docker,能 docker 的事就别找别的麻烦的,反正学校服务器配置够高,用就是了

开文件夹,配置 docker-compose.yml

version: "3"

services:
  nginx-rtmp:
    container_name: "nginx-rtmp"
    volumes:
        - "./conf/nginx.conf:/etc/nginx/nginx.conf"
        - "./www:/usr/local/nginx/www"
    image: tiangolo/nginx-rtmp:latest
    ports:
        - "1935:1935/tcp"
    environment:
      TZ: 'Asia/Shanghai'
    restart: always
    networks:
        - docker-lemp

networks:
    docker-lemp:
        external:
            name: docker-lemp_default

这里这么搞是为了可以和我之前用的 docker-lemp 网络对接,当然你也可以直接将生成的流文件文件夹映射到本地的网站目录,这样更方便一点。顺带说一下,这个conf也要映射的原因是要修改默认配置文件。然后默认的1935端口给一下,大概差不多

** 通过编译安装 nginx-rtmp

参考此处资料进行使用,上面用了docker的就不用了

https://github.com/arut/nginx-rtmp-module

修改 nginx.conf

使用 docker 的在当前目录下创建 ./conf/nginx.conf

编辑 nginx.conf ,修改为以下内容

worker_processes auto;
rtmp_auto_push on;
events {}
http {
    server {
        listen 80;

        location /hls {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /usr/local/nginx/www;
            add_header Cache-Control no-cache;
        }
    }
}
rtmp {
    server {
            listen 1935;
            application live {
                live on;
            }
            application hls {
                live on;
                hls on;
                hls_path /usr/local/nginx/www/hls;
            }
     }
}

运行 Docker

输入 sudo docker-compose up -d ,等到容器创建完毕完事~

推流

nginx-rtmp 搭建好了以后,你就可以进行推流了。

上面开 hls 是为了方便移动端设备直接访问,也是为了方便浏览器上观看直播。

OBS 推流

打开推流设置页面,服务器填写 rtmp://<IP地址>:1935/hls ,密钥你自己喜欢,点击开始推流,看能不能推上

推上了以后,会在 ./www/hls 文件夹中生成 <密钥>.m3u8 ,说明推流成功

FFMPEG 推流视频

不想直播了,但是想在直播间循环一些视频

ffmpeg -re -stream_loop -1 -i <视频名> -vcodec copy -acodec copy  -f flv rtmp://<IP地址>:1935/hls/<密钥>

https 强迫症

如果你有 https 强迫症,或者说不想看端口,你也可以套一层 nginx 反代,或者直接在上面的 nginx 改设置

location / {
        proxy_pass  http://nginx-rtmp/;

        #Proxy Settings
        proxy_redirect     off;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_max_temp_file_size 0;
        proxy_connect_timeout      90;
        proxy_send_timeout         90;
        proxy_read_timeout         90;
        proxy_buffer_size          4k;
        proxy_buffers              4 32k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
   }

1935 那噶哒端口也一样,写就对了

然后串流地址就可以改成 https://xxxxx/hls

前端

参考资料:http://dplayer.js.org/zh/guide.html

为了图省事,我这里使用了 hls.js + DPlayer,直接引入 hls.js 和 dplayer.js 就行

按照 DPlayer 的指南简单写一下

<html>
    <head>
        <title>女装直播间</title>
        <link rel="stylesheet" href="DPlayer.min.css" />
    </head>
    <body>
        <div id="dplayer"></div>
    </body>
    <script src="hls.min.js"></script>
    <script src="DPlayer.min.js"></script>

    <script>
        const dp = new DPlayer({
            container: document.getElementById('dplayer'),
                live: true,
            video: {
                url: 'test.m3u8',
                type: 'hls',
            },
            pluginOptions: {
                hls: {
                    // hls config
                },
            },
        });
    </script>
</html>

(Ctrl+C, Ctrl+V ,摸了

最后效果和首页的差不多

弹幕服务器

众所周知,Dplayer 是一个弹幕播放器,那肯定要有弹幕才能尽兴。

开始我试了一下用官方的 docker 容器来搭建,搭好以后发现这个不太适用于直播,适用于视频类的,所以还是得手撸

主要思路是点击发送的时候 DPlayer 调用 apiBackend 的 send,然后再走 websocket 发送弹幕,当websocket 接收到新数据的时候再通过 dp.danmaku.draw 进行渲染。

将 danmaku 的 options 展开还可以指定视频 id、用户之类的,然后为了赶工我就只先搞了视频 id 的,用户啥的还没写

(视频id我就大概用视频地址md5一下差不多了

(说起来找了半天才发现这个 danmaku 是可以展开的(

美化

利用 Element 来加一点点细节,就很好看啦

https://static.yecdn.com/imguoguo/images/Live/Live1.png

多人直播间

根据 Vue-router 和 Vue 的特性,你可以根据路由来动态改变视频地址和直播间名字

https://static.yecdn.com/imguoguo/images/Live/otome.png