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

SRS 流媒体服务器

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

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

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

后端服务

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

1. 主播获取推流地址和串流秘钥；
2. 获取房间信息（最主要是 streamKey）

C++音视频学习资料免费获取方法：关注音视频开发T哥，点击正在跳转即可免费获取2023年最新C++音视频开发进阶独家免费学习大礼包！

获取串流秘钥

使用 ApiSecret 从云 SRS 的 OpenAPI来获取秘钥，过程如下

以下是代码实现（忽略实体、配置等部分，只展示流程）

@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，代码如下（只是播放器相关部分，不是最终成品的代码）

成品展示

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

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

作者：枫景 链接：https://juejin.cn/post/7152397283248570404

#音视频开发##程序员##把地球的故事讲给宇宙#