m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/010-video.md

@@ -0,0 +1,196 @@
+#### video
+
+视频播放组件。
+
+**属性说明**
+
+| 属性名                       | 类型         | 默认值  | 说明                                                                                                                                                      | 平台差异说明          |
+| :--------------------------- | :----------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| src                          | String       |         | 要播放视频的资源地址                                                                                                                                      |                       |
+| autoplay                     | Boolean      | false   | 是否自动播放                                                                                                                                              |                       |
+| loop                         | Boolean      | false   | 是否循环播放                                                                                                                                              |                       |
+| muted                        | Boolean      | false   | 是否静音播放                                                                                                                                              |                       |
+| initial-time                 | Number       |         | 指定视频初始播放位置，单位为秒（s）。                                                                                                                     |                       |
+| duration                     | Number       |         | 指定视频时长，单位为秒（s）。                                                                                                                             |                       |
+| controls                     | Boolean      | true    | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）                                                                                                     |                       |
+| danmu-list                   | Object Array |         | 弹幕列表                                                                                                                                                  |                       |
+| danmu-btn                    | Boolean      | false   | 是否显示弹幕按钮，只在初始化时有效，不能动态变更                                                                                                          |                       |
+| enable-danmu                 | Boolean      | false   | 是否展示弹幕，只在初始化时有效，不能动态变更                                                                                                              |                       |
+| page-gesture                 | Boolean      | false   | 在非全屏模式下，是否开启亮度与音量调节手势                                                                                                                | 微信小程序、H5 支持   |
+| direction                    | Number       |         | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针 90 度）, -90（屏幕顺时针 90 度）                                 | H5 不支持             |
+| show-progress                | Boolean      | true    | 若不设置，宽度大于 240 时才会显示                                                                                                                         |                       |
+| show-fullscreen-btn          | Boolean      | true    | 是否显示全屏按钮                                                                                                                                          |                       |
+| show-play-btn                | Boolean      | true    | 是否显示视频底部控制栏的播放按钮                                                                                                                          |                       |
+| show-center-play-btn         | Boolean      | true    | 是否显示视频中间的播放按钮                                                                                                                                |                       |
+| enable-progress-gesture      | Boolean      | true    | 是否开启控制进度的手势                                                                                                                                    |                       |
+| object-fit                   | String       | contain | 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖                                                               | 微信小程序、H5 支持   |
+| poster                       | String       |         | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效                                                                               |                       |
+| show-mute-btn                | Boolean      | false   | 是否显示静音按钮                                                                                                                                          | 微信小程序支持        |
+| title                        | String       |         | 视频的标题，全屏时在顶部展示                                                                                                                              | 微信小程序支持        |
+| play-btn-position            | String       | bottom  | 播放按钮的位置                                                                                                                                            | 微信小程序支持        |
+| enable-play-gesture          | Boolean      | false   | 是否开启播放手势，即双击切换播放/暂停                                                                                                                     | 微信小程序支持        |
+| auto-pause-if-navigate       | Boolean      | true    | 当跳转到其它小程序页面时，是否自动暂停本页面的视频                                                                                                        | 微信小程序支持        |
+| auto-pause-if-open-native    | Boolean      | true    | 当跳转到其它微信原生页面时，是否自动暂停本页面的视频                                                                                                      | 微信小程序支持        |
+| vslide-gesture               | Boolean      | false   | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）                                                                                             | 微信小程序支持        |
+| vslide-gesture-in-fullscreen | Boolean      | true    | 在全屏模式下，是否开启亮度与音量调节手势                                                                                                                  | 微信小程序支持        |
+| ad-unit-id                   | String       |         | 视频前贴广告单元 ID，更多详情可参考开放能力[视频前贴广告](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html) | 微信小程序支持        |
+| poster-for-crawler           | String       |         | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址                                                                        | 微信小程序支持        |
+| @play                        | EventHandle  |         | 当开始/继续播放时触发 play 事件                                                                                                                           |                       |
+| @pause                       | EventHandle  |         | 当暂停播放时触发 pause 事件                                                                                                                               |                       |
+| @ended                       | EventHandle  |         | 当播放到末尾时触发 ended 事件                                                                                                                             |                       |
+| @timeupdate                  | EventHandle  |         | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次                                                                          |                       |
+| @fullscreenchange            | EventHandle  |         | 当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 取为 vertical 或 horizontal                                                 |                       |
+| @waiting                     | EventHandle  |         | 视频出现缓冲时触发                                                                                                                                        |                       |
+| @error                       | EventHandle  |         | 视频播放出错时触发                                                                                                                                        |                       |
+| @progress                    | EventHandle  |         | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比                                                                                     | 微信小程序、H5 支持   |
+| @loadedmetadata              | EventHandle  |         | 视频元数据加载完成时触发。event.detail = {width, height, duration}                                                                                        | 微信小程序、H5 支持   |
+| @controlstoggle              | EventHandle  |         | 切换 controls 显示隐藏时触发。event.detail = {show}                                                                                                       | 微信小程序 2.9.5 支持 |
+
+`<video>` 默认宽度 300px、高度 225px，可通过 css 设置宽高。
+
+##### direction 的合法值
+
+| 值  | 说明             |
+| :-- | :--------------- |
+| 0   | 正常竖向         |
+| 90  | 屏幕逆时针 90 度 |
+| -90 | 屏幕顺时针 90 度 |
+
+##### object-fit 的合法值
+
+| 值      | 说明 |
+| :------ | :--- |
+| contain | 包含 |
+| fill    | 填充 |
+| cover   | 覆盖 |
+
+##### play-btn-position 的合法值
+
+| 值     | 说明            |
+| :----- | :-------------- |
+| bottom | controls bar 上 |
+| center | 视频中间        |
+
+**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/video/video)
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/component/video/video
+
+> Template
+
+```html
+<template>
+    <view>
+        <view class="uni-padding-wrap uni-common-mt">
+            <view>
+                <video
+                    id="myVideo"
+                    src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
+                    @error="videoErrorCallback"
+                    :danmu-list="danmuList"
+                    enable-danmu
+                    danmu-btn
+                    controls
+                ></video>
+            </view>
+            <!-- #ifndef MP-ALIPAY -->
+            <view class="uni-list uni-common-mt">
+                <view class="uni-list-cell">
+                    <view>
+                        <view class="uni-label">弹幕内容</view>
+                    </view>
+                    <view class="uni-list-cell-db">
+                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
+                    </view>
+                </view>
+            </view>
+            <view class="uni-btn-v">
+                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
+            </view>
+            <!-- #endif -->
+        </view>
+    </view>
+</template>
+```
+
+> Script
+
+```html
+<script>
+export default {
+    data() {
+        return {
+            src: '',
+            danmuList: [
+                {
+                    text: '第 1s 出现的弹幕',
+                    color: '#ff0000',
+                    time: 1
+                },
+                {
+                    text: '第 3s 出现的弹幕',
+                    color: '#ff00ff',
+                    time: 3
+                }
+            ],
+            danmuValue: ''
+        };
+    },
+    onReady: function (res) {
+        // #ifndef MP-ALIPAY
+        this.videoContext = uni.createVideoContext('myVideo');
+        // #endif
+    },
+    methods: {
+        sendDanmu: function () {
+            this.videoContext.sendDanmu({
+                text: this.danmuValue,
+                color: this.getRandomColor()
+            });
+            this.danmuValue = '';
+        },
+        videoErrorCallback: function (e) {
+            uni.showModal({
+                content: e.target.errMsg,
+                showCancel: false
+            });
+        },
+        getRandomColor: function () {
+            const rgb = [];
+            for (let i = 0; i < 3; ++i) {
+                let color = Math.floor(Math.random() * 256).toString(16);
+                color = color.length == 1 ? '0' + color : color;
+                rgb.push(color);
+            }
+            return '#' + rgb.join('');
+        }
+    }
+};
+</script>
+```
+
+:::
+
+相关 api：`Util.createVideoContext`
+
+**注意**
+
+-   视频播放格式说明：
+
+    -   H5 平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（`<video/>` 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5 端也可以自行在条件编译里使用 video.js 等三方库，这些库可以自动判断环境兼容以决定使用标准 video 或 flash 来播放。
+    -   小程序平台：各小程序平台支持程度不同，详见各家文档：[微信小程序视频组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)、[支付宝小程序 video 组件](https://docs.alipay.com/mini/component/video)
+
+-   video**全屏**后，如何自行绘制界面？比如加个标题、加个分享按钮
+
+    -   微信基础库 2.4.0 以上可通过 cover-view 来绘制界面覆盖元素
+    -   H5 端可通过通用 h5 做法实现
+    -   其他端无法全屏后自行绘制内容
+
+-   如何实现抖音、映客等全屏视频垂直滑动切换效果？
+
+    -   微信基础库 2.4.0 以上，可通过在垂直的 swiper 中内嵌 video 来实现。原生导航栏设置为 custom，视频长宽设为手机屏幕大小，通过 cover-view 覆盖视频内容。插件市场有相关[示例](https://ext.dcloud.net.cn/search?q=%E6%8A%96%E9%9F%B3)
+
+-   `<video/>` 组件在非 H5 端是平台小程序原生组件，层级高于普通前端组件，覆盖其需要使用`cover-view`组件。微信基础库 2.4.0+ 已支持 video 组件的同层渲染，也就是 video 在非全屏时，可以被前端元素通过调节 z-index 来遮挡，但 video 全屏时，仍需要 cover-view 覆盖。
+-   除微信基础库 2.4.0+ ，其他情况下非 H5 的 video 不能放入 scroll-view 和 swiper。
+-   你也可以尝试换个设计思路，如：列表中的视频组件是通过图片与 icon 模拟的，点击后播放全屏播放视频的方案。详情[【video 组件会覆盖页面其他非原生组件的设计替代方案示例】](https://ext.dcloud.net.cn/plugin?id=3549)
+
+-   H5 平台： 在部分浏览器中会强制调用原生播放器播放（如：微信内置浏览器、UC 浏览器等），在 x5 内核的浏览器中支持配置[同层播放器](https://x5.tencent.com/docs/video.html)。

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/011-live-player.md

@@ -0,0 +1,139 @@
+#### live-player
+
+实时音视频播放，也称直播拉流。
+
+使用 live-player 组件需注意：如果发布到平台小程序，需要先通过各家小程序的审核。指定类目的平台小程序才能使用（[微信小程序类目](https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html)，审核通过后在各家小程序管理后台自助开通该组件权限。
+
+**平台差异说明**
+
+| H5  | 微信小程序 | 支付宝小程序 |
+| :-: | :--------: | :----------: |
+|  x  |     √      |      x       |
+
+-   H5 下可用 video 播放符合 HTML5 规范的流媒体，rtmp 等非 HTML5 标准的流媒体格式，仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上，需要安装 flash 插件才能播放 rtmp 等格式。
+
+**属性说明**
+
+|         属性名          |     类型     |  默认值  |                                         说明                                         |       平台差异说明       |
+| :---------------------: | :----------: | :------: | :----------------------------------------------------------------------------------: | :----------------------: |
+|           id            |    String    |          |                             live-player 属性的唯一标志符                             |                          |
+|           src           |    String    |          |                      音视频地址。微信小程序支持 flv, rtmp 格式                       |                          |
+|          mode           |    String    |   live   |                    live（直播），RTC（实时通话，该模式时延更低）                     |     微信小程序 支持      |
+|        autoplay         |   Boolean    |  false   |                                       自动播放                                       |                          |
+|          muted          |   Boolean    |  false   |                                       是否静音                                       |                          |
+|       orientation       |    String    | vertical |                       画面方向，可选值有 vertical，horizontal                        |                          |
+|       object-fit        |    String    | contain  |                          填充模式，可选值:contain、fillCrop                          |                          |
+|     background-mute     |   Boolean    |  false   |                                  进入后台时是否静音                                  |                          |
+|       sound-mode        |    string    | speaker  |                           声音输出方式;可选值 speaker、ear                           |      微信小程序支持      |
+|        min-cache        |    Number    |    1     |                                  最小缓冲区，单位 s                                  |                          |
+|        max-cache        |    Number    |    3     |                                  最大缓冲区，单位 s                                  |                          |
+| picture-in-picture-mode | string/Array |    3     | 设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） | 微信小程序（2.10.3）支持 |
+|      @statechange       | EventHandle  |          |                          播放状态变化事件，detail = {code}                           |                          |
+|       @netstatus        | EventHandle  |          |                            网络状态通知，detail = {info}                             |                          |
+|    @fullscreenchange    | EventHandle  |          |                   全屏变化事件，detail = {direction, fullScreen}。                   |                     |
+|   @audiovolumenotify    | EventHandle  |          |                            播放音量大小通知，detail = {}                             | 微信小程序（2.10.0）支持 |
+| @enterpictureinpicture  | EventHandle  |          |                                    播放器进入小窗                                    | 微信小程序（2.11.0）支持 |
+| @leavepictureinpicture  | EventHandle  |          |                                    播放器退出小窗                                    |                          |
+
+mode 的合法值
+
+| 值   | 说明                     |
+| :--- | :----------------------- |
+| live | 直播                     |
+| RTC  | 实时通话，该模式时延更低 |
+
+orientation 的合法值
+
+| 值         | 说明 |
+| :--------- | :--- |
+| vertical   | 竖直 |
+| horizontal | 水平 |
+
+object-fit 的合法值
+
+| 值       | 说明                                     |
+| :------- | :--------------------------------------- |
+| contain  | 图像长边填满屏幕，短边区域会被填充⿊⾊   |
+| fillCrop | 图像铺满屏幕，超出显示区域的部分将被截掉 |
+
+sound-mode 的合法值
+
+| 值      | 说明   |
+| :------ | :----- |
+| speaker | 扬声器 |
+| ear     | 听筒   |
+
+**Tips**
+
+-   微信小程序已废弃 background-mute 属性，默认为进入后台静音；
+-   live-player 默认宽度 300px、高度 225px；
+-   live-player 是平台小程序原生组件，层级高于前端组件，请勿在 scroll-view、movable-view 中使用
+-   平台小程序下覆盖 live-player 需要使用 cover-view。
+-   live-player 组件相关 JS API：`Util.createLivePlayerContext`
+-   平台小程序平台使用 live-player 有审核限制，请注意参考各家文档。
+
+**状态码**
+
+| 代码  | 说明                                                     |
+| ----- | -------------------------------------------------------- |
+| 2001  | 已经连接服务器                                           |
+| 2002  | 已经连接服务器,开始拉流                                  |
+| 2003  | 网络接收到首个视频数据包(IDR)                            |
+| 2004  | 视频播放开始                                             |
+| 2005  | 视频播放进度                                             |
+| 2006  | 视频播放结束                                             |
+| 2007  | 视频播放 Loading                                         |
+| 2008  | 解码器启动                                               |
+| 2009  | 视频分辨率改变                                           |
+| -2301 | 网络断连，且经多次重连抢救无效，更多重试请自行重启播放   |
+| -2302 | 获取加速拉流地址失败                                     |
+| 2101  | 当前视频帧解码失败                                       |
+| 2102  | 当前音频帧解码失败                                       |
+| 2103  | 网络断连, 已启动自动重连                                 |
+| 2104  | 网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀 |
+| 2105  | 当前视频播放出现卡顿                                     |
+| 2106  | 硬解启动失败，采用软解                                   |
+| 2107  | 当前视频帧不连续，可能丢帧                               |
+| 2108  | 当前流硬解第一个 I 帧失败，SDK 自动切软解                |
+| 3001  | RTMP -DNS 解析失败                                       |
+| 3002  | RTMP 服务器连接失败                                      |
+| 3003  | RTMP 服务器握手失败                                      |
+| 3005  | RTMP 读/写失败                                           |
+
+**网络状态数据**
+
+| 键名         | 说明                                                  |
+| ------------ | ----------------------------------------------------- |
+| videoBitrate | 当前视频编/码器输出的比特率，单位 kbps                |
+| audioBitrate | 当前音频编/码器输出的比特率，单位 kbps                |
+| videoFPS     | 当前视频帧率                                          |
+| videoGOP     | 当前视频 GOP,也就是每两个关键帧(I 帧)间隔时长，单位 s |
+| netSpeed     | 当前的发送/接收速度                                   |
+| netJitter    | 网络抖动情况，抖动越大，网络越不稳定                  |
+| videoWidth   | 视频画面的宽度                                        |
+| videoHeight  | 视频画面的高度                                        |
+
+**示例**
+
+```html
+<live-player
+    src="https://domain/pull_stream"
+    autoplay
+    @statechange="statechange"
+    @error="error"
+    style="width: 300px; height: 225px;"
+/>
+```
+
+```javascript
+export default {
+    methods: {
+        statechange(e) {
+            console.log('live-player code:', e.detail.code);
+        },
+        error(e) {
+            console.error('live-player error:', e.detail.errMsg);
+        }
+    }
+};
+```

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/012-live-pusher.md

@@ -0,0 +1,274 @@
+#### live-pusher
+
+实时音视频录制，也称直播推流。
+
+**平台差异说明**
+
+| H5  | 微信小程序 | 支付宝小程序 |
+| :-: | :--------: | :----------: |
+|  x  |     √      |      x       |
+
+**参数说明**
+
+设置 live-pusher 组件的推流地址，推流视频模式等。
+
+| 属性               | 类型        | 默认值     | 必填 | 说明                                                        | 平台差异说明           |
+| :----------------- | :---------- | :--------- | :--- | :---------------------------------------------------------- | :--------------------- |
+| url                | string      |            | 是   | 推流地址，支持 RTMP 协议。                                  |
+| mode               | string      | SD         | 否   | 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 |
+| aspect             | string      | 3:2        | 否   | 视频宽高比例                                                |
+| muted              | Boolean     | false      | 否   | 是否静音。                                                  |
+| enable-camera      | Boolean     | true       | 否   | 开启摄像头。                                                |
+| auto-focus         | Boolean     | true       | 否   | 自动聚集。                                                  |
+| beauty             | Number      | 0          | 否   | 美颜，取值范围 0-9（iOS 取值范围为 1） ，0 表示关闭。       |
+| whiteness          | Number      | 0          | 否   | 美白，取值范围 0-9（iOS 取值范围为 1） ，0 表示关闭。       |
+| orientation        | String      | "vertical" | 否   | 画面方向                                                    |
+| min-bitrate        | Number      | 200        | 否   | 最小码率。                                                  |
+| max-bitrate        | Number      | 1000       | 否   | 最大码率。                                                  |
+| audio-quality      | string      | high       | 否   | 高音质(48KHz)或低音质(16KHz)，值为 high, low                | 微信小程序 1.7.0 支持  |
+| waiting-image      | string      |            | 否   | 进入后台时推流的等待画面                                    | 微信小程序 1.7.0 支持  |
+| waiting-image-hash | string      |            | 否   | 等待画面资源的 MD5 值                                       | 微信小程序 1.7.0 支持  |
+| zoom               | boolean     | false      | 否   | 调整焦距                                                    | 微信小程序 2.1.0 支持  |
+| device-position    | string      | front      | 否   | 前置或后置，值为 front, back                                | 微信小程序 2.3.0 支持  |
+| background-mute    | boolean     | false      | 否   | 进入后台时是否静音                                          | 微信小程序 1.7.0 支持  |
+| remote-mirror      | boolean     | false      | 否   | 设置推流画面是否镜像，产生的效果在 live-player 反应到       | 微信小程序 2.10.0 支持 |
+| local-mirror       | string      | auto       | 否   | 控制本地预览画面是否镜像                                    | 微信小程序 2.10.0 支持 |
+| audio-reverb-type  | number      | 0          | 否   | 音频混响类型                                                | 微信小程序 2.10.0 支持 |
+| enable-mic         | boolean     | true       | 否   | 开启或关闭麦克风                                            | 微信小程序 2.10.0 支持 |
+| enable-agc         | boolean     | false      | 否   | 是否开启音频自动增益                                        | 微信小程序 2.10.0 支持 |
+| enable-ans         | boolean     | false      | 否   | 是否开启音频噪声抑制                                        | 微信小程序 2.10.0 支持 |
+| audio-volume-type  | string      | voicecall  | 否   | 音量类型                                                    | 微信小程序 2.10.0 支持 |
+| @statechange       | EventHandle |            |      | 状态变化事件，detail = {code}                               |
+| @netstatus         | EventHandle |            |      | 网络状态通知，detail = {info}                               |
+| @error             | EventHandle |            |      | 渲染错误事件，detail = {errMsg, errCode}                    |
+| @bgmstart          | EventHandle |            |      | 背景音开始播放时触发                                        | 微信小程序 2.4.0 支持  |
+| @bgmprogress       | EventHandle |            |      | 背景音进度变化时触发，detail = {progress, duration}         | 微信小程序 2.4.0 支持  |
+| @bgmcomplete       | EventHandle |            |      | 背景音播放完成时触发                                        | 微信小程序 2.4.0 支持  |
+
+#### orientation 的合法值
+
+| 值         | 说明 |
+| :--------- | :--- |
+| vertical   | 竖直 |
+| horizontal | 水平 |
+
+#### local-mirror 的合法值
+
+| 值      | 说明                             |
+| :------ | :------------------------------- |
+| auto    | 前置摄像头镜像，后置摄像头不镜像 |
+| enable  | 前后置摄像头均镜像               |
+| disable | 前后置摄像头均不镜像             |
+
+#### audio-reverb-type 的合法值
+
+| 值  | 说明   |
+| :-- | :----- |
+| 0   | 关闭   |
+| 1   | KTV    |
+| 2   | 小房间 |
+| 3   | 大会堂 |
+| 4   | 低沉   |
+| 5   | 洪亮   |
+| 6   | 金属声 |
+| 7   | 磁性   |
+
+#### audio-volume-type 的合法值
+
+| 值        | 说明     |
+| :-------- | :------- |
+| media     | 媒体音量 |
+| voicecall | 通话音量 |
+
+#### 网络状态数据（info）安卓
+
+| 键名         | 说明                                                  |
+| :----------- | :---------------------------------------------------- |
+| videoBitrate | 当前视频编/码器输出的比特率，单位 kbps                |
+| audioBitrate | 当前音频编/码器输出的比特率，单位 kbps                |
+| videoFPS     | 当前视频帧率                                          |
+| videoGOP     | 当前视频 GOP,也就是每两个关键帧(I 帧)间隔时长，单位 s |
+| netSpeed     | 当前的发送/接收速度                                   |
+| netJitter    | 网络抖动情况，抖动越大，网络越不稳定                  |
+| videoWidth   | 视频画面的宽度                                        |
+| videoHeight  | 视频画面的高度                                        |
+
+#### 网络状态数据（info）iOS
+
+| 参数    | 类型   | 说明               |
+| :------ | :----- | :----------------- |
+| code    | Number | code 码            |
+| message | string | 具体的网络状态信息 |
+
+#### 事件
+
+#### statechange
+
+> 状态变化事件
+
+##### 返回参数（detail）的详细说明
+
+| 参数    | 类型   | 说明 |
+| :------ | :----- | :--- |
+| code    | Number |
+| message | string |
+
+#### netstatus
+
+> 网络状态通知事件
+
+##### 安卓 返回参数（detail）的详细说明
+
+| 键名         | 说明                                                  |
+| :----------- | :---------------------------------------------------- |
+| videoBitrate | 当前视频编/码器输出的比特率，单位 kbps                |
+| audioBitrate | 当前音频编/码器输出的比特率，单位 kbps                |
+| videoFPS     | 当前视频帧率                                          |
+| videoGOP     | 当前视频 GOP,也就是每两个关键帧(I 帧)间隔时长，单位 s |
+| netSpeed     | 当前的发送/接收速度                                   |
+| netJitter    | 网络抖动情况，抖动越大，网络越不稳定                  |
+| videoWidth   | 视频画面的宽度                                        |
+| videoHeight  | 视频画面的高度                                        |
+
+##### iOS 返回参数（detail）的详细说明
+
+| 参数    | 类型   | 说明               |
+| :------ | :----- | :----------------- |
+| code    | Number | code 码            |
+| message | string | 具体的网络状态信息 |
+
+#### error
+
+> 渲染错误事件
+
+##### 返回参数（detail）的详细说明
+
+| 参数    | 类型   | 说明 |
+| :------ | :----- | :--- |
+| errCode | Number |
+| errMsg  | string |
+
+```html
+<template>
+    <view>
+        <live-pusher
+            id="livePusher"
+            ref="livePusher"
+            class="livePusher"
+            url=""
+            mode="SD"
+            :muted="true"
+            :enable-camera="true"
+            :auto-focus="true"
+            :beauty="1"
+            whiteness="2"
+            aspect="9:16"
+            @statechange="statechange"
+            @netstatus="netstatus"
+            @error="error"
+        ></live-pusher>
+        <button class="btn" @click="start">开始推流</button>
+        <button class="btn" @click="pause">暂停推流</button>
+        <button class="btn" @click="resume">resume</button>
+        <button class="btn" @click="stop">停止推流</button>
+        <button class="btn" @click="snapshot">快照</button>
+        <button class="btn" @click="startPreview">开启摄像头预览</button>
+        <button class="btn" @click="stopPreview">关闭摄像头预览</button>
+        <button class="btn" @click="switchCamera">切换摄像头</button>
+    </view>
+</template>
+```
+
+```javascript
+<script>
+    export default {
+        data() {
+			return {}
+        },
+        onReady() {
+            // 注意：需要在onReady中 或 onLoad 延时
+            this.context = uni.createLivePusherContext("livePusher", this);
+        },
+        methods: {
+            statechange(e) {
+                console.log("statechange:" + JSON.stringify(e));
+            },
+            netstatus(e) {
+                console.log("netstatus:" + JSON.stringify(e));
+            },
+            error(e) {
+                console.log("error:" + JSON.stringify(e));
+            },
+            start: function() {
+                this.context.start({
+                    success: (a) => {
+                        console.log("livePusher.start:" + JSON.stringify(a));
+                    }
+                });
+            },
+            close: function() {
+                this.context.close({
+                    success: (a) => {
+                        console.log("livePusher.close:" + JSON.stringify(a));
+                    }
+                });
+            },
+            snapshot: function() {
+                this.context.snapshot({
+                    success: (e) => {
+                        console.log(JSON.stringify(e));
+                    }
+                });
+            },
+            resume: function() {
+                this.context.resume({
+                    success: (a) => {
+                        console.log("livePusher.resume:" + JSON.stringify(a));
+                    }
+                });
+            },
+            pause: function() {
+                this.context.pause({
+                    success: (a) => {
+                        console.log("livePusher.pause:" + JSON.stringify(a));
+                    }
+                });
+            },
+            stop: function() {
+                this.context.stop({
+                    success: (a) => {
+                        console.log(JSON.stringify(a));
+                    }
+                });
+            },
+            switchCamera: function() {
+                this.context.switchCamera({
+                    success: (a) => {
+                        console.log("livePusher.switchCamera:" + JSON.stringify(a));
+                    }
+                });
+            },
+            startPreview: function() {
+                this.context.startPreview({
+                    success: (a) => {
+                        console.log("livePusher.startPreview:" + JSON.stringify(a));
+                    }
+                });
+            },
+            stopPreview: function() {
+                this.context.stopPreview({
+                    success: (a) => {
+                        console.log("livePusher.stopPreview:" + JSON.stringify(a));
+                    }
+                });
+            }
+        }
+    }
+</script>
+```
+
+相关 api：`Util.createLivePusherContext`
+
+**注意**
+
+-   live-pusher 是平台小程序原生组件，在平台小程序端层级高于前端组件，需使用 cover-view 覆盖。在低版本微信中，live-pusher 无法内嵌于 scroll-view、movable-view 中。