本元素暂无示例

本元素暂无预览图

下面将以如何实现直播功能为例，介绍本元素如何使用。

1. 在页面插入“视频录制功能”元素、“同步数据”元素以及“视频播放器”元素，并且将“视频录制功能”元素、“同步数据”元素放入层中，如下图：

2. 设置“视频录制功能”元素

（1）在元素上右键选择“视频录制功能”，打开设置窗口

| 视频窗口的宽高：视频窗口指的是录制视频时的窗口，可以设置窗口的宽度、高度。如果“视频播放器”元素设置了宽高，那么此处设置的宽高值无效。

| 类型：如果是谷歌浏览器，请选择MediaRecorderWrapper，否则选择WhammyRecorder。

| 反馈数据的间隔：设置数据反馈的间隔，默认是5000ms。即多长时间返回一次录制的视频资源。

（2）在元素上右键选择逻辑，进行数据绑定，绑定模式：属性绑定，绑定参数：{"data--state":state,"data--camera":camera,"data-x-source":source,"data-x-datacount":datacount}

3. 设置“同步数据”元素

| 需要提交的元素：填写“视频录制功能”元素的id，例如：#record1。

| 需要提交的页面数据层的变量、监听变量：填写“视频录制功能”元素数据绑定中"data-x-datacount"属性对应的变量名，例如：datacount。

4. 设置“视频播放器”元素

在“视频播放器”元素上右键，选择逻辑，进行属性绑定，绑定参数：{"data--vsrc":source}，此处的source为"data-x-source"对应的变量名。

5. 设置开始、停止功能

页面添加“开始”、“停止”按钮并分别进行绑定数据编程

开始按钮的额外参数：_vm.state("start");，此处state为"data--state"对应的变量名。

停止按钮的额外参数：_vm.state("stop");。