Kit-DeviceCheck-Web

会前检测组件

下载依赖

$ npm install kit-devicecheck-web react react-dom antd --save

使用

import { DeviceCheck } from 'kit-devicecheck-web'

const App = () => {
  return (
    <DeviceCheck {...props}/>
  )
}

// props声明：
interface DeviceCheckProps {
  cameraId: string // 摄像头设备id
  microphoneId: string // 麦克风设备id
  speakerId: string // 扬声器设备id
  appkey?: string // 音视频appkey
  debug?: boolean // 是否开启debug
  header?: React.ReactChild // 自定义header
  okText?: string // 底部确定按钮文案
  onOk?: () => void // 底部确定按钮点击事件
  auidoUrl?: string // 扬声器检测音频地址
  onCameraChange?: (deviceId: string) => void // 摄像头切换事件
  onMicrophoneChange?: (deviceId: string) => void // 麦克风切换事件
  onSpeakerChange?: (deviceId: string) => void // 扬声器切换事件
  onCameraOptionChange?: (old: Device[], cur: Device[]) => void // 摄像头插拔事件
  onMicrophoneOptionChange?: (old: Device[], cur: Device[]) => void // 麦克风插拔事件
  onSpeakerOptionChange?: (old: Device[], cur: Device[]) => void // 扬声器插拔事件
  onError?: (err: { code: number; msg: string }) => void // 错误事件
  theme?: { // 主题定制
    footerStyle?: React.CSSProperties // 底部footer样式
  }
}

其他方法

import { render, getDefaultDevices } from 'kit-devicecheck-web'

// render 用于在非react框架中渲染
const view = document.getElementById('view')
render(view: HTMLElement, props: DeviceCheckProps)

// getDefaultDevices 获取默认的设备，一般用于初始化时传入到组件中
getDefaultDevices().then(res => {
  console.log(res.cameraId)
  console.log(res.microphoneId)
  console.log(res.speakerId)
})

除此之外，组件还提供了 commonjs 与 umd 的输出方式。

// commonjs
const {
  DeviceCheck,
  render,
  getDefaultDevices,
} = require('kit-devicecheck-web')

// umd
const { DeviceCheck, render, getDefaultDevices } = window.NEDeviceCheck

onError 错误码

const errors = {
  GET_CAMERAS_FAIL: {
    code: 100,
    msg: '获取摄像头失败',
  },

  GET_MICROPHONES_FAIL: {
    code: 101,
    msg: '获取麦克风失败',
  },

  GET_SPEAKERS_FAIL: {
    code: 102,
    msg: '获取扬声器失败',
  },

  INIT_STREAM_FAIL: {
    code: 103,
    msg: '初始化stream失败',
  },

  SWITCH_DEVICE_FAIL: {
    code: 104,
    msg: '切换设备失败',
  },

  PLAY_AUDIO_FAIL: {
    code: 105,
    msg: '播放音频失败',
  },

  STOP_AUDIO_FAIL: {
    code: 106,
    msg: '停止播放音频失败',
  },

  PLAY_VIDEO_FAIL: {
    code: 107,
    msg: '播放视频失败',
  },

  STOP_VIDEO_FAIL: {
    code: 108,
    msg: '停止播放视频失败',
  },
}

定制主题

组件使用了 antd 来开发 UI，因为 antd 是外置依赖，所以可以直接在工程中通过设置 antd 的主题来设置组件的主题。 具体参考：antd 主题定制

FAQ

如果遇到样式丢失问题，需要手动导入 antd 的样式

import 'antd/dist/index.less'

组件预览