7.5. 音视频

7.5.1. 功能概述

本增值服务已整合腾讯云的 实时音视频 能力,通过云开发的云函数和数据库的能力,简化配置拉取和房间管理等功能。

7.5.2. 体验增值服务

7.5.3. DEMO 源码

本章的案例 代码 tcb-demo-video。 包含了小程序前端代码 (client 目录下)和云函数代码(cloud 目录下),需要在微信开发者工具中打开整个项目。 下面将详细介绍 DEMO 的接入流程。

7.5.4. DEMO 接入流程

  1. 登录 小程序的管理后台,选择 【设置】> 【基本设置】 > 【服务类目】中添加允许视频直播类的管理。

    https://main.qcloudimg.com/raw/0e318bae69e6912475ad7a81763bc5b8.png
  2. 在小程序管理后台选择【开发】> 【接口设置】中,将实时播放音视频流和实时录制音视频流打开。

    https://main.qcloudimg.com/raw/6e5a2678a8dc7c9d2658917c3c1ef1a0.png
  3. 在小程序管理后台选择【开发】> 【开发设置】中,配置以下域名:

https://main.qcloudimg.com/raw/8d45af53bbe1d4f85219dedf65cc637d.png
  1. 通过 微信公众号 登录小程序对应的腾讯云账号(需要小程序管理员权限), 然后在腾讯云官网单击 实时音视频,开通服务并购买体验包,进入控制台,并获取以下配置信息:

    • SDKAppid 和 accountType

      https://main.qcloudimg.com/raw/300ea0eb8cbd15a614c303b6f1508ba4.png
    • 下载公私钥(private_key)文件

      https://main.qcloudimg.com/raw/e17faec4233f466196ffd9a4a26fc366.png
  2. 请使用微信开发者工具打开 DEMO 源码,在根目录下的 project.config.json 文件,填写您的小程序 appid。

  3. 请按以下步骤完成操作。

    • 首先在云函数目录 cloud/functions 的函数 webrtc-sig-api 中,将 private_key 文件放到 config 目录下;

    • 其次在每个云函数目录的config目录下,参照example.js文件,新建 index.js 文件,并配置好 SDKAppid 和 accountType;

    • 再而上传部署所有的云函数;

    • 最后,在云开发面板的数据库栏目中,创建 webrtcRooms 集合。

    https://main.qcloudimg.com/raw/ad9a36f9dafde5721acf1b22499417cf.png
  4. 打开微信开发者工具直接预览即可。

7.5.5. 源码介绍

7.5.5.1. WebRTC 能力

WebRTC 的能力的体验,主要是围绕源码中 client/pages/webrtc-room 里面的 join-room 和 room 两个目录, 一个是手动输入房间号进入房间,另一个是视频房间 cloud/functions/webrtc-sig-api 目录, 此云函数主要用于填写实时音视频的配置后,进行信息加密,将加密好的信息传到小程序端,才能正常使用 WebRTC 视频通话能力。

云函数 webrtc-sig-api 中, WebRTCSigApi.js 是官方提供的 签名逻辑文件,而 index.js,调用 WebRTCSigApi.js 中的方法, 然后将 privateMapKey、userSig 提供到小程序,小程序端才能正常将直播流唤起。

7.5.5.2. 房间管理

房间管理主要通过云开发的云函数和数据库实现。webrtcRooms 集合的数据格式如下:

https://main.qcloudimg.com/raw/a2f41dbb8871a7c65571ef6ceb1a5159.png

数据包括有房间创建者和观众的 openid房间 ID 、房间名、房间创建时间,还有房间的权限位 privateMapKey。

云函数分别有创建房间(webrtc-create-room)、进入房间(webrtc-enter-room)、退出房间(webrtc-quit-room)、获取房间信息(webrtc-get-room-info)、获取房间列表(webrtc-get-room-list)云函数。

  • webrtc-create-room 函数主要用于创建房间,这里用到了数据库的读写,先要判断房间是否存在,如果不存在,则创建房间。

注解

该函数有一处逻辑,此处是通过循环的方式,去检查房间 ID ,以防生成了重复的 ID。

// 循环检查数据,避免 generateRoomID 生成重复的roomID
while (await isRoomExist(roomInfo.roomID)) {
    roomInfo.roomID = generateRoomID()
}
  • webrtc-enter-room 函数主要用于进入房间,如果房间存在,则将用户的 openid 写入房间观众字段, 如果房间不存在,则调用 webrtc-create-room 进行房间创建。

  • webrtc-quit-room 函数主要用于退出房间,如果房间还有观众,则将退出者的 openid 清除,如果没有观众了,则把房间数据清理掉。

  • webrtc-get-room-info 函数主要用于获取房间数据。

  • webrtc-get-room-list 函数主要用于获取房间列表数据。