Billd-Live

基于Vue3 + WebRtc + Node + SRS + FFmpeg搭建的直播间

简介

billd 直播间，目前实现了类似 bilibili 的 Web 在线直播功能，即你（房主）可以发布直播，别人进入你的直播间后能看到你的直播内容；而你也可以作为观众，进入别人的直播间看别人的直播内容。

后端：https://github.com/galaxy-s10/billd-live-server

功能

预览

线上地址：https://live.hsslive.cn

电脑端界面

首页

进入直播间

发起直播

排行榜

移动端界面

首页

分区列表

进入直播间

b 站视频

准备

前端相关：vue3 以及相关技术栈
后端相关： nodejs 以及相关技术栈、socket.io
webrtc 相关： webrtc 相关 api（RTCPeerConnection）、coturn
流媒体服务器相关： srs、 ffmpeg
数据库相关： mysql、redis
docker 相关：docker

安装和使用

获取项目代码

git clone https://github.com/galaxy-s10/billd-live.git

安装依赖

建议使用 node 版本：16.16.0

pnpm i

更新 billd 相关依赖：

pnpm i billd-utils@latest billd-scss@latest billd-html-webpack-plugin@latest billd-deploy@latest

运行

npm run start

打包

npm run build

FAQ

https://live.hsslive.cn/about/faq

flv.js

~~不通过 npm 安装 flv.js，因为安装了 flv.js 后，import flvJs from 'flv.js' 会导致 vscode 的 ts 错乱。因此直接下载 flv.min.js 使用。~~，应该是我的 vscode 用了 vscode 的 ts 版本（ts 的 5.x 版本），用回工作区（也就是项目里面安装的 ts 的 4.9 的版本）的 ts 版本就没事了？

video.js 报错

Chrome 版本 114.0.5735.133（正式版本） (arm64)，调试移动端的时候，此时的地址栏是：http://localhost:8000/h5/3?liveType=srsHlsPull，使用模拟的安卓设备，点击播放没问题（播放的 hls），但是换成模拟一个苹果设备（任意苹果设备都行，iphone6,7,8,X,12 Pro 等等），点击播放都会报错：VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

Firefox 版本 114.0.2 (64 位)，调试移动端时，此时的地址栏是：http://localhost:8000/h5/3?liveType=srsHlsPull，模拟安卓、苹果设备都能正常播放，但是小概率会报 blob 解码，但刷新就又好了

Safari 版本：版本 16.5.1 (18615.2.9.11.7)，开发===>响应式设计模式，模拟任何苹果设备，都能正常播放，并且行为和实际的苹果手机行为一致（苹果手机有的 bug，在电脑的 Safari 调试的时候也有。但电脑的 Firfox 和 Chrome 调试时没有，实际上电脑的 Firfox 和 Chrome 调试时应该也要出现这个 bug）