小程序连麦:从方案到集成

新版开发者中心已经发布!如需访问最新版本,请点击  这里

售前咨询QQ群 276282334
售前咨询电话 400 632 6626

小程序连麦:从方案到集成

本页包含以下内容:

场景描述

微信小程序视频连麦主要可应用于下列场景:

  • 在线购物:主播展示产品、用户互动提问,促成交易达成
  • 线上课堂:1 对 1 及 1 对多线上小班课,老师、学生实时互动
  • 视频会议:实现多人语音或视频会议,提高办公效率
  • 在线医疗:突破医疗资源的地域限制,实现多方视频会诊,降低诊断成本
  • 高端客服:对于高价值的 VIP 客户,提供远程视频服务,1 对 1 实时交流
  • 远程报警:一键报警,迅速连接有关部门,通过实时视频通信,使警方能实时掌控现场情况
  • 银行开户:快速开启实时视频认证,清晰画质、超低延时、隐私保护,提升开户效率

声网小程序 Demo 体验

  1. 在 Android 或 iOS 上打开微信 App, 扫描识别下面的二维码,即可快速体验 Agora 小程序直播连麦解决方案。
../_images/wechat_live_code.jpg
  1. 在小程序界面上输入你想要进入的房间名,点击 加入房间 即可进入小程序频道。
../_images/wechat_join_channel.jpg
  1. 其他用户在自己的小程序上输入相同的房间名,点击 加入房间,即可进入相同的频道,实现连麦。
../_images/wechat_video_call.jpg

你可以点击屏幕上的按钮,依次体验 静音切换摄像头美颜 等功能。

声网实现方案

下图为小程序连麦的声网实现架构图:

../_images/wechat_live_solution.jpg

在这个架构图中:

  1. 在大网边缘节点部署协议转换服务对小程序端发出的 RTMP 流进行转换
  2. 将转化后的 UDP 传输到 Agora SD-RTN 上
  3. 通过 Agora SD-RTN 与 Agora 其他平台 SDK 实现音视频互通

集成方法

步骤 1:环境准备

  1. 请确保你的开发环境满足以下要求:
  • 请确保已安装 微信开发者工具
  • 请确保你的微信小程序基础库支持 live-pusherlive-player 组件
  1. 联系 sales@agora.io 获取声网微信小程序 SDK
  2. 获取一个 App ID 和 App Certificate。关于如何获取,详见 App ID

步骤 2:创建微信小程序组件

在集成微信小程序组件之前,Agora 建议你先阅读 微信小程序开发官方文档

在微信小程序中实现音视频直播功能,需要使用微信的 live-player 组件live-pusher 组件

live-player 组件

该组件用于实现微信小程序的实时音视频播放功能。开发者在创建该组件后,还需要在 js 文件中调用 API 接口对应的组件来实现该功能。详见 API 说明

声网小程序中,创建 live-player 的示例代码如下:

<live-player
    id="player"
    src="{{rtmp 播放地址}}"
    mode="RTC"
    bindstatechange="playerStateChange"
    object-fit="fillCrop" />

live-pusher 组件

该组件用于实现微信小程序的实时音视频录制功能。开发者在创建该组件后,还需要在 js 文件中调用 API 接口对应的组件来实现该功能。详见 API 说明

声网小程序中,创建 live-pusher 的示例代码如下:

<live-pusher
    url="{{rtmp 推流地址}}"
    mode="RTC"
    bindstatechange="recorderStateChange" />

步骤 3:集成声网小程序 SDK

  1. 将 mini-app-sdk-production 文件复制到你的小程序文件夹中
  2. 使用 require 将小程序 SDK 集成到项目中:
const AgoraMiniappSDK = require('../../console/mini-app-sdk-production.js');

其中 ../../console/mini-app-sdk-production.jsh 为你的 js 文件本地路径。

实现小程序连麦

你可以调用 API 实现小程序连麦:

  1. 初始化客户端对象,详见 初始化客户端对象 (init)
client.init(appId, onSuccess, onFailure);
  1. 加入频道,详见 进入频道 (join)
client.join(channelKey, channel, uid, onSuccess, onFailure);
  1. 发布音视频流,详见 发布本地音视频流 (publish)
client.publish(onSuccess, onFailure);
  1. 取消发布音视频流,详见 停止发布音视频流 (unpublish)
client.unpublish(onSuccess, onFailure);
  1. 订阅音视频流,详见 订阅远端音视频流 (subscribe)
client.subscribe(uid, onSuccess, onFailure);
  1. 取消订阅音视频流,详见 停止订阅远端音视频流 (unsubscribe)
client.unsubscribe(uid, onSuccess, onFailure);
  1. 监听流事件,详见 监听事件 (on)
client.on(event, callback);
  1. 取消监听流事件,详见 取消监听事件 (off)
client.off(event);
  1. 退出频道,详见 退出频道 (leave)
client.leave(onSuccess, onFailure);

示例代码

初始化客户端、加入频道、发布音视频流

let client = new AgoraMiniappSDK.Client();
    this.client = client;
    //初始化客户端对象
    client.init(APPID, () => {
      console.log(`client init success`);
      //加入频道
      client.join(undefined, channel, uid, () => {
        console.log(`client join channel success`);
        //注册流事件
        this.subscribeEvents(client);

        //发布本地音视频流并获取推流 url 地址
        client.publish(url => {
          console.log(`client publish success`);
        }, e => {
          console.log(`client publish failed: ${e}`);
        });
      }, e => {
        console.log(`client join channel failed: ${e}`);
      })
    }, e => {
      console.log(`client init failed: ${e}`);
    });

注册并监听流事件

subscribeEvents: function(client){
  client.on("stream-added", uid => {
    console.log(`stream ${uid} added`);
  client.subscribe(uid, url => {
    console.log(`stream subscribed successful`);
    this.data.playUrls.push({ key: uid, uid: uid, src: url });
    }, e => {
    console.log(`stream subscribed failed ${e}`);
    });
  });

  client.on("stream-removed", uid => {
    console.log(`stream ${uid} removed`);
    this.data.playUrls = this.data.playUrls.filter(urlObj => {
      return `${urlObj.uid}` !== `${uid}`;
    });
  });
}

更详细的 API 说明及用法,请参考 声网小程序 API 参考

更多内容

声网目前提供可供集成的 Miniapp Sample App,请前往 https://github.com/AgoraIO/Agora-Miniapp-Tutorial 自行下载并体验。

以上内容是否对您有帮助?