七牛WebRTN实时音视频应用开发实践
这篇文章将使用 Web SDK 详细地介绍一个可用的连麦应用搭建流程,并针对一些常见的问题和需求给出一套可用的解决方案。
目标
我们的目标是一个可以被用于产品的网页连麦应用,为了不让过程显得太复杂,我们将这个连麦的场景定为一对一连麦,也就是两人的在线视频通话。这篇教程将给这个一对一连麦应用实现如下功能:
- 基本的连麦功能
- 基本后端服务(使用 NodeJS)
- 纯音频连麦
- 自动订阅/发布
- 大小窗切换
- 绘制声波图
准备
如果您打算跟着这篇教程一步一步搭建自己的连麦应用,请首先确认完成了下方的开发准备:
- 拥有基本的 Javascript 开发经验,理解 Promise/async/await 等异步方案
- 一台拥有摄像头和麦克风的设备(usb 摄像头/麦克风也可以)并安装了最新的 Chrome 浏览器
- 完成 接入流程 ,拥有一个创建好的 app(建议将 app 的房间最大人数设置为 2 人)
开发流程概述
在正式进入开发流程之前,让我们先梳理一下接下来开发流程的大概结构。之后的篇幅会比较长,您可以根据整个流程结构选择阅读想要了解的细节,或者是对整个开发过程有个初步的认识。
整个开发过程分成 3 个部分,后端开发、连麦基本功能开发 和 应用功能完善。
后端开发将使用 NodeJS 配合七牛的 NodeJS SDK 来搭建一个简单的后台服务,负责计算 roomToken 提供给前端。
连麦基本功能开发会使用 Web SDK 完成一个基本的一对一通话功能。这里我们不会使用任何的 Web 开发框架,所有的代码都会是框架无关代码。
应用功能完善会一步一步完善我们目标中制定的所有功能,最终达成我们的目标。
好了,让我们正式进入开发流程吧。
说明
这里将使用 NodeJS 来开发我们实时音视频应用需要的后端服务,如果您不熟悉后端开发或者 NodeJS,可以先从这里 下载并安装 NodeJS 到您的机器。下面的代码不会很复杂,一个基本的后端服务是我们开发前端应用的基础,希望您可以按照流程完成后端开发的步骤。
首先简单介绍一下 roomToken,roomToken 是一个包含了一次连麦所需要的主要信息的 token,这些信息包括 七牛的账户标识、连麦的应用id(appId)、连麦的房间号(roomName)、连麦的用户名(userId)、连麦用户的权限(是否可以踢人)等等。这个 token 通过自己七牛账户的私钥进行加密,因为涉及到私钥加密,所以计算 roomToken 的工作不能放在客户端(前端), 所以这里我们需要搭建一个后台为我们计算 roomToken。
顺便也需要一个后台为我们的前端代码提供静态服务,所以这里我们的后端就是实现 2 个功能:
- 提供计算 roomToken 的接口
- 一个 http 静态服务
Express 静态服务
准备两个同级的文件夹 app 和 server,前者会放置我们的前端代码,后者放置我们的后端代码。我们首先起一个 Express 服务来为 app 文件夹提供 http 静态服务。
让我们首先进入 server 文件夹并打开命令行窗口(确保命令行目前在 server 目录下)
npm init # 初始化 npm,一直回车即可
npm install express --save
让我们在 server 目录下创建文件 index.js 写入如下代码
// index.js
const express = require('express');
const path = require('path');
const app = express();
// 在 app 文件夹开启静态服务
app.use(express.static('../app'));
app.listen(8888, () => {
console.log('Demo server listening on port 8888');
});
在刚刚的命令行里运行 node index.js
开启服务。看到 Demo server listening on port 8888
说明服务开启。
您可以尝试在 app 文件夹下创建一个 index.html
文件,一切正常的话访问 http://localhost:8888
就能看到您刚刚创建的 index.html
了
RoomToken 接口
计算 roomToken 是个复杂的过程,不过通过七牛的 NodeJS SDK 我们可以很快完成这个步骤(如果您想详细了解 roomToken 的计算过程,参见这里)。同上文所说,一个 roomToken 包含了一次连麦的主要信息,所以在计算 roomToken 之前我们需要前端给我们提供部分信息。这里主要包括 3 个信息:连麦的房间号、连麦的用户名、连麦用户的权限,其他信息比如 七牛账户信息、连麦 app 信息等都是在后端提前配置好固定下来的,不需要前端动态提供。
本篇教程出于简单考虑,默认给予所有用户 admin 的权限,即所有用户都有踢人的权限,方便我们后文演示功能。所以梳理下来,这个 roomToken 我们需要前端为我们提供 2 个信息,即 连麦房间号 和 连麦用户名。
继续在刚刚的命令行下输入以下命令,安装七牛的 NodeJS SDK
npm install qiniu --save # 安装七牛 NodeJS SDK
修改我们刚刚创建的 index.js,在文件末尾加入如下代码
// index.js
const qiniu = require('qiniu');
const QINIU_AK = '<填写您七牛账户的 AK>';
const QINIU_SK = '<填写您七牛账户的 SK>';
const QINIU_RTN_APPID = '<填写您的连麦 APPID>';
const QINIU_CREDENTIALS = new qiniu.Credentials(QINIU_AK, QINIU_SK);
app.get('/roomtoken/user/:userid/room/:roomname', (req, res) => {
const userId = req.params.userid;
const roomName = req.params.roomname;
const roomToken = qiniu.room.getRoomToken({
appId: QINIU_RTN_APPID,
roomName: roomName,
userId: userId,
expireAt: Date.now() + (1000 * 60 * 60 * 3), // token 的过期时间默认为当前时间之后 3 小时
permission: 'admin', // 默认所有的用户权限都是 admin,都可以踢人
}, QINIU_CREDENTIALS);
res.send(roomToken);
});
其中 AK/SK 在控制台界面 管理面板-密钥管理 里可以查看,连麦 APPID 为实时音视频云中您创建的连麦应用 ID。
一切顺利的话,再次启动后台,访问 http://localhost:8888/roomtoken/user/testuser/room/testroom 就能看到 roomToken的返回。
现在我们可以指定用户名和房间名构造一个请求来获取相应的 roomToken 了。
至此,我们完成了后台的开发工作。下面的代码我们暂定您的后台一直处于运行状态。
交互流程
让我们把工作区切到之前创建的 app
文件夹,现在轮到前端部分,我们的目标是搭建一个连麦应用。首先,我们先梳理这个应用的整个交互流程。整个应用分为 2 个页面,主页(负责输入用户名,采集参数等等信息),房间页面(加入连麦房间后显示的页面,主要为自己和远端的视频画面)。用户首先进入主页输入用户名和房间号,点击进入房间后我们通过这个信息通过后台获取 roomToken,获取成功后加入连麦房间加入第二个页面,开始连麦。
好的,让我们开始逐步完成这个流程
获取 Web SDK 并准备主页
这里我们不打算使用任何 web 开发框架,使用最传统的方式开发这个应用,所以我们通过直接引用 js 来引入 Web SDK。关于引入方式的细节,参照 引入方式。从 Github 上获取到 Web SDK 的最新代码,将其放置在 app/libs
文件夹下。
创建 app/js
文件夹并新建一个空白的 index.js
,我们将会在这里编写我们主页的 js 代码。
在 app
文件夹下创建如下的 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
</head>
<body>
<h1>Qiniu Web SDK Demo 1v1ver.</h1>
<p>请输入以下信息加入房间</p>
<form id="rtcroom">
<input id="userid" type="text" placeholder="请输入用户名" required />
<input id="roomname" type="text" placeholder="请输入房间号" required />
</form>
<button form="rtcroom">加入房间</botton>
<script src="./js/index.js"></script>
</body>
</html>
可以看到,主页就是一个简单的 form 表单,用户输入用户名和房间号,点击加入房间进入我们的下一个步骤。
加入房间
从加入连麦房间开始,就进入到连麦 SDK 负责的步骤了,我们使用这个 API 来 加入房间 。这个方法需要 roomToken 作为加入房间的参数,所以加入房间就分为了 2 个步骤:获取 roomToken、调用 SDK 加入房间。
回到我们之前的设计,在加入房间之后需要进入房间页面进行连麦的逻辑。所以这里涉及到一个页面跳转,如果我们在页面跳转之前就调用连麦 SDK 的 joinRoomWithToken
方法,页面跳转后下一个页面同步上一个页面的 SDK 状态就会比较复杂。所以这里我们让第一个页面能在获取到 roomToken 的时候就跳转页面,将 roomToken 带给下一个页面,然后在房间页面调用 SDK 避免复杂的状态同步。
// js/index.js
document.getElementById('rtcroom').onsubmit = joinRoom;