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

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

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

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

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

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

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

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

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

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

二、小程序单向直播

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

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

申请开通小程序直播接口
在服务端生成推流地址
进入OBS设置“流”的“自定义流媒体服务器”
在小程序端，利用<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不支持自定义边框等样式，而是直接自动铺满小程序页面。

具体实现步骤如下：

准备一个集成了Agora Web SDK的线上环境
准备一个小程序开发者账号
在小程序控制界面将步骤1的域名加入信任列表
线上环境的域名提前进行备案，且以com结尾，不然摄像头权限会获取失败。
将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实现小程序互动连麦
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

2020-2-15一个web登录注册小程序与Spring初始+作业
文章目录建立一个Web登录注册小程序 1.先在Mysql数据库中新建一个数据库 2.在IDEA中新建一个工程 3.对项目进行简单分层 4.设计一个实体类 5.引入一个jdbc工具类 6.写一个测试类 ...
ETH：Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约
ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约目录 1.Geth安装.配置文件.与ETH节点交互 1.1.下载并安装好geth客户端 1.2. ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
基于安卓android和微信小程序的点餐管理系统毕业设计（源码讲解）
作者简介:Java.spring.安卓Android.ssm框架.前端.后端开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.技术分享怎么做基于安卓android和微信 ...
基于uni-app的表白墙小程序
1 简介今天向大家介绍一个帮助往届学生完成的毕业设计项目,基于uni-app的表白墙小程序. 计算机毕业生设计,课程设计需要帮助的可以找我 2 设计概要 21世纪是信息化时代,随着信息技术和网络技术 ...
python使用第三方支付宝SDK实现小程序发红包、用户支付等功能
python使用第三方支付宝SDK实现小程序发红包.用户支付等功能实现小程序发红包,创建支付订单.登录验证等继承DCAlipay添加几个我们需要的功能初始化DCAlipay对象并使用回调not ...
毕业设计之基于springboot+uniapp的租房小程序
免费资源领取免费资源领取真正的大师,永远都怀着一颗学徒的心! 一.项目简介今天说的这个软件是一款基于springboot+uniapp的租房小程序,可以兼容iOS.Android.Web. 二.实 ...
vue.js反编译_基于electron-vue开发的微信小程序反编译客户端
开源一个小程序反编译客户端咨询小程序反编译的同学比较多,虽然有开源库但是还是有同学不清楚如何去操作,所以索性做了一个客户端方便进行小程序的反编译 # 技术选型网上已经有大佬实现了C#版的反编译工具 ...
python点名代码_基于python tkinter的点名小程序功能的实例代码
基于python tkinter的点名小程序功能的实例代码,花名册,次数,窗口,未找到,初始化基于python tkinter的点名小程序功能的实例代码易采站长站,站长之家为您整理了基于pytho ...

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

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

最新文章

热门文章