使用vue2实现WEB端音视频通话——声网SDK接入

一、前提条件

声网账号，注册地址为‘sso.shengwang.cn/cn/v4/signu…’。注册后获取的appId，频道名（自己写即可），以及生成的临时token。注意：升级到生产环境时，需要服务器端提供token（token生产步骤可查看官方文档，地址为‘docportal.shengwang.cn/cn/video-ca…’）。

二、开发

1、安装SDK。

npm install agora-rtc-sdk-ng --save

2、项目代码中引入agora-rtc-sdk-ng。

import AgoraRTC from "agora-rtc-sdk-ng"

本次开发是用混入的方法，方便后续音视频开发通用。

视频通话实现

1、调用 createClient 方法创建 AgoraRTCClient 对象。

if (!rtc.client) {
  rtc.client = AgoraRTC.createClient({
    mode: "rtc",
    codec: "vp8"
  });
}

2、加入频道。

await rtc.client.join(appId, channel, token || null, uid || null)；

3、创建本地音视频轨道。

this.audioTrack = await AgoraRTC.createMicrophoneAudioTrack();

this.videoTrack = await AgoraRTC.createCameraVideoTrack();

4、发布本地音视频轨道。

await rtc.client.publish([this.audioTrack, this.videoTrack]);

5、播放本地音视频轨道。

本次开发播放音视频的dom以子组件方式开发，见以下子组件AgoraVideoPlayer：

<agora-video-player
  ref="agoraVideoPlayer"
  :audio-track="audioTrack"
  :video-track="videoTrack"
>
</agora-video-player>

<template>
  <div class="smallVideo" ref="videoRef"></div>
</template>

<script>
  export default {
    props: {
      videoTrack: {
        type: Object,
        default: null
      },
      audioTrack: {
        type: Object,
        default: null
      },
    },
    data() {
      return {}
    },
    watch: {
      videoTrack: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.$nextTick(() => {
              newVal.play(this.$refs.videoRef)
            })
          }
        },
        immediate: true
      },
      audioTrack: {
        handler(newVal, oldVal) {
          newVal?.play()
        },
        immediate: true
      }
    },
    created() {
      this.videoTrack?.play(this.$refs.videoRef)
      this.audioTrack?.play()
    },
    methods: {
    }
  }
</script>

6、订阅远端用户并播放远端音视频。

rtc.client.on("user-published", this.handleUserPublished)
async handleUserPublished(user, mediaType) {
  await rtc.client.subscribe(user, mediaType);
  delete this.remoteUsers[user.uid]
  this.remoteUsers[user.uid] = user
  this.$forceUpdate()
},

远端音视频dom同样用子组件AgoraVideoPlayer展示：

<agora-video-player
  ref="agoraVideoPlayer"
  :audio-track="item.audioTrack"
  :video-track="item.videoTrack"
>
</agora-video-player>

这样，一个完整的视频通话开发完成。本次开发中有用到一键静音、关闭摄像头、翻转摄像头功能，实现方法如下：

一键静音：

// 是否静音
async isShowVoice(val) {
  await this.audioTrack.setEnabled(val);
},
//val==true,关麦；val==false,开麦；

关闭摄像头：

//  是否开启摄像头
async isShowCamera(val) {
  await this.videoTrack.setEnabled(val);
},
//val==true,关闭摄像头；val==false,打开摄像头；

翻转摄像头：

//初始化方法时默认成前置摄像头
const devices = await AgoraRTC.getCameras(); //采集视频数据的摄像头设备
this.device = devices[0];


// 翻转摄像头
async turnCamera() {
  const devices = await AgoraRTC.getCameras();
  if (this.device.deviceId === devices[0].deviceId) {
    await this.videoTrack.setDevice(devices[1]);
    this.device = devices[1]; //摄像头后置
  } else {
    await this.videoTrack.setDevice(devices[0]);
    this.device = devices[0]; //摄像头前置
  }
},