Web在线音视频通话

前言

提示：这里可以添加本文要记录的大概内容：

一、需求分析

    由于项目招标,需要项目具有远程会诊模块,可以发起远程会议，桌面共享等功能。由于是紧急需求,周三提的需求,要周五完成。
完全自己开发显然不太可能了,所以就只能找第三方的厂商或者开源项目来接入了。

二、技术方案

经过一顿查找和对比，最后发现完全满足自己需求且费用较为合理的一家音视频服务商：即构科技。
选择他们家呢，有以下原因：

1、他们的计费方式是按使用量进行计费,非包年包月,我们的远程会诊使用量很低,相对来讲比较划算。

2、注册就送1万分钟的RTC时长，后续每月也会赠送免费时长, 非主要冷门业务需求,差不多也够用了。

3、有现成的SDK和Demo可以拿来就用,没有特别需求,可以拿来就用,不需要手动修改什么东西,时间充裕,也可以自定义。

4、除了音视频会议外,还支持白板,直播,一对一音视频通话、语聊房等功能,种类较多。

三、实现

一天半的时间，时间紧任务重，本着先解决有无的问题，所以打算在项目中集成他们提供的 音视频通话 UIKit 这个东西，无需开发界面，内部集成的有，拿来就用就好了，有问题可以联系他们的客服。

1、插件版本

"@zegocloud/zego-uikit-prebuilt": "^2.6.0",

2、前端全部代码

<template>
  <div id="app" ref="root"></div>
</template>

<script>
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
// get token
function generateToken(tokenServerUrl, appID, userID) {
  // Obtain the token interface provided by the App Server
  return fetch(tokenServerUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      app_id: appID,
      user_id: userID,
    }),
  }).then((res) => res.text());
}

function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(url = window.location.href) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default {
  name: 'App',
  components: {},
  mounted() {
    const roomID = getUrlParams().get('roomID') || randomID(5);
    const userID = randomID(5);
    const userName = randomID(5);
    // generate token
    generateToken(
      'https://mini-game-test-server.zego.im/api/token',
      2013980891,
      userID
    ).then((res) => {
      const token = ZegoUIKitPrebuilt.generateKitTokenForProduction(
        2013980891,
        res,
        roomID,
        userID,
        userName
      );
      // create instance object from token
      const zp = ZegoUIKitPrebuilt.create(token);
      // start the call
      zp.joinRoom({
        container: this.$refs.root,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
              window.location.origin +
              window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
        },
      });
    });
  },
};
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>

3、后端代码

四、示例截图