rtc-device-detector-react 是腾讯云实时音视频 Web 端设备及网络检测公共组件, 使用 React 框架，依托 trtc-js-sdk 以及 rtc-detect 完成公共组件开发。rtc-device-detector-react 支持网络检测可选，支持中英文两种语言，同时提供 github 源码 以供参考和使用。

安装

1yarn add rtc-device-detector-react
2or
3npm install rtc-device-detector-react

使用

1import React, { useState, useEffect } from 'react';
2import DeviceDetector from 'rtc-device-detector-react';
3import 'rtc-device-detector-react/dist/index.css';
4import { getUserSig } from './utils';
5
6export default () => {
7  const [visible, setVisible] = useState(false);
8  const [networkDetectInfo, setNetworkDetectInfo] = useState({});
9
10  useEffect(() => {
11    const networkDetectInfo = {
12      sdkAppId: 'xxxxx',
13      roomId: 999999,
14      uplinkUserInfo: {
15        uplinkUserId: 'uplink_test',
16        uplinkUserSig: getUserSig('uplink_test'),
17      },
18      downlinkUserInfo: {
19        downlinkUserId: 'downlink_test',
20        downlinkUserSig: getUserSig('downlink_test'),
21      },
22    }
23    setNetworkDetectInfo(networkDetectInfo);
24  }, []);
25
26  return (
27    <DeviceDetector
28      visible={visible}
29      onClose={() => setVisible(false)}
30      hasNetworkDetect={true}
31      networkDetectInfo={networkDetectInfo}></DeviceDetector>
32  );
33};

参数

参数	类型	说明
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相关问题。

  建议签名过期时间不要设置的过短，造成用户在网络检测时进房失败，同时也不要设置的过长，防止被黑产利用。请根据业务需要酌情处理。