xgplayer + SRS 实现直播方案

简介: 直播作为近几年比较火的方向,吸引了像我这样的小白不断在音视频的边缘不断试探。“宇宙的尽头是直播”,不论是娱乐直播还是直播带货,都已经成为现在人们生活中不可获取的一部分。 今天我们就来实现一个直播的 demo,我们来看一下整个直播的过程

1682517228(1).png

直播作为近几年比较火的方向,吸引了像我这样的小白不断在音视频的边缘不断试探。“宇宙的尽头是直播”,不论是娱乐直播还是直播带货,都已经成为现在人们生活中不可获取的一部分。 今天我们就来实现一个直播的 demo,我们来看一下整个直播的过程:

1682517249(1).png

SRS 流媒体服务器


为了方便我推荐使用云 SRS,可以基于宝塔一键部署,如果没有云服务器可以根据官方 github 自行编译(难度较大,不推荐新手选择此方式)。 在宝塔的软件商店中搜索 SRS(免费的,如果显示购买直接点击购买即可),点击安装

插件包安装完成之后打开,安装云 SRS,这个过程比较耗时,耐心等待……

1682517310(1).png

安装完成之后需要等待几分钟,云 SRS 内部的依赖启动需要一定的时间,等启动完成之后打开管理面板,设置管理员密码之后,进入系统设置菜单,找到 OpenAPI 选项,我们的后端服务需要根据这两个接口来获取串流秘钥。

1682517326(1).png

1682517410(1).png

后端服务


这边的业务服务器我们使用 Node 来实现,在这个过程中负责客户端鉴权以及获取串流秘钥,这里我选用 Midway(全凭个人喜好,可以选择任何其他的框架 Express、Koa、nest 等)。 我们这里提供两个接口:

  1. 主播获取推流地址和串流秘钥;
  2. 获取房间信息(最主要是 streamKey)

获取串流秘钥

使用 ApiSecret 从云 SRS 的 OpenAPI来获取秘钥,过程如下1682517377(1).png

以下是代码实现(忽略实体、配置等部分,只展示流程)

@Controller('/anchor')  
export class AnchorController {  
  @Inject()  
  ctx: Context;
  @Inject()  
  roomService: RoomService;  
  @Inject()  
  anchorService: AnchorService;  
  @Inject('short-uuid')  
  short;
  @Config('srs')  
  srs; //  配置了服务器 IP 和 ApiSecret
  // 判断主播身份  
  validateAnchor(user: UserModel) {  
    if (!user || user.role !== UserRole.ANCHOR)  
      // 如果没有用户(可能被冻结或者注销)或者没有权限抛出异常  
      throw new CustomError(  
        INSUFFICIENT_PERMISSIONS.CODE_1,  
        INSUFFICIENT_PERMISSIONS.MSG_1  
      );  
  }  
  // 生成向直播间串流秘钥(限制主播身份)  
  @Post('/streamKey')  
  async createStreamKey() {  
    const userId = this.ctx.state.user.uid;  
    const user = await this.anchorService.getAnchorWithRoom(userId);  
    // 身份判断  
    this.validateAnchor(user);  
    // 将主播关联的直播间进行串流秘钥重置  
    const key = this.short.generate();  
    const room = user.liveRoom;  
    room.streamKey = key;  
    // 保存新的串流秘钥  
    await this.roomService.saveRoom(room);  
    // 获取 token (makeHttpRequest 相当于 fetch, 做请求用)
    const token = await makeHttpRequest(  
      'http://' + this.srs.url + '/terraform/v1/mgmt/secret/token',  
      {  
        method: 'POST',  
        dataType: 'json',  
        contentType: 'json',  
        data: {  
          apiSecret: this.srs.apiSecret,  
        },  
      }  
    );  
    // 使用 token 获取 secret   
    const srsSecret = await makeHttpRequest(  
      'http://' + this.srs.url + '/terraform/v1/hooks/srs/secret/query',  
      {  
        method: 'POST',  
        dataType: 'json',  
        contentType: 'json',  
        data: {  
          token: token.data.data.token,  
        },  
      }  
    );  
    return {  
      url: 'rtmp://' + this.srs.url + '/live/',  
      key,  
      secret: srsSecret.data.data.publish,  
    };  
  }
}
复制代码

主播每次获取串流密钥会进行重置,防止泄露。

获取直播间信息

获取直播间信息相对简单,只需要查询数据返回即可

@Controller('/live')  
export class LiveController {  
  @Inject()  
  ctx: Context;  
  @Inject()  
  roomService: RoomService;  
  // 获取直播间相关数据  
  @Get('/room/:roomId')  
  async getRoomById(@Param('roomId') room: string) {  
    const res: any = await this.roomService.getRoomById(room);  
    if (!res) {  
      throw new CustomError(ROOM_NOT_FOUND.CODE, ROOM_NOT_FOUND.MSG);  
    }  
    // 粉丝数量取值  
    res.fans = res.fans.length;  
    return res;  
  }
}
复制代码


xgplayer(西瓜播放器)


播放器我当初对比过 MuiPlayer 和 xgPlayer,最终选择了西瓜(背靠大厂、集成度更高)。 我们使用 http-flv 的形式来进行推拉流,所以我们需要同时安装 xgplayer 和 xgplayer-flv

$ pnpm add xgplayer xgplayer-flv
复制代码

前端框架层面我使用了 Vue3,代码如下(只是播放器相关部分,不是最终成品的代码)

<template>
  <div class="room-video" id="mse"></div>
</template>
<script setup lang="ts">
import "xgplayer";
import FlvPlayer from "xgplayer-flv";
// 播放器
const playerRef = ref<FlvPlayer>();
onMounted(async () => {
  room.info = await getRoomInfo(props.roomId);
  if (room.info.isLiving) {
    initPlayer();
  }
});
// 初始化播放器
function initPlayer() {
  if (playerRef.value) {
    playerRef.value.destroy();
  }
  playerRef.value = new FlvPlayer({
    id: "mse", // 容器元素 ID
    url: import.meta.env.VITE_VIDEO_URL + room.info.streamKey + ".flv", // 拉流地址
    isLive: true, // 直播模式
    autoplay: true, // 自动播放
    height: 500, // 高
    width: 888, // 宽
    pip: true, // 画中画
    lang: "zh-cn",
    ignores: ["replay"], // 忽略内置控件
    danmu: {
      // danmu 配置
      comments: [],
    },
  });
}
// socket 收到消息之后通过 player 实例调用 instace.danmu.sendComment 即可动态添加弹幕
</script>
复制代码


成品展示


主播面板获取推流码,复制到 OBS 中开始推流

1682517483(1).png

观众进入直播间获取直播流进行播放

1682517501(1).png



相关文章
|
Web App开发 弹性计算 编解码
最佳实践:如何扩展你的SRS并发能力?
当我们用SRS快速搭建了视频服务,业务也开始上线运行了,很快就会遇到一个问题:如何支持更多的人观看?如何支持更多的人推流?这本质上就是系统的水平扩展能力,SRS当然是支持的,而且有多种扩展的方法,这篇文章就就详细分析各种扩展的方案,以及各种方案的应用场景和优缺点。
2958 0
最佳实践:如何扩展你的SRS并发能力?
|
Java API Spring
史上最全AOP 切面表达式,看完逼格有提升了
史上最全AOP 切面表达式,看完逼格有提升了。源码已放开头了,请你查收。
1449 0
|
缓存 API 开发工具
几款优秀的点播、RTSP/RTMP直播播放器介绍
介绍:Ijkplayer 是Bilibili发布的基于 FFplay 的轻量级 Android/iOS 视频播放器。实现了跨平台功能,API 易于集成;编译配置可裁剪,方便控制安装包大小;支持硬件加速解码,更加省电;提供 Android 平台下应用弹幕集成的解决方案。
2520 0
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
162240 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
|
域名解析 监控 CDN
搭建SRS直播服务器
搭建SRS直播服务器涉及下载安装包,解压后运行`./INSTALL`安装。配置`srs.conf`文件调整服务器参数,如端口和带宽。使用OBS等工具推流,VLC等播放器或浏览器拉流。配置域名解析和CDN以优化访问。监控服务器状态并进行调优确保稳定性。参照官方文档和社区资源可获取详细指导。祝搭建成功!
973 9
|
7月前
|
弹性计算 开发者
【上云基础系列-01】如何把控公网带宽费,实现低成本用云(基于单体架构)
本文主要面向开发者,介绍在单体架构下如何巧妙选择服务器和公网产品方案,实现低门槛用云。针对个人开发者和企业不同需求,推荐使用阿里云的ECS、EIP和CDT组合方案,特别是CDT提供的200GB/月免费公网流量,帮助用户显著降低网络成本。该方案不仅适合个人开发者的低成本需求,也满足初创企业和大型电商平台的扩展要求。通过灵活配置服务,用户可以在保障性能的同时实现成本节约。
|
10月前
|
编解码 监控 网络协议
如何使用FFmpeg实现RTSP推送H.264和H.265(HEVC)编码视频
本文详细介绍了如何使用FFmpeg实现RTSP推送H.264和H.265(HEVC)编码视频。内容涵盖环境搭建、编码配置、服务器端与客户端实现等方面,适合视频监控系统和直播平台等应用场景。通过具体命令和示例代码,帮助读者快速上手并实现目标。
2568 6
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
648 8
|
数据采集 搜索推荐 开发者
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK(标题、描述、关键词),安装@nuxtjs/seo模块,以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称,Nuxt.js 3集成了很多SEOModules,使开发者能够更加高效便捷地做好搜索引擎方面的优化。
655 0
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
|
Web App开发 应用服务中间件 API
srs搭建rtmp流媒体服务器
srs搭建rtmp流媒体服务器
1516 0
srs搭建rtmp流媒体服务器

热门文章

最新文章