本文详述使用七牛Web SDK构建一对一连麦应用的全过程，包括后端服务搭建、房间Token接口、交互流程、音视频功能实现，如自动订阅、大小窗切换和绘制声波图等。
七牛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;
最低0.47元/天 解锁文章
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
