使用GoEasy在uniapp下实现实时音视频通话附关键代码

GRTC （GoEasy Real-Time Communication）是GoEasy推出的新功能，用于协助开发者在uniapp下轻松实现一对一和多人场景下的实时音视频通话功能。

集成步骤

1. 配置云厂商音视频服务

GRTC功能依赖于云厂商的音视频服务，目前已集成七牛云音视频服务(每月免费5000分钟)，并计划未来支持更多云厂商。

具体请参考官网文档：https://docs.goeasy.io/2.x/rtc/qiniu/qiniu-rtc
【非常简单，几步搞定】

2. 下载依赖SDK和uniapp原生插件

GoEasy JS SDK下载：https://registry.npmjs.org/goeasy/-/goeasy-2.10.14.tgz
GRTC JS SDK下载：https://registry.npmjs.org/goeasy-rtc/-/goeasy-rtc-0.1.4.tgz
GRTC Uniapp原生插件下载：https://docs.goeasy.io/2.x/download/goeasy-rtc-uniapp-v0.1.0.zip

使用GoEasy在uniapp下实现实时音视频通话附关键代码

3. 编码集成音视频通话接口

温馨提示：
1. GRTC 的初始化必须在建立连接之前完成，否则GRTC将无法正常工作。
2. 在建立GoEasy连接时，务必传入当前用户的ID和数据。缺少用户ID将无法作为发起拨打的用户，也无法作为明确的用户接收来电。
3. GoEasy使用了标签来实时呈现视频图像，由于标签是基于Uniapp原生插件实现的，因此仅限于在nvue页面中使用，无法在vue页面中应用。拨打、响铃和通话等界面通常都要求实时展示视频图像，因此建议相关页面统一采用nvue页面。

文章中提到的所有代码，均可以在官网demo源码处下载，包含vue2 和vue3两种语法哦，下载地址：https://gitee.com/goeasy-io/goeasy-rtc-demo

好了，接下来将具体说说代码层面您需要写哪些必要的代码：

1. 在uniapp的main.js中引入sdk并初始化GoEasy和GRTC，然后将其挂载为全局对象。


import App from './App';
import GoEasy from './lib/goeasy-2.10.14.esm.min.js';
import GRTC from './lib/goeasy-rtc-0.1.4.esm.min.js'

GoEasy.init({
   
   
    host:"hangzhou.goeasy.io",//应用所在的区域地址: 【hangzhou.goeasy.io或者singapore.goeasy.io】
    appkey:"您的appkey",// 如何获取appkey和每种key的说明参考：https://docs.goeasy.io/2.x/common/account/developer-account
    modules: ['im'],
    // true表示支持通知栏提醒，false则表示不需要通知栏提醒
    allowNotification: true //仅有效于app,小程序和H5将会被自动忽略
});
GRTC.init(GoEasy);

uni.$GoEasy = GoEasy;
uni.$GRTC = GRTC;


// #ifdef VUE3
import {
   
    createSSRApp } from 'vue'
export function createApp() {
   
   
  const app = createSSRApp(App)
  return {
   
   
    app
  }
}
// #endif

2. 建立GoEasy连接


const GoEasy = uni.$GoEasy;
const GRTC = uni.$GRTC;
onShow(() => {
   
   
 	if (GoEasy.getConnectionStatus() === 'disconnected') {
   
   
      GoEasy.connect({
   
   
      id: 'User1',//必填
      data: {
   
   //必填，成员数据对象，可以任意定义属性
        name: 'Mattie',
        avatar: '/image/mattie.jpg'
      },
      onSuccess: () => {
   
   
        console.log('GoEasy connect successfully.')
      },
      onFailed: (error) => {
   
   
        console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error.content);
      },
      onProgress: (attempts) => {
   
   
        console.log('GoEasy is connecting', attempts);
      }
    });
   }
 });

用户data信息录入GoEasy小技巧：
前端只有建立GoEasy连接时才能传入data，如果用户修改头像后想要更新GoEasy这边的头像时，可以调用GoEasy提供的注册成员data的rest 接口：
方法： POST
URL： http://rest-hz.goeasy.io/v2/memberdata
请求头： Content-Type: application/json
请求体：


{
   
   
  "appkey": "您的appkey", // 应用appkey
  "id": "User1", // 成员id
  "data": {
   
   "name": "Mattie", "avatar": "/images/Avatar-2.png"} //成员数据对象，可以任意定义属性
}

3. 一对一通话实现

3.1. 【拨打】发起一对一通话


GRTC.call({
   
   
          calleeId: 'User2',
          mediaType: 1,//0:音频通话 1:视频通话
        }).then(() => {
   
   //呼叫成功
          uni.navigateTo({
   
   //一般都是调转到拨打页面
            url: `./rtc/private/dial`,
          })
        }).catch((error)=>{
   
   //呼叫失败，会返回具体失败原因
          console.log("呼叫失败:", error);
          uni.showToast({
   
   
            icon: "none",
            title: "呼叫失败",
            duration: 2000
          })
        })
      },
      fail: (res) => {
   
   
        console.log(res.errMsg);
      }
    });

3.2. 【通话页面渲染】拨打、响铃、通话情况

通过调用GRTC.currentCall() 获取当前通话对象，以便在页面上呈现拨打方、接听方的信息、通话时长以及视频图像。


<template>
  <view class="call-view">
    <view class="nav-bar">
      <text class="duration">{
   
   {
   
   duration}}</text>
    </view>

    <!-- 音频通话 -->
    <view v-if="call.mediaType===0" class="profile">
      <image class="user-avatar" mode="widthFix" :src="friend.data.avatar"></image>
      <text class="user-name">{
   
   {
   
   friend