声网Agora
声网Agora

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

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

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

  1. 单向直播，观众端仅能通过文字评论互动

  2. 连麦直播，支持音视频互动

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

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

  • 小程序直播开发的组件与接口

  • 小程序单向直播

  • 连麦直播的实现

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

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

  1. 组件，主要功能是录制，进行推流。一个页面只能有一个

  2. 组件，主要功能是播放。

  3. wx.createLivePusherContext(domId, this)接口，主要控制live-pusher组件的推流。

  4. wx.createLivePlayerContext(domId, this)接口，主要控制live-player组件的播放。

二、小程序单向直播

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

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

  1. 申请开通小程序直播接口

  2. 在服务端生成推流地址

  3. 进入OBS设置“流”的“自定义流媒体服务器”

  4. 在小程序端，利用组件j进行配置

代码如：

<live-player src="//12345678" mode="live" autoplay style="width: 300px; height: 200px;" />
在开发时，需要注意几点：

  • 和属于原生组件，不能通过CSS z-index设定层级顺序，要是需要在该层级上堆叠元素，可通过和实现。

  • CSS动画对和无效

  • scroll-view、swiper、picker-view、movable-view中不可使用和

三、连麦直播的实现

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

Webview控件是一个和当前页面一样大小的容器，容器可显示src引用的url的内容。其功能类似于HTML的