npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

149

Readme

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

img

安装

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.uplinkUserIdnetworkDetectInfo.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相关问题

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