开发准备
接入流程
在开始编写代码之前,请先确认您已经对这个产品有了大概的了解,并且已经完成了 七牛实时音视频云接入流程。
当您已经可以随时生成实时音视频云的 RoomToken 时(在控制台手动生成,或者调用后端生成都可以), 就认为完成了接入流程,可以准备开发工作了
引入 SDK
我们提供了两种引入方式,您可以直接下载 JS 文件,也可以通过 npm
完成引入
NPM 安装
运行下方的命令即可通过 npm
引入我们的 SDK
npm install --save pili-rtc-web
如果想要更新到最新版本或者指定版本,运行下列命令
npm install --save pili-rtc-web@latest # 最新版本
npm install --save pili-rtc-web@2.0.0 # 指定版本
我们更加推荐您使用 yarn 来管理 npm 模块
通过yarn add pili-rtc-web
引入 SDK,通过yarn add pili-rtc-web@latest
来更新版本
安装好后,运行以下代码访问 SDK 所导出的模块和对象
import { TrackModeSession, deviceManager, version } from "pili-rtc-web";
console.log("current version is", version);
注意 SDK 没有使用 export default
, 所有的模块都需要在 import
内通过 {}
访问
如果您不喜欢这种写法,可以稍作修改
import * as QNRTC from "pili-rtc-web";
console.log("current version is", QNRTC.version);
运行时看到打印的 current version
表示引入成功
注意!我们默认提供的是 没有 polyfill 的 ECMAScript 5 代码,以
CommonJS 模块
格式导出。
直接导入 JS 文件
每次发布版本,我们都会将最新的 SDK JS 文件放在我们的 Github 上,点击链接即可获取当前最新的 SDK JS 文件。 所以,每次想要升级版本时,只需要访问我们的 Github 页面,然后替换一下自己的 js 文件即可。
如果想要使用特定版本的 SDK,可以访问我们 Github 的 Release 页面查看。
SDK 的 JS 文件在导入页面后,会自动创建一个全局对象 QNRTC
,这个对象的成员包括了 SDK 所导出的所有模块和对象。
// 当页面资源加载完成后
window.onload = () => {
console.log("current version is", QNRTC.version);
}
运行时看到打印的 current version
表示引入成功。
注意,浏览器只允许 localhost 或者 https 页面访问媒体设备(摄像头等),请在之后的开发和上线中注意这一点。
关于 async/await
需要您注意的是,SDK 在对外 API 以及之后的示例中都会默认使用 async/await 的异步方案。如果您对 Promise/async/await 完全不了解,建议您阅读这篇 入门攻略,下面我将简单介绍一下。
我们以最常用的异步操作 setTimeout
为例,分别介绍 3 种异步方案。这里我们编写了 2 个函数,功能都是调用 setTimeout
然后 1s 后执行相关代码。前者是我们最常用的 Callback 模式,后者是一个 Promise
。
const setTimeoutCallback = (callback) => {
setTimeout(callback, 1000);
}
const setTimeoutPromise = () => new Promise(resolve => {
setTimeout(resolve, 1000);
})
然后我们利用上面的函数分别用 3 种异步方案实现这样一个需求 —— 每隔一秒钟打印一行字,重复 3 次。
// callback
setTimeoutCallback(() => {
console.log("text!");
setTimeoutCallback(() => {
console.log("text!");
setTimeoutCallback(() => {
console.log("text!");
});
});
});
// promise
setTimeoutPromise()
.then(() => {
console.log("text!");
return setTimeoutPromise();
}).then(() => {
console.log("text!");
return setTimeoutPromise();
}).then(() => {
console.log("text!");
});
// async/await
(async () => {
await setTimeoutPromise();
console.log("text!");
await setTimeoutPromise();
console.log("text!");
await setTimeoutPromise();
console.log("text!");
})();
可以看到,在这种场景下 async/await 的写法会更加简洁优雅。而在我们的 SDK 中,大部分都是这种串行异步的场景,所以我们推荐使用 async/await 的写法。