前端实现游戏组队语音功能

目录

介绍

声网介绍

使用前提

实现代码方案

---

介绍

此文章仅实现简单代码案列，一切从简！

在手机游戏中无处不见的组队沟通功能，那么这是如何实现的呢？当然使用纯前端是无法实现此功能底层代码的，但是可以通过三方开源SDK来实现，这里指的就是 声网 Web SDK。

声网介绍

声网 SDK，支持对语音对其接入使用，Java  Android Web IOS  python 等皆可接入，此文章仅介绍纯语音功能，当然还可以实现音视频直播等其他功能。

在使用前需要注意点，在本地服务器（localhost）运行 Web 应用仅作为测试用途因此非HTTPS同样可以正常访问，但是在生产环境必须为 HTTPS 协议，再者声网对不安全协议域名做了限制，列入：Cpolar 部署时选择的随机域名等。

使用前提

1. 注册并登录 

地址：Agora.io Signup

注册和登录过程中如果遇到疑问

注册与登录 - 声网平台 - 文档中心 - 声网Agora更换邮箱https://docportal.shengwang.cn/cn/Agora%20Platform/sign_in_and_sign_up?platform=All%20Platforms

2. 创建项目

登录进入首页左上角下拉框点击后出现选项，然后选择创建项。

如下图，项目名称自定义。

实现代码方案

在以上准备工作已就绪时，就可在项目中使用，此处拿 Vue 举例引入并使用。

1. 依赖或SDK文件

Vue 中使用 npm install agora-rtc-sdk-ng 下载依赖

2.组件导入并调用API

HTML 代码

<template>
    <div>
        <button @click="join" type="button">JOIN</button>
        <button @click="leave" type="button">LEAVE</button>
    </div>
</template>

JS 代码

在加入频道前，需要确认电脑或手机是否拥有音频设备（耳机），并且 uId 用户标识时唯一的且必须为数字。

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

let rtc = {
    client: null,
    localAudioTrack: null,
};

let options = {
    // 用户标识
    uid: 0,
    // 权限验证
    token: "",
    // 声网为开发项目生成的字符串,是项目的唯一标识
    appId:"",
    // 频道名称
    channel: "agoraRtcDemo", 
}


const created = () => {
    // 创建 AgoraRTCClient 对象, 并设置编码格式
    rtc.client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
    // 监听远端用户将本地音轨发送至RTC频道
    rtc.client.on("user-published", async (user, mediaType) => {
        // 订阅远端用户
        await rtc.client.subscribe(user, mediaType);
        
        if (mediaType === "audio") {
            // 获取远端本地音轨并播放
            const remoteAudioTrack = user.audioTrack;
            remoteAudioTrack.play();
        }
     });
}

const join = async () => {
    // 用户加入频道
    await rtc.client.join(options.appId, options.channel, options.token, uid.value);
    // 本地音轨
    rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    // 将本地音轨发送至 RTC 频道
    await rtc.client.publish([rtc.localAudioTrack]);
}

const leave = async () => {
    // 关闭本地音轨
    rtc.localAudioTrack.close();
    // 退出 RTC 频道
    await rtc.client.leave();
}

通过以上步骤即可实现组队语音沟通，交互样式就不花费时间编写了，自行根据业务场景进行开发，此步声网SDK语音沟通功能就实现了，当然要可以设置语音的各种API 如音量调整等官网自行查阅。