搭建属于自己的直播间

type

Post

status

Published

date

Dec 31, 2019

slug

Build-LiveRoom

summary

之前在工作室直播的时候，同学一直用的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 来加一点点细节，就很好看啦

多人直播间

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