搭建属于自己的直播间
2019-12-31
| 2023-3-27
0  |  0 分钟
type
Post
status
Published
date
Dec 31, 2019
slug
Build-LiveRoom
summary
之前在工作室直播的时候,同学一直用的QQ直播,直播质量及其廉价,然后又不是很想用B站直播之类的,毕竟都是自己看,于是就萌生了要自建直播间供工作室大佬使用的想法。
tags
开发
运维
category
技术分享
icon
password

前言

之前在工作室直播的时候,同学一直用的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的就不用了

修改 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

前端

为了图省事,我这里使用了 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 来加一点点细节,就很好看啦
notion image

多人直播间

根据 Vue-router 和 Vue 的特性,你可以根据路由来动态改变视频地址和直播间名字
notion image
技术分享
  • 开发
  • 运维
  • 元旦快乐给服务器安装 ArchLinux
    目录