rtc-device-detector-react
v1.0.7
Published
rtc-device-detector-react 是腾讯云实时音视频 Web 端设备及网络检测公共组件, 使用 [React](https://react.docschina.org/) 框架,依托 [trtc-js-sdk](https://www.npmjs.com/package/trtc-js-sdk) 以及 [rtc-detect](https://www.npmjs.com/package/rtc-detect) 完成公共组件开发。rtc-device-detector-react 支持网络
Downloads
147
Readme
rtc-device-detector-react 是腾讯云实时音视频 Web 端设备及网络检测公共组件, 使用 React 框架,依托 trtc-js-sdk 以及 rtc-detect 完成公共组件开发。rtc-device-detector-react 支持网络检测可选,支持中英文两种语言,同时提供 github 源码 以供参考和使用。
安装
yarn add rtc-device-detector-react
or
npm install rtc-device-detector-react
使用
import React, { useState, useEffect } from 'react';
import DeviceDetector from 'rtc-device-detector-react';
import 'rtc-device-detector-react/dist/index.css';
import { getUserSig } from './utils';
export default () => {
const [visible, setVisible] = useState(false);
const [networkDetectInfo, setNetworkDetectInfo] = useState({});
useEffect(() => {
const networkDetectInfo = {
sdkAppId: 'xxxxx',
roomId: 999999,
uplinkUserInfo: {
uplinkUserId: 'uplink_test',
uplinkUserSig: getUserSig('uplink_test'),
},
downlinkUserInfo: {
downlinkUserId: 'downlink_test',
downlinkUserSig: getUserSig('downlink_test'),
},
}
setNetworkDetectInfo(networkDetectInfo);
}, []);
return (
<DeviceDetector
visible={visible}
onClose={() => setVisible(false)}
hasNetworkDetect={true}
networkDetectInfo={networkDetectInfo}></DeviceDetector>
);
};
参数
| 参数 | 类型 | 说明 | | :---------------- | :------- | :----------------------------------------------------------- | | visible | Boolean | 控制是否展示设备检测弹窗 | | onClose | Function | 设备检测弹窗关闭的回调函数 | | lang | String | 'zh-CN'|'en', 用来指定设备检测语言类型,默认为'zh-CN'(中文) | | audioUrl | String | 扬声器检测时播放的音频地址,默认为声音测试语音 | | hasCameraDetect | Boolean | 默认值为true, 是否包含摄像头检测(适用于语音通话检测场景), 自 v1.0.5 版本支持 | | hasNetworkDetect | Boolean | 默认值为true, 是否包含网络检测 | | networkDetectInfo | Object | 网络检测进房参数,如hasNetworkDetect为false,则不需要传入networkDetectInfo |
网络检测参数说明
| 属性 | 类型 | 说明 | | :------------------------------------------------- | :--------------- | :----------------------------------------------------------- | | networkDetectInfo.sdkAppId | Number | 设备及网络检测 sdkAppId ,涉及进房推流,建议申请单独的 sdkAppId 用于设备及网络检测 | | networkDetectInfo.roomId | Number | String | 网络检测进房房间号 | | networkDetectInfo.uplinkUserInfo.uplinkUserId | String | 设备及网络检测上行 useId | | networkDetectInfo.uplinkUserInfo.uplinkUserSig | String | 设备及网络检测上行 userSig | | networkDetectInfo.downlinkUserInfo.downlinkUserId | String | 设备及网络检测下行 userId,注意务必与上行 userId 不相同 | | networkDetectInfo.downlinkUserInfo.downlinkUserSig | String | 设备及网络检测下行 userSig |
扬声器检测说明
Firefox、 Safari 浏览器以及 iOS 设备微信内置浏览器不支持获取扬声器列表,因此在以上浏览器中未做扬声器设备的检测。但扬声器依然可以正常使用的,浏览器会自动选择相关的扬声器设备用于播放声音。
网络检测说明
rtc-device-detector-react 使用两个不同用户进入同一个 TRTC 房间的方式检测当前用户到 TRTC 后台服务器之间的网络延时和网络质量等级,因此需要使用方传入 sdkAppId, roomId, userId 以及 userSig 信息。
详细检测流程请参考:检测通话前的网络质量。
检测过程将产生少量的基础服务费用。默认以 640*480 的分辨率推流。
networkDetectInfo.sdkAppId
rtc-device-detector-react 在网络检测阶段需要进房推拉流确认用户上下行网络质量,如使用网络检测,建议在 实时音视频控制台/应用管理 中为网络检测申请新的 sdkAppId,避免和线上业务发生用户被踢,其他用户进房等情况。
networkDetectInfo.roomId
roomId 为 Number类型时,取值要求为 [1, 4294967294] 的整数; roomId 为 String 类型时,限制长度为64字节,且仅支持以下范围的字符集:
大小写英文字母(a-zA-Z);
数字(0-9);
空格、"!"、"#"、"$"、"%"、"&"、"("、")"、"+"、"-"、":"、";"、"<"、"="、"."、">"、"?"、"@"、"["、"]"、"^"、"_"、" {"、"}"、"|"、"~"、",";
networkDetectInfo.uplinkUserInfo.uplinkUserId / networkDetectInfo.downlinkUserInfo.downlinkUserId
请务必保持
networkDetectInfo.uplinkUserInfo.uplinkUserId
与networkDetectInfo.downlinkUserInfo.downlinkUserId
的值不一致,且尽可能相关联。举例:要对 userId 为 '123' 的用户进行网络检测,则
networkDetectInfo.uplinkUserInfo.uplinkUserId
为 '123_uplink',networkDetectInfo.downlinkUserInfo.downlinkUserId
为 '123_downlink'。注意:建议限制长度为32字节,只允许包含大小写英文字母(a-zA-Z)、数字(0-9)及下划线和连词符。
networkDetectInfo.uplinkUserInfo.uplinkUserSig / networkDetectInfo.downlinkUserInfo.downlinkUserSig
获取 userSig 的方式请参考 Usersig相关问题。
建议签名过期时间不要设置的过短,造成用户在网络检测时进房失败,同时也不要设置的过长,防止被黑产利用。请根据业务需要酌情处理。