多种多样的语音连麦方式

前言

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

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

语音连麦 APP 的分类及玩法

• 语音直播类

• 游戏开黑类

• 聊天房类

• 语音游戏类

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

语音直播类

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

游戏开黑类

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

聊天房类

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

语音游戏类

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

语音连麦 demo

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

主播端

主播端Demo演示

客户端

游客端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

优势

• 快速开发

• 富有表现力和灵活的 UI

• 原生性能

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…

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

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

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

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

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

什么是 uni 原生插件

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

代码实现

举例说明扩展 module：

1.创建 Android Studio 的 Module 模块

• 在现有 Android 项目中创建 library 的 Module。例如TestModule
  

• 配置刚创建的 Module 的 build.gradle 信息。

Tips:

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

2.创建 TestModule 类

• Module 扩展必须继承 UniModule 类

• 扩展方法必须加上 @UniJSMethod (uiThread = false or true) 注解。UniApp 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。

• UniApp 是根据反射来进行调用 Module 扩展方法，所以 Module 中的扩展方法必须是 public 类型。

• 同样因为是通过反射调用，Module 不能被混淆。请在混淆文件中添加代码：

3.注册 TestModule

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

Tips

• 注册TestModule之前记得配置宿主的build.gradle导入 Module 模块.

• 以下示例代码写在宿主的 Application 中。

到此，我们已经完成了一个简单的 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/

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