# MRecording 录音视频

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/recording/freepass)
- 平台：移动端
- 维护者：屈正巍

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from "react";
import { MRecording } from "@weapp/ui";

export default class Basic extends Component {

  state = {
    data: [
      {
        "fileid": "989206495351267329",
        "name": "h264能正常播放.mp4",
        "size": 9253817,
        "extName": "mp4",
        "type": "video/mp4",
        "img": false,
        "uploadUser": "6275448599576042718",
        "uploadUserName": "屈正巍",
        "uploadTime": 1713517585851,
        "doc": false,
        "docId": "0",
        "loadlink": "",
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "editSecLevel",
            "icon": "Icon-daily-o",
            "content": "修改密级",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "otherParams": {
          "permissionType": {
            "upload": true,
            "reupload": true,
            "download": true,
            "edit": true,
            "preview": true,
            "rename": true,
            "delete": true,
            "appeal": true,
            "editSecLevel": true,
            "externalCheckError": false,
            "nextDocCheck": false,
            "print": true
          }
        },
        "uploadType": "chunk",
        "ban": false,
        "secretLevel": 4,
        "validity": "公开",
        "extendFields": [
          {
            "id": 3011351758726359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频时间长度",
            "type": "videoTime",
            "value": "29400",
            "createTime": 1713517587259,
            "updateTime": 1713517587260,
            "deleteType": 0
          },
          {
            "id": 3011351758727359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频高度",
            "type": "videoHeight",
            "value": "1554",
            "createTime": 1713517587266,
            "updateTime": 1713517587270,
            "deleteType": 0
          },
          {
            "id": 3011351758727959000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频宽度",
            "type": "videoWidth",
            "value": "2844",
            "createTime": 1713517587275,
            "updateTime": 1713517587276,
            "deleteType": 0
          }
        ],
        "endChunk": true
      },
      {
        "fileStatus": "1",
        "fileid": "1",
        "name": "h264能正常播放.mp4",
        "size": 9253817,
        "extName": "mp4",
        "type": "video/mp4",
        "img": false,
        "uploadUser": "6275448599576042718",
        "uploadUserName": "屈正巍",
        "uploadTime": 1713517585851,
        "doc": false,
        "docId": "0",
        "loadlink": "",
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "editSecLevel",
            "icon": "Icon-daily-o",
            "content": "修改密级",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "otherParams": {
          "permissionType": {
            "upload": true,
            "reupload": true,
            "download": true,
            "edit": true,
            "preview": true,
            "rename": true,
            "delete": true,
            "appeal": true,
            "editSecLevel": true,
            "externalCheckError": false,
            "nextDocCheck": false,
            "print": true
          }
        },
        "uploadType": "chunk",
        "ban": false,
        "secretLevel": 4,
        "validity": "公开",
        "extendFields": [
          {
            "id": 3011351758726359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频时间长度",
            "type": "videoTime",
            "value": "29400",
            "createTime": 1713517587259,
            "updateTime": 1713517587260,
            "deleteType": 0
          },
          {
            "id": 3011351758727359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频高度",
            "type": "videoHeight",
            "value": "1554",
            "createTime": 1713517587266,
            "updateTime": 1713517587270,
            "deleteType": 0
          },
          {
            "id": 3011351758727959000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频宽度",
            "type": "videoWidth",
            "value": "2844",
            "createTime": 1713517587275,
            "updateTime": 1713517587276,
            "deleteType": 0
          }
        ],
        "endChunk": true
      },
      {
        "fileStatus": "2",
        "fileid": "2",
        "name": "h264能正常播放.mp4",
        "size": 9253817,
        "extName": "mp4",
        "type": "video/mp4",
        "img": false,
        "uploadUser": "6275448599576042718",
        "uploadUserName": "屈正巍",
        "uploadTime": 1713517585851,
        "doc": false,
        "docId": "0",
        "loadlink": "",
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "editSecLevel",
            "icon": "Icon-daily-o",
            "content": "修改密级",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "otherParams": {
          "permissionType": {
            "upload": true,
            "reupload": true,
            "download": true,
            "edit": true,
            "preview": true,
            "rename": true,
            "delete": true,
            "appeal": true,
            "editSecLevel": true,
            "externalCheckError": false,
            "nextDocCheck": false,
            "print": true
          }
        },
        "uploadType": "chunk",
        "ban": false,
        "secretLevel": 4,
        "validity": "公开",
        "extendFields": [
          {
            "id": 3011351758726359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频时间长度",
            "type": "videoTime",
            "value": "29400",
            "createTime": 1713517587259,
            "updateTime": 1713517587260,
            "deleteType": 0
          },
          {
            "id": 3011351758727359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频高度",
            "type": "videoHeight",
            "value": "1554",
            "createTime": 1713517587266,
            "updateTime": 1713517587270,
            "deleteType": 0
          },
          {
            "id": 3011351758727959000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频宽度",
            "type": "videoWidth",
            "value": "2844",
            "createTime": 1713517587275,
            "updateTime": 1713517587276,
            "deleteType": 0
          }
        ],
        "endChunk": true
      }
    ],
  }

  handleChange = (data: any) => {
    this.setState({ data })
  }

  render() {

    return (
      <div>
        <h4>录音</h4>
        <MRecording
          module="document"
          data={this.state.data}
          onChange={this.handleChange}
        />
        <h4>只读-有数据</h4>
        <MRecording
          module="document"
          readOnly
          data={this.state.data}
        />
        <h4>只读-空数据</h4>
        <MRecording
          module="document"
          readOnly
          data={[]}
        />
        <h4>只读-空数据-表单</h4>
        <MRecording
          module="document"
          readOnly
          readOnlyLineHeightStandard
          data={[]}
        />
      </div>
    );
  }
}
```

### 视频

选择或录制视频

```jsx
import React, { Component } from "react";
import { MRecording } from "@weapp/ui";

const uploadProps: any = {
  sourceType: ['video']
}

export default class Basic extends Component {

  state = {
    data: [
      {
        "fileid": "998404416866189316",
        "name": "iShot_2023-10-11_17.01.29.mp4",
        "extName": "mp4",
        "size": 2668863,
        "uploadTime": 1715659144000,
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "fileStatus": 0
      },
      {
        "fileid": "998404442745044992",
        "name": "iShot_2023-10-12_10.02.40.mp4",
        "extName": "mp4",
        "size": 5651887,
        "uploadTime": 1715659149000,
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "fileStatus": 0
      },
      {
        "fileid": "998404459899748353",
        "name": "iShot_2023-10-12_10.07.12.mp4",
        "extName": "mp4",
        "size": 3881745,
        "uploadTime": 1715659153000,
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "fileStatus": 0
      }
    ],
  }

  handleChange = (data: any) => {
    this.setState({ data })
  }

  render() {
    return (
      <div className={'record-demo'}>
        <h4>视频</h4>
        <MRecording
          module="document"
          data={this.state.data}
          onChange={this.handleChange}
          type="video"
        />
        <h4>视频-翻转</h4>
        <MRecording
          module="document"
          data={this.state.data}
          onChange={this.handleChange}
          type="video"
          reverse
        />
        <h4>仅录视频上传</h4>
        <MRecording
          module="document"
          type="video"
          uploadProps={uploadProps}
        />
        <h4>只读-有数据</h4>
        <MRecording
          module="document"
          type="video"
          data={this.state.data}
          readOnly
        />
        <h4>只读-空数据</h4>
        <MRecording
          module="document"
          type="video"
          data={[]}
          readOnly
        />
        <h4>只读-表单</h4>
        <MRecording
          module="document"
          type="video"
          data={[]}
          readOnly
          readOnlyLineHeightStandard
        />
      </div>
    );
  }
}
```

### 最大数量

限制文件上传数量

```jsx
import React, { Component } from "react";
import { MRecording } from "@weapp/ui";

export default class Basic extends Component {

  handleChange = (data: any) => {
    console.log(data)
  }

  render() {

    return (
      <div>
        <h4>录音</h4>
        <MRecording
         
          module="document"
          maxCount={3}
          onChange={this.handleChange}
        />
        <h4>视频</h4>
        <MRecording
         
          module="document"
          onChange={this.handleChange}
          maxCount={3}
          type="video"
        />
      </div>
    );
  }
}
```

### 删除状态

删除或文件不存在

```jsx
import React, { Component } from "react";
import { MRecording } from "@weapp/ui";

export default class Basic extends Component {

  state = {
    data: [
      {
        "fileid": "989206495351267329",
        "name": "h264能正常播放.mp4",
        "size": 9253817,
        "extName": "mp4",
        "type": "video/mp4",
        "img": false,
        "uploadUser": "6275448599576042718",
        "uploadUserName": "屈正巍",
        "uploadTime": 1713517585851,
        "doc": false,
        "docId": "0",
        "loadlink": "",
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "editSecLevel",
            "icon": "Icon-daily-o",
            "content": "修改密级",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "otherParams": {
          "permissionType": {
            "upload": true,
            "reupload": true,
            "download": true,
            "edit": true,
            "preview": true,
            "rename": true,
            "delete": true,
            "appeal": true,
            "editSecLevel": true,
            "externalCheckError": false,
            "nextDocCheck": false,
            "print": true
          }
        },
        "uploadType": "chunk",
        "ban": false,
        "secretLevel": 4,
        "validity": "公开",
        "extendFields": [
          {
            "id": 3011351758726359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频时间长度",
            "type": "videoTime",
            "value": "29400",
            "createTime": 1713517587259,
            "updateTime": 1713517587260,
            "deleteType": 0
          },
          {
            "id": 3011351758727359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频高度",
            "type": "videoHeight",
            "value": "1554",
            "createTime": 1713517587266,
            "updateTime": 1713517587270,
            "deleteType": 0
          },
          {
            "id": 3011351758727959000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频宽度",
            "type": "videoWidth",
            "value": "2844",
            "createTime": 1713517587275,
            "updateTime": 1713517587276,
            "deleteType": 0
          }
        ],
        "endChunk": true
      },
      {
        "fileStatus": "1",
        "fileid": "1",
        "name": "h264能正常播放.mp4",
        "size": 9253817,
        "extName": "mp4",
        "type": "video/mp4",
        "img": false,
        "uploadUser": "6275448599576042718",
        "uploadUserName": "屈正巍",
        "uploadTime": 1713517585851,
        "doc": false,
        "docId": "0",
        "loadlink": "",
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "editSecLevel",
            "icon": "Icon-daily-o",
            "content": "修改密级",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "otherParams": {
          "permissionType": {
            "upload": true,
            "reupload": true,
            "download": true,
            "edit": true,
            "preview": true,
            "rename": true,
            "delete": true,
            "appeal": true,
            "editSecLevel": true,
            "externalCheckError": false,
            "nextDocCheck": false,
            "print": true
          }
        },
        "uploadType": "chunk",
        "ban": false,
        "secretLevel": 4,
        "validity": "公开",
        "extendFields": [
          {
            "id": 3011351758726359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频时间长度",
            "type": "videoTime",
            "value": "29400",
            "createTime": 1713517587259,
            "updateTime": 1713517587260,
            "deleteType": 0
          },
          {
            "id": 3011351758727359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频高度",
            "type": "videoHeight",
            "value": "1554",
            "createTime": 1713517587266,
            "updateTime": 1713517587270,
            "deleteType": 0
          },
          {
            "id": 3011351758727959000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频宽度",
            "type": "videoWidth",
            "value": "2844",
            "createTime": 1713517587275,
            "updateTime": 1713517587276,
            "deleteType": 0
          }
        ],
        "endChunk": true
      },
      {
        "fileStatus": "2",
        "fileid": "2",
        "name": "h264能正常播放.mp4",
        "size": 9253817,
        "extName": "mp4",
        "type": "video/mp4",
        "img": false,
        "uploadUser": "6275448599576042718",
        "uploadUserName": "屈正巍",
        "uploadTime": 1713517585851,
        "doc": false,
        "docId": "0",
        "loadlink": "",
        "options": [
          {
            "id": "preview",
            "icon": "Icon-custom34-o",
            "content": "预览",
            "moreType": true
          },
          {
            "id": "download",
            "icon": "Icon-download02",
            "content": "下载",
            "moreType": false
          },
          {
            "id": "rename",
            "icon": "Icon-rename",
            "content": "重命名",
            "moreType": true
          },
          {
            "id": "editSecLevel",
            "icon": "Icon-daily-o",
            "content": "修改密级",
            "moreType": true
          },
          {
            "id": "version",
            "icon": "Icon-Unfinished-business-o",
            "content": "历史版本",
            "moreType": true
          },
          {
            "id": "reupload",
            "icon": "Icon-upload_again",
            "content": "替换附件",
            "moreType": true
          },
          {
            "id": "delete",
            "icon": "Icon-delete",
            "content": "删除",
            "moreType": false
          }
        ],
        "otherParams": {
          "permissionType": {
            "upload": true,
            "reupload": true,
            "download": true,
            "edit": true,
            "preview": true,
            "rename": true,
            "delete": true,
            "appeal": true,
            "editSecLevel": true,
            "externalCheckError": false,
            "nextDocCheck": false,
            "print": true
          }
        },
        "uploadType": "chunk",
        "ban": false,
        "secretLevel": 4,
        "validity": "公开",
        "extendFields": [
          {
            "id": 3011351758726359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频时间长度",
            "type": "videoTime",
            "value": "29400",
            "createTime": 1713517587259,
            "updateTime": 1713517587260,
            "deleteType": 0
          },
          {
            "id": 3011351758727359000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频高度",
            "type": "videoHeight",
            "value": "1554",
            "createTime": 1713517587266,
            "updateTime": 1713517587270,
            "deleteType": 0
          },
          {
            "id": 3011351758727959000,
            "fileobjId": 989206495351267300,
            "tenantKey": "tnk78sz5gt",
            "oprerator": 6275448599576042000,
            "title": "视频宽度",
            "type": "videoWidth",
            "value": "2844",
            "createTime": 1713517587275,
            "updateTime": 1713517587276,
            "deleteType": 0
          }
        ],
        "endChunk": true
      }
    ],
  }

  handleChange = (data: any) => {
    this.setState({ data })
  }

  render() {
    return (
      <div>
        <h4>视频</h4>
        <MRecording
         
          module="document"
          data={this.state.data}
          onChange={this.handleChange}
          type="video"
        />
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| style | 自定义样式 | CSSProperties | 否 |  |
| className | 自定义 className | string | 否 |  |
| readOnly | 是否只读 | boolean | 否 |  |
| module | 模块标识 | string | 是 |  |
| data | 文件数据 | UploadData[] | 否 |  |
| onChange | 媒体文件改变回调 | (data: UploadData[]) => void | 否 |  |
| onDelete | 媒体文件删除回调 | (data: UploadData) => void | 否 |  |
| uploadProps | 附件上传Props | MUploadProps | 否 |  |
| type | 媒体类型类型 | "audio" \| "video" | 否 |  |
| onUploadCancle | 待上传数据删除回调 | (item: UploadData, listT: UploadData[], listB: ListData[]) => void | 否 |  |
| reverse | 反转展示 | boolean | 否 |  |
