微信在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/"></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