如何基于Agora Web SDK实现小程序互动连麦

Biegral 2020/4/22 17:49:19 1397

微信在12月底开放了小程序的直播功能，主要面向社交、教育、医疗、政务民生、金融应用场景。目前已经有支持直播的小程序上线，比如实现音频直播的“荔枝FM播客”，以及花椒的“百万赢家”小程序。

在小程序中，我们可以实现两种直播：

  1. 单向直播，观众端仅能通过文字评论互动
  2. 连麦直播，支持音视频互动

单向直播就是我们常见的类似秀场的模式，主播推流，观众端可以是只有观看权限，也可以支持观众通过文字评论与主播互动。这种直播方式对延时不敏感。而连麦直播模式对延时要求较高，开发者可以自己搭建服务器，也可以自选任意第三方云服务。

本文中，我们将详解小程序直播的实现原理，分为以下几个部分：

  • 小程序直播开发的组件与接口
  • 小程序单向直播
  • 连麦直播的实现

一、小程序直播的组件与接口

想开发小程序直播， 就需要小程序的基础库版本升级到 1.7.0 以上，开发中我们会使用到两个新组件和两个新接口：

  1. <live-pusher>组件，主要功能是录制，进行推流。一个页面只能有一个<live-pusher>
  2. <live-player>组件，主要功能是播放。
  3. wx.createLivePusherContext(domId, this)接口，主要控制live-pusher组件的推流。
  4. wx.createLivePlayerContext(domId, this)接口，主要控制live-player组件的播放。

二、小程序单向直播

小程序单向直播利用<live-pusher>和<live-player>组件即可实现。根据官方资料显示，小程序对CDN没有限制，开发者可以使用RTMP协议和http-flv协议接入CDN，也可以使用HLS协议与小程序的<video>接入CDN。

假设你已经有选定的云服务，并计划通过 OBS 来进行直播，那么实现直播的步骤大致为四步：

  1. 申请开通小程序直播接口
  2. 在服务端生成推流地址
  3. 进入OBS设置“流”的“自定义流媒体服务器”
  4. 在小程序端，利用<live-player>组件j进行配置

代码如：

<live-player src="//12345678" mode="live" autoplay style="width: 300px; height: 200px;" />

在开发时，需要注意几点：

  • <live-pusher>和<live-player>属于原生组件，不能通过CSS z-index设定层级顺序，要是需要在该层级上堆叠元素，可通过<cover-view>和<cover-image>实现。
  • CSS动画对<live-pusher>和<live-player>无效
  • scroll-view、swiper、picker-view、movable-view中不可使用<live-player>和<live-pusher>

三、连麦直播的实现

如果你想在小程序上实现连麦直播，可以基于Agora Web SDK与微信小程序Webview控件轻松实现。

Webview控件是一个和当前页面一样大小的容器，容器可显示src引用的url的内容。其功能类似于HTML的<iframe>框架。但Webview不支持自定义边框等样式，而是直接自动铺满小程序页面。

具体实现步骤如下：

  1. 准备一个集成了Agora Web SDK的线上环境
  2. 准备一个小程序开发者账号
  3. 在小程序控制界面将步骤1的域名加入信任列表
  4. 线上环境的域名提前进行备案，且以com结尾，不然摄像头权限会获取失败。
  5. 将Webview的src改为步骤1的页面地址

Webview直播实现代码只有简单的一行：

<!-- wxml --> <!-- src地址是需要指向的网站地址 --> <web-view src=“[https://mp.weixin.qq.com/](http://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/)"></web-view>

由于操作系统与Webview控件的原因，这个方法有几个需要注意的地方：

  • 微信小程序基础库：支持1.6.4以上版本，以下版本需做兼容
  • Webview的使用：对个人类型和海外类型的小程序暂不支持，每个网页只能有一个Webview
  • 指向域名备案：域名必须为https协议且经过ICP备案
  • 域名修改次数：一个小程序最多可添加20个域名，一年可修改50次
  • 操作系统限制：由于iOS系统限制 ，此方法仅适用于Android

为了方便大家快速实现自己的小程序，我们已经做好了一个demo，开发者只需修改几行代码即可实现。

欢迎 访问Github获取： https://github.com/AgoraIO/Agora-WebRTC-WeChat-Miniapp-Demo

作者：声网Agora
链接：如何基于Agora Web SDK实现小程序互动连麦
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

本文转载:CSDN博客

阅读排行

分类

归档