pili-engineering / qnrtc-web

QNRTCWeb 是七牛云推出的一款适用于 Web 平台的实时音视频 SDK，提供了包括音视频通话、静音、发布、订阅多种功能，提供灵活的接口，支持高度定制以及二次开发。

1 概述

QNRTCWeb 是七牛云推出的一款适用于 Web 平台的实时音视频 SDK，提供了包括音视频通话、静音、发布、订阅多种功能，提供灵活的接口，支持高度定制以及二次开发。

QNWebRTC 4.x 是在 2.x 的基础上进行了 API 的重构和优化。从而使使用者能够更加高效的接入，所以新接入的用户推荐使用最新版本的 SDK。
使用 2.x 版本的用户若想升级至 4.x 版本，可参考 4.x版本迁移指南 进行升级。

2 功能列表

• 基本的音视频通话功能
• 支持内置音视频采集
• 支持合流配置
• 支持 Typescript
• 支持大部分主流桌面浏览器
• 支持踢人功能
• 支持静音功能
• 支持帧率配置
• 支持音视频码率的配置
• 支持屏幕共享/窗口共享
• 支持外部音频导入
• 支持 USB 外置媒体设备
• 支持 Mac Safari(11.0以上)
• 支持视频尺寸配置
• 支持自动重连
• 支持丰富的消息回调
• 支持纯音频互动
• 支持视频的大小窗口切换
• 支持背景音乐混音功能
• 支持实时音量等级获取

3 方案介绍

七牛实时音视频云支持低延时音视频通话，提供灵活丰富的接口，方便进行二次开发。该系统主要包括服务端和客户端两个部分，其中，服务端主要提供了房间管理、权限验证、信令和媒体数据转发等功能，客户端则提供了媒体数据的采集、编解码、传输、渲染等功能。

3.1 系统框图

整个系统的架构如上图所示，主要分为三个部分：

• 客户端 SDK

  主要负责客户端的音视频采集、渲染、滤镜处理、编解码、传输等工作，客户可以快速集成到自己 App 中，让自己的应用具备音视频通话的能力

• 服务端 REST API 和 SDK

  主要提供房间管理、状态回调等基本的业务功能，另外还提供鉴黄鉴暴、质量分析等配套功能

• 服务器

  主要负责信令交互、音视频传输、代理加速等工作，保证音视频互动延时低，可用性高

3.2 交互流程

实时通话交互流程如上图所示，因此，App 服务端需要开发的工作如下：

• 为用户创建通话房间，并将通话房间和对应主播的 Id 关联起来
• 计算加入房间的 roomToken 并提供给 App，该 roomToken 是结合 userId、roomName 等信息使用七牛的 AccessKey 和 SecretKey 按照一定的规则生成
• 提供通话的业务逻辑，如：通话请求/应答业务逻辑、服务端房间管理和踢人等

关于 roomToken 的计算方法请查阅《七牛实时音视频云服务端 API 接口规范》，另外，我们也提供了多种开发语言的 SDK 服务端开发手册及 SDK 下载。

3.3 房间管理

关于音视频通话房间的 API 主要分为两个部分，一部分在客户端，另一部分在服务端。在客户端 SDK 中，只有加入/离开连麦房间的接口。我们把创建/销毁连麦房间的功能放到了服务端，由 App Server 向七牛的服务器发送请求来完成。关于服务端 API 的详细内容，请查阅《七牛实时音视频云服务端 API 接口规范》。

4 方案优势

• 实时互动对网络的稳定性和连通性要求非常苛刻，所以必须购买数据中心建设基础网络。而使用七牛的实时音视频云服务，不需要投入大量资金做传输网络的基础建设，按量计费灵活方便。
• 经验丰富的音视频团队提供稳定、易用的客户端 SDK，保证了客户端应用开发的效率和可用性。
• 完整的音视频产品线，使用七牛的实时音视频云服务的同时可以无缝接入七牛其他的所有服务，例如短视频、直播、存储、大数据分析等服务。

5 应用场景

5.1 主播连麦

• 支持主播之间连麦一起直播，带来与传统单向直播不一样的体验
• 48KHz 采样率、全频带编解码以及对音乐场景的特殊优化保证观众可以听到最优质的声音

5.2 视频会议

• 小范围实时音视频互动，提供多种视频通话布局模板，更提供自定义布局方式，保证会议发言者互相之间的实时性，提升普通观众的观看体验
• 提供七牛云自有的直播分发服务，可实现 HLS、RTMP、HTTP 等多种直播分发形式，支持更多人通过拉取直播流收看会议内容，适合大型的企业在线会议
• 支持动态邀人，踢人、禁音，禁视会议权限分级控制
• 客户可以利用七牛实时音视频云轻松做出一款类似 WebEx 的应用

5.3 一对一社交

• 客户可以利用七牛实时音视频云实现 QQ、微信、陌陌等社交应用的一对一视频互动
• 提供七牛云自有的直播分发服务，可实现 HLS、RTMP、HTTP 等多种直播分发形式，画面清晰、声音清晰不卡顿

5.4 狼人杀游戏

• 支持 12 人视频通话，玩家可在游戏中选择只开启语音或同时开启音视频
• 提供七牛云自有的直播分发服务，可实现 HLS、RTMP、HTTP 等多种直播分发形式，音视频体验稳定流畅，不卡麦，不黑麦

5.5 在线教育

• 自定义的视频布局功能允许开发者按照自己的业务需求调整老师和学生的显示位置
• 旁路直播功能加上直播云的直播功能，实现观众人数无上限，让更多学生享受在线教育的便利
• 搭配使用聊天室功能，文字、语音、图片、视频包括自定义消息等，更多的互动方式有效提升课堂氛围
• 服务端录制对接点播平台，支持课程录制以及在线回放，让优质资源服务更多学生

5.6 在线抓娃娃

• 娃娃机端，通过主板或 PC 机连接两个摄像头，采集视频数据
• 通过编码器编码，进行视频流的优化，通过实时流网络进行视频实时传输，最后到达操作端，解码、播放
• 操作端通过业务 Server 将操控指令发送给娃娃机端，通过视频流获得实时反馈
• 采用 WebSocket 技术，结合成熟稳定的直播云端，突破了 HLS 高延迟的技术限制，同时还能保持 H5 的传播便捷特性

5.7 在线客服

• 线上开展音视频对话，对客户的资信情况进行审核，方便金融科技企业实现用户在线签约、视频开户验证以及呼叫中心等功能
• 提供云端存储空间及海量数据的处理能力，提供高可用的技术和高稳定的平台

6 开发文档

请参考开发文档：QNRTCWeb 开发文档

7 反馈及意见

当你遇到任何问题时，可以通过在 GitHub 的 repo 提交 issues 来反馈问题，请尽可能的描述清楚遇到的问题，如果有错误信息也一同附带，并且在 Labels 中指明类型为 bug 或者其他。

通过这里查看已有的 issues 和提交 Bug

8 FAQ

8.1 如何体验 Demo？

您可以直接使用主流浏览器(Firefox 50+, Safari 11+, Chrome 56+)访问我们 Web 版 Demo 来体验通话效果

8.2 实时通话功能是否收费？

客户端 SDK 不收费，服务端可按照带宽、流量或者时长收费，具体请联系七牛商务或者技术支持。

8.3 实时通话对讲延时多大？

正常网络条件下，对讲延时在 200-300ms 左右。

8.4 是否有服务端的 SDK 或者 demo 代码可以参考？

有的，请参考： QNRTC-Server

qnrtc-web's Issues

请问互动白板的源码后期会贴上来吗？

DEMO源码有互动白板就好了😄

Firefox参加会议失败，Chrome成功

这是两家的对比

vue2.5 + chrome 71 + SDK1.2.4 运行报错

rtc.publish(stream) 时，出现的错误
Uncaught (in promise) 1st argument is not instance of RTCPeerConnection.

移动端unified-plan报错

回音杂音问题

回音杂音怎么处理，你们echoCancellation和noiseSuppression不管用，有没有好的处理办法

想在electron平台上用该sdk， 但是打开摄像头的时候报错。

报错信息：Could not start audio source。
SKD版本，2.1。
electron版本：4.1.3。

web 只采集音频，小程序方接收不到声音

QNRTC.deviceManager.getLocalStream({
audio: { enabled: true },
video: { enabled: false },
});

编译报错

报错信息
plugin directly instead
i ｢wds｣: Project is running at http://localhost:4000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\qiniu\workspace\QNRTC-Web-master\Demo\public
i ｢wds｣: 404s will fallback to /index.× ｢wdm｣: 720 modules

ERROR in F:\qiniu\workspace\QNRTC-Web-master\Demo\src\app\components\RemotePlayer\index.tsx
./app/components/RemotePlayer/index.tsx
[tsl] ERROR in F:\qiniu\workspace\QNRTC-Web-master\Demo\src\app\components\RemotePlayer\index.tsx(35,30)
TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLVideoElement | HTMLAudioElement'.
Type 'HTMLElement' is not assignable to type 'HTMLAudioElement'.

ERROR in F:\qiniu\workspace\QNRTC-Web-master\Demo\src\app\components\RemotePlayer\index.tsx
./app/components/RemotePlayer/index.tsx
[tsl] ERROR in F:\qiniu\workspace\QNRTC-Web-master\Demo\src\app\components\RemotePlayer\index.tsx(41,30)
TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLVideoElement | HTMLAudioElement'.
Type 'HTMLElement' is not assignable to type 'HTMLAudioElement'.

屏幕共享

屏幕共享变得模糊了

UC浏览器手机版本 20201214，RTCPeerConnection类不存在，导致加入房间卡住

如上图所示，这里报该类不存在，其他版本浏览器正常，目前是UC手机浏览器出这个问题

支持移动端展示

1.支持移动端
2.新增切换前后置摄像头的逻辑
3.修复挂断后切换设备后会自动呼叫的为你

编译报错v2.2.0

关于web端2.0SDK，在推流端本地流切换时，用户端出现卡顿黑屏问题

由于在2.0的SDK中：

每次切换流时（摄像头和屏幕切换），都需要先release和unpublish当前的流，然后在publish新的流，在这个过程中用户端就会出现卡顿、黑屏的一瞬间，用户体验较差。

是否可以提供流替换的api，方便每次切换流时不用重复的release和unpublish，以解决黑屏卡顿问题。

Uncaught (in promise) TypeError: r.webkitGetUserMedia is not a function

An error occurs when the following statement is executed:
const localTracks = await QNRTC.createMicrophoneAndCameraTracks();

Excuse me, what is the reason and how to solve it?

跟着文档一步一步来报了这个错是啥意思呢

npm start报错

请问如何以低清晰度显示订阅的高清流？

订阅到的是1080P高清流，如何以720P调用play方法？

pc网页接口sdk的Stream模式，语音回音超级大

我发现接入以后，pc和ios端语音聊天，ios端没有回音，但是web端，有很大回音，请问该怎么处理

魅族 MX4 Pro android 5.1.1 发布的视频流在pc端不显示，pc端会成功订阅此视频流。

web-sdk 使用官网demo订阅时一直黑屏

请问支持微信小程序吗？

微信小程序是否可以使用Web SDK，还是有专门的小程序SDK？

css可以这样写报错

.container {
overflow: hidden;
width: 200px;
height: 150px;
position: relative;
margin: 0 2px;

video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover !important;
z-index: 9;
}
}

webSDK 2.4.1 track.getStats()方法手动调用返回空数组

想要获取网络质量，但是调用此方法返回的是空数组。

文档有写到【获取当前 Track 的传输状态数据，SDK 内部会每秒更新一次。】这个自动执行的结果，怎样可以拿到呢？

iOS上 12.3的 Safari 和 74的Chrome都无法拉取远端流

我用mac的Safari访问，获取到的远端流如下截图

但在iOS上就是这样

iOS上track为undefined，然后就报错了

[Error] subscribe error – Error: piliRTC: unexpected error remote track not found
Error: piliRTC: unexpected error remote track not found

Chrome的调试日志我稍后放出

v2.0.0 js 文件中包含对象扩展运算符导致编译报错

在使用 vue-cli 生成的项目中，使用 npm 添加 v2.0.0 版本的 pili-rtc-web ，编译会报错。因为对象扩展运算符是 ES-2018 中提出的语法，在编译过程中未能被识别。想要在项目中支持 node_modules 中 js 文件的编译需要很大的调整，十分的不友好。希望能在输出的文件中所使用的语法尽量只使用 ES-2015 所支持的语法。

TrackModeSession.handlePlayerOut 报错。

这个好像是用户退出的事件回调中有问题。
TrackModeSession.handlePlayerOut

renderer.js:39 message: Uncaught TypeError: Cannot read property 'userId' of undefined source: C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\pili-rtc-web\build\index.js
window.onerror @ renderer.js:39
renderer.js:39 TypeError: Cannot read property 'userId' of undefined
    at C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\pili-rtc-web\build\index.js:1
    at remove (C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\lodash.remove\index.js:1804)
    at TrackModeSession.handlePlayerOut (C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\pili-rtc-web\build\index.js:1)
    at SignalingWS.emitEvent (C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\wolfy87-eventemitter\EventEmitter.js:394)
    at SignalingWS.emit (C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\wolfy87-eventemitter\EventEmitter.js:421)
    at SignalingWS.receiveWsMsg (C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\pili-rtc-web\build\index.js:1)
    at WebSocket.SignalingWS.onWsMsg (C:\Users\cricket\AppData\Local\Programs\yun-mai\resources\app.asar\node_modules\pili-rtc-web\build\index.js:1)
window.onerror @ renderer.js:39

Web SDK手机端不能用

PC端chrome和chrome视频正常，手机端chrome和chrome不行，报错，RTCPeerConnection连接无法建立。

npm start 后报错

Can't resolve '@babel/runtime/core-js/object/keys' 提示balel里对应的文件找不到

track模式web客户端互相推音频流，收不到声音

获取标签后，播放本地audio。在另一个web客户端上可以看到 audio标签已经生成。但是无法听到声音！！
localTrack.play(localElement, true);

ws里很多restart消息，无法推拉流，请问是什么原因呢？

正常能推拉流的ws消息长这个样子

但今天客户公司在他们的网络环境下，用他们提供的win7 sp1联想笔记本，Chrome 73，无法推拉流，ws里一直都是***-restart的消息。同样的网络下，我用ipad的safari和chrome可以推拉流(chrome不能推，可能是权限问题)，app可以推拉流。

我开始以为是win7有问题，但回来后自己装了个win7，是好的，可以推拉流。

所以想问一下，一直出现***-restart消息是啥原因？准备从这方面入手。

停止共享

用户手动停止共享，有没有监听函数，目前仅打印警告

node 6.x版本中，执行npm run start报错。Module parse failed: Unexpected token (1:61399)

安装的是2.2.0版本，定位到第1行第61399列后是const r={...e}，2.2.1版本也是报错，2.2.0-alpha.4版本是正常的。
扩展运算符在Node 6.x版本中暂不支持。

piliRTC.joinRoomWithToken return 401 error code

piliRTC.joinRoomWithToken return 401 error code, what meaning?

chrome 69 报错

系统：macOS 10.13
浏览器：chrome 69
错误信息：
DOMException: Failed to execute 'addTransceiver' on 'RTCPeerConnection': This operation is only supported in 'unified-plan'. 'unified-plan' will become the default behavior in the future, but it is currently experimental. To try it out, construct the RTCPeerConnection with sdpSemantics:'unified-plan' present in the RTCConfiguration argument.

经测试，之前的chrome版本正常

项目打包完后放iiss服务器上，访问index.html页面空白

npm run-script build
项目布置到iss后访问页面空白。没有报错。
资源都可以找到

开启了https，谷歌上还是报错无法打开摄像头，火狐浏览器可以

Uncaught (in promise) DOMException: Could not start audio source 报错信息是这个，火狐浏览器能正常进行

websdk连接到七牛云房间服务器的websocket断开了，close后会自动重连吗？

一定要刷新页面，再重新进入房间吗？

切换摄像头

我如果要切换摄像头，需要怎么操作呢

Chrome 更新到 74.0.3729.108 后没有navigator.mediaDevices

navigator.mediaDevices返回undefined，所以navigator.mediaDevices.enumerateDevices()报错了

实现快速开始demo，远端无法看到本地的画面

nom start 之后报错，麻烦处理一下

Failed to compile
/Users/aba/Downloads/QNRTC-Web-2.1.0/Demo/src/pages/settings.tsx
Type error: Type '{ children: Element[]; value: "288p" | "480p" | "540p" | "720p"; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'children' does not exist on type 'IntrinsicAttributes & Props'. TS2322

109 |       <Grid item container wrap="nowrap" justify="center" spacing={16}>
110 |         <Grid item>

111 | <Select
| ^
112 | value={roomStore.selectVideoConfig}
113 | onChange={(e) => roomStore.setSelectVideoConfig(e.target.value as keyof publishVideoConfigs)}
114 | >

是否支持ie 浏览器

是否支持ie 浏览器

v2.0+ stream模式和小程序互通 需要设置master吗

在ts文件import pili-rtc-web时，提示 “wolfy87-eventemitter/EventEmitter“ has no default export.

环境 ： typescript version: 3.6.3
提示如下：

node_modules/pili-rtc-web/build/core.d.ts(2,8): error TS1192: Module '"/Users/xxx/development/upfm/upfm-websocket/node_modules/wolfy87-eventemitter/EventEmitter"' has no default export.
node_modules/pili-rtc-web/build/device.d.ts(1,8): error TS1192: Module '"/Users/xxx/development/upfm/upfm-websocket/node_modules/wolfy87-eventemitter/EventEmitter"' has no default export.

一引入就报window.MediaStreamTrack.getSources is not a function 是怎么回事？

import * as media from 'pili-rtc-web'

这样一引入 就如标题报错了

如何从包装流对象stream里获取媒体流

每个客户端都可以获取到其他客户端的stream对象然后通过play在前端播放视频，如果我想将获取到的某个stream流对象里的媒体流进行推流，请问有什么api可以让我可以获取到该媒体流吗？

ffmpeg 循环推流本地rtmp正常，推流七牛rtmp服务失败

执行命令：

ffmpeg \
-re \
-stream_loop -1 \
-i https://******/20191228.mp4 \
-f flv "rtmp://*****/live/20200305?e=**&token=******"

Unbutu上运行的结果：

Mac OS上运行的结果：

外部音频导入时，订阅的track对象类型不再是AudioSourceTrack类型

使用外部音频导入时，在发布阶段一切正常，外部音频轨的类型还是AudioSourceTrack类型的对象，但是在订阅后拿到的轨道类型变成了普通的AudioTrack，然后就无法使用AudioSourceTrack封装的方法了

运行demo报错type error怎么回事？

Type error: Type 'string' is not assignable to type 'undefined'. TS2322

172 |                       type="number"
173 |                       onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {

174 | this.camera[inputItem.key] = e.target.value;
| ^
175 | })}
176 | value={this.camera[inputItem.key] as string}
177 | required

session.addMergeStreamTracks

多方连麦中，中途有线路接入，调用 session.addMergeStreamTracks

它是 async 异步方法，可是 await 调用，没有返回，没有异常。一直等待~~~