多种多样的语音连麦方式

比眉伴天荒 2022-11-03 00:52 624阅读 0赞

## 前言 ##

语音连麦，视频通话这种基础功能大家都已经非常熟悉了，应用场景也十分广泛，例如连麦直播、游戏开黑、在线合唱、视频相亲等。

anyRTC为了让开发者们可以最找到适合自己的开发系统，目前我们已经适配了iOS、Androd、Web、小程序、Windows、macOS、Linux。还有跨平台系列，Flutter、uni-app、APICloud。保证各位开发者可以根据自己公司的实际情况来选择。

## 语音连麦APP的分类及玩法 ##

*  语音直播类
 *  游戏开黑类
 *  聊天房类
 *  语音游戏类

目前市场上的开黑类app大致可以分成以上4类。因为不同种类的app针对人的目标群体是不同的，所以在玩法上也一些差别。

**语音直播类**

目前比较火的是语音连麦玩法。角色分为主播和观众，主播可以在自己的直播间唱歌，讲故事、说脱口秀、内容形式有很多，观众也可以主动申请上麦与主播聊天互动。主要实现的功能就是语音连麦。在聊的基础上，加上了背景伴奏音以及通过消息系统来实现的文字消息功能。看似简单，但是这种模式用户的活跃度较高，付费意愿也更高，一些优质的语音社交平台能达到很高的流水。

**游戏开黑类**

游戏开黑类app主要是作为游戏进行中语音沟通的媒介，因为多人一起在玩游戏的时候经常会出现有杂音，声音延迟，或者听不清楚的问题。而语音开黑类app就完美的解决了这些问题，可以让你在玩游戏的同时保持正常的语音交流，提升用户体验。

**聊天房类**

聊天房类的app目前是比较火的一类。进入聊天房后，每一个房间都是自己的主题，用户可以在房间内畅所欲言，同时支持变声。如果不想发言也可以选择观众模式，不参与互动只收听或者发弹幕也是可以的。

**语音游戏类**

语音游戏，它也是语音聊天室的常见应用场景。从大热的狼人杀、剧本杀，越来越多的游戏开始为玩家创建实时互动的场景，同时实时的音视频对话也成为了部分游戏类型的主要功能。功能上与语音直播相似，只是在这个频道中，上麦下麦的玩法逻辑有所不同。

## 语音连麦demo ##

anyRTC为了让开发者们对互动连麦场景更加直观使用Android和iOS原生代码编写了语音连麦demo，话不多说，先给大家看一下demo的效果。

**主播端**

Android端语音连麦demo（主播端）

**客户端**

Android端语音连麦demo（游客端）

### 语音连麦demo功能介绍 ###

**发送弹幕：** 实时消息互动。

**申请上麦：** 申请上麦下麦。

**音乐播放：** 背景音乐跟主播声音进行混音播放。

**控制音量：** 可以调节音乐声、人声、和耳返的声音。

**下载链接**

Android端：https://www.pgyer.com/fRjW

iOS端：https://www.pgyer.com/PGLT

### 适用场景 ###

在线合唱、音乐互动课堂、棋牌类游戏、一起KTV、语音聊天室变声、吃鸡游戏、音乐教学、FM电台等。

### 跨平台连麦 ###

如今，Android 和 iOS 是市场上最受欢迎的两大移动平台。很多企业都在寻找方法来构建能同时支持两大平台并满足用户需求的应用。在两大平台统治市场的背景下，跨平台应用框架也随之崛起。这些框架对于开发人员和企业来说都大有裨益，他们可以在这些框架的帮助下更容易地开发出同时支持两大平台的应用。

anyRTC为了使开发者们开发更加便利新增flutter、uni-app、两大主流框架，下面就来分别介绍一下。

### flutter ###

**什么是Flutter**

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

简单来说Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android 和iOS平台上都可以运行。

Flutter使用Dart语言开发，Dart可以被编译（AOT）成不同平台的本地代码，让Flutter可以直接和平台通讯而不需要一个中间的桥接过程，从而提高了性能。

### Flutter的现状及优点 ###

**现状**

Flutter 是开放的，它是一个完全开源的项目。全球的开发者都可以免费使用和拓展 Flutter 的源代码，并为 Flutter 的生态和文档作贡献。我们已经看到许多中国开发者活跃在社区中，并为 Flutter 做出了坚实的贡献。在 StackOverflow 2019 年的全球开发者问卷调查中，Flutter 被选为最受开发者欢迎的框架之一，超过了 TensorFlow 和 Node.js。

全球已经有很多大家熟悉的品牌采用了 Flutter，包括很多国内的知名公司。如下图所示：

![img][]

**优势**

*  快速开发
    
    毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
 *  富有表现力和灵活的UI
    
    快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义，从而实现难以置信的快速渲染和富有表现力、灵活的设计。
 *  原生性能
    
    Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

**Flutter上如何实现实时音视频**

Flutter上提供了2种方式进行视频渲染，分别是Texture Widget和PlatformView。

**方法一：Texture Widget**

首先我们要知道视频是由一帧帧图像组成的。Flutter的Texture 提供了一个可以放在 Layer Tree 里的组件，组件中的数据源需要由你通过 Native 端来提供。

我们以 iOS 为例，iOS 就需要提供 CVPixelBufferRef。这是一个数据，对应的就是视频中的一帧画面。把这个数据作为数据源提供给Texture Widget，然后Texture Widget就可以把你提供的这些数据显示出来，最终就变成了一个视频。

**方法二：PlatformView**

由于 Texture 会涉及到很多渲染的流程，所以很多人都会觉得它有些复杂。所以在 Flutter 1.0版本中，Google 给出了一个新的东西，叫做 PlatformView。

PlatformView提供了一种方法，让我们可以创建 UI View，并加到 Dart 的 LayerTree 里。在 Dart 中的类对应到 iOS 和 Android 平台分别是UIKitView 和 AndroidView。

PlatformView的使用方法：在 PluginRegistar 中新增了 ViewFactory，ViewFactory 只有 CreateView 这一个方法需要实现。你可以在这个方法里首先提供一个 Identifier，在实现该方法后，可以返回一个你想要的 PlatformView，并与 Dart 组件绑定在一起。因为anyRTC的SDK支持传递 Native 的 View，然后将视频渲染到上面，就可以播放了。

**anyRTC Flutter SDK 集成指引及示例DEMO**

参考地址：[github.com/anyRTC/Flut…][github.com_anyRTC_Flut]

anyRTC考虑到了用户的应用创建了实时消息Flutter-RTM

参考地址：[github.com/anyRTC/Flut…][github.com_anyRTC_Flut 1]

### uni-app ###

**什么是uni-app**

`uni-app` 是一个使用 Vue.js 开发**跨平台**应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

uni-app 继承自 Vue.js，提供了完整的 Vue.js 开发体验。

uni-app 组件规范和扩展api与微信小程序基本相同。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ，开发出兼容多端的应用。

**uni-app的优点**

uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。

![img][img 1]

**uni-app 实时音视频快速接入**

以Android平台为例，介绍一下uni-app原生插件

**什么是uni原生插件**

uni原生插件指的是将您本地原生开发的功能按照规范封装成插件包，然后即可在`uni-app`前端项目中通过`js`调用您开发的原生能力。

**代码实现**

举例说明扩展 module：

###### 1.创建Android Studio的Module模块 ######

*  在现有Android项目中创建library的Module。例如`TestModule`
 *  配置刚创建的Module的build.gradle信息。
    
    //导入aar需要的配置 repositories \{ flatDir \{ dirs ‘libs’ \} \} dependencies \{ //必须添加的依赖 compileOnly ‘com.android.support:recyclerview-v7:27.1.0’ compileOnly ‘com.android.support:support-v4:27.1.0’ compileOnly ‘com.android.support:appcompat-v7:27.1.0’ compileOnly ‘com.alibaba:fastjson:1.1.46.android’
    
        compileOnly fileTree(include: ['uniapp-release.aar'], dir: '../app/libs')
        复制代码
    
    \}

**Tips:**

uniapp-release.aar是扩展module主要依赖库，必须导入此依赖库！

###### 2.创建TestModule类 ######

*  Module 扩展必须继承 UniModule 类
    
    public class TestModule extends UniModule
 *  扩展方法必须加上@UniJSMethod (uiThread = false or true) 注解。UniApp 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。
 *  UniApp是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。
    
    //run ui thread @UniJSMethod(uiThread = true) public void testAsyncFunc(JSONObject options, UniJSCallback callback) \{ Log.e(TAG, “testAsyncFunc–”+options); if(callback != null) \{ JSONObject data = new JSONObject(); data.put(“code”, “success”); callback.invoke(data); \} \}
    
    //run JS thread @UniJSMethod (uiThread = false) public JSONObject testSyncFunc()\{ JSONObject data = new JSONObject(); data.put(“code”, “success”); return data; \}
 *  同样因为是通过反射调用，Module 不能被混淆。请在混淆文件中添加代码：
    
    \-keep public class \* extends io.dcloud.feature.uniapp.common.UniModule\{\*;\}

###### 3.注册TestModule ######

由于uni小程序运行在独立子进程中。内存与宿主不共享。所以`宿主进程`注册了`TestModule`，在uni小程序是无法使用的。 Android创建子进程时会主动再次初始化Application！所以uni小程序注册`TestModule`必须在Application中的onCreate初始化或注册。

**Tips**

*  注册`TestModule`之前记得配置宿主的`build.gradle`导入Module模块.
 *  以下示例代码写在宿主的Application中。
    
    public class App extends Application \{ @Override public void onCreate() \{ super.onCreate(); try \{ UniSDKEngine.registerModule(“TestModule”, TestModule.class); \} catch (UniException e) \{ e.printStackTrace(); \} \} \}

到此，我们已经完成了一个简单的 module 扩展

###### 4. 在 uni小程序 中调用 module 方法 ######

module 支持在 vue 和 nvue 中使用

<template>
        <div>
            <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
            <button type="primary" @click="testSyncFunc">testSyncFunc</button>
        </div>
    </template>
    
    <script>
        // 获取 module 
        var testModule = uni.requireNativePlugin("TestModule")
        export default { 
            methods: { 
                testAsyncFunc() { 
                    // 调用异步方法
                    testModule.testAsyncFunc({ 
                            'name': 'unimp',
                            'age': 1
                        },
                        (ret) => { 
                            console.log(ret)
                        })
                },
                testSyncFunc() { 
                    // 调用同步方法
                    var ret = testModule.testSyncFunc({ 
                        'name': 'unimp',
                        'age': 1
                    })
                    console.log(ret)
                }
            }
        }
    </script>
    复制代码

**Tips**:

uni.requireNativePlugin仅用于获取UniModule的对象。UniComponent不支持该方法！

了解更多关于音视频的资讯请点击anyRTC官网进行查看：[https://www.anyrtc.io/][https_www.anyrtc.io]

今天是正月十五元宵节，anyRTC全体祝各位开发者元宵节快乐！

[img]: /images/20221024/b51bdc9472ff4f0f872ae22019f2b58a.png
[github.com_anyRTC_Flut]: https://github.com/anyRTC/Flutter-SDK
[github.com_anyRTC_Flut 1]: https://github.com/anyRTC/Flutter-RTM
[img 1]: /images/20221024/c668e940476945309954527fecec5542.png
[https_www.anyrtc.io]: https://www.anyrtc.io/