效果图

说明

腾讯的即时通信 IM 快速集成方案（Web）

即时通信 IM 快速集成方案（Web）-含 UI 快速集成方案（荐）-文档中心-腾讯云-腾讯云 (tencent.com)

因为im 集成方案需要检测设备环境的功能，所以找到了这两篇

React组件rtc-device-detector-react在vue项目中的使用 - 掘金 (juejin.cn)

在Vue项目中使用React组件，在React项目中使用Vue组件_CUG-GZ的博客-CSDN博客_vue使用react组件

安装配置

因为检测环境是react 组件: rtc-device-detector-react - npm (npmjs.com)

npm install rtc-device-detector-react

而im是vue 项目所以需要安装vuera库：www.npmjs.com/package/vue…

npm install vuera --save

react 依赖

npm install @babel/plugin-transform-react-jsx

babel.config.js 配置

module.exports = { plugins: ["@babel/plugin-transform-react-jsx"] };

src/main.js 使用 vuery 组件

import { VuePlugin } from 'vuera' 
Vue.use(VuePlugin)

引入修改

src/components/detector/detector.js react 组件

import React, {useEffect, useState} from 'react'
import DeviceDetector from 'rtc-device-detector-react'
import 'rtc-device-detector-react/dist/index.css'
import {getSdkAppId, getUserSig} from './utils'

export default function (props) {
    const {detectorVisible, setDetectorVisible} = props
    const [visible, setVisible] = useState(detectorVisible)
    const [networkDetectInfo, setNetworkDetectInfo] = useState({})
    const fetchData = async () => {
        const networkDetectInfo = {
            sdkAppId: getSdkAppId(),
            roomId: 999999,
            uplinkUserInfo: {
                uplinkUserId: 'uplink_test',
                uplinkUserSig: await getUserSig('uplink_test'),
            },
            downlinkUserInfo: {
                downlinkUserId: 'downlink_test',
                downlinkUserSig: await getUserSig('downlink_test'),
            },
        }
        setNetworkDetectInfo(networkDetectInfo)
    }
    useEffect(() => {
        fetchData()
    }, [])

    return (
        <DeviceDetector
            visible={visible}
            onClose={() => {
                setVisible(false)
                setDetectorVisible(false)
            }}
            hasNetworkDetect={true}
            networkDetectInfo={networkDetectInfo}></DeviceDetector>
    )
}

src/components/detector/detector.vue vue 组件

<template>
  <div v-if="detectorVisible">
    <Detector :detectorVisible="detectorVisible"
              @setDetectorVisible="setDetectorVisible"/>
  </div>
</template>

<script>
// 引入React组件
import Detector from './detector'

export default {
  components: {
    Detector
  }, data() {
    return {
      detectorVisible: false,//是否显示
      isDetector: false//首次是否检测过
    }
  },
  mounted() {
    this.$bus.$on('open-detector', () => {
      this.setDetectorVisible(true)
    })
    if (!localStorage.isDetector) {
      this.setDetectorVisible(true)
      this.isDetector = true
    }
  },
  methods: {
    setDetectorVisible(detectorVisible) {
      this.detectorVisible = detectorVisible
    }
  },
  watch: {
    isDetector(newIsDetector) {
      localStorage.isDetector = newIsDetector
    }
  }
}
</script>

src/components/detector/util.js 工具

/**
 * 获取腾讯用户签名
 * https://cloud.tencent.com/document/product/269/32688#.E6.9C.8D.E5.8A.A1.E7.AB.AF.E8.AE.A1.E7.AE.97-usersig
 * @param mzUserId
 * @returns {Promise<string|*|string>}
 */
export async function getUserSig(mzUserId) {
    let res = await getIMUserSig({userId})
    return res.userSig
}

/**
 * 获取腾讯应用ID
 * @returns {*}
 */
export function getSdkAppId() {
    return 0
}

src/index.vue 主页引入刚才自定义的组件

<template>
  <div class="container">
    <div>
      <group-live /><!--在直播组件下面添加-->
      <device />
    </div>
  </div>
</template>
<script>
import Device from '@/components/detector/device'
export default {
  components: {
    Device,
  },
}
</script>

src/components/layout/side-bar.vue 在退出按钮上面，添加检测按钮

<template>
  <div class="side-bar-wrapper">
    <div class="bar-left">
<div class="bottom">
  <div class="iconfont icon-zidingyi" @click="$bus.$emit('open-detector')" title="检测环境"></div>
</div>
<div class="bottom">
  <div class="iconfont icon-tuichu" @click="$store.dispatch('logout')" title="退出"></div>
</div>
    </div>
  </div>
</template>