# xmedia

**Repository Path**: hola/xmedia

## Basic Information

- **Project Name**: xmedia
- **Description**: H5拍照录音组件
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-10-26
- **Last Updated**: 2024-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xmedia

#### 介绍

基于HTML5的getUserMedia API的实现的拍照js库，支持添加引导框并自动裁剪，支持扫描抓拍效果，支持图片压缩和旋转，同时支持降级使用input file进行拍摄。


#### 安装教程

```bash
 // npm 安装
 npm install xmediajs -S

 // 通过git地址安装过
 npm install https://gitee.com/hola/xmedia.git

```

#### 使用说明

```js

    // 使用前置摄像头拍照
    xmedia.startTakeFace({
        targetId: '#img',  // 渲染照片的目标img id
        needCompress: true, // 是否开启压缩
        success: function(data){
            // 拍照成功,data会返回照片的File对象和base64数据
            console.info('success...');
            console.info(data);
        }, 
        fail: function(err){
            // 拍照失败
            console.info('fail...');
            console.error(err);
        }
    });

    // 使用后置摄像头拍摄
    xmedia.startTakePhoto({
        targetId: '#img', 
        needCompress: true,
        success: function(data){
            console.info('success...')
            console.info(data);
        }, 
        fail: function(err){
            console.info('fail...')
            console.error(err)
        }
    })

    // 使用后置摄像头拍摄，并展示默认证件摆放引导框
    xmedia.startTakePhoto({
        targetId: '#img', 
        withGuide: true, // 是否展示证件引导框
        needCompress: false,
        success: function(data){
            console.info('success...')
            console.info(data);
        }, 
        fail: function(err){
            console.info('fail...')
            console.error(err)
        }
    })

    // 使用前置摄像头拍照，并支持选择文件和input file方式拍照
    xmedia.startTakeFace({
        targetId: '#img',
        tips:'温馨提示:请确保人脸完整',
        supportFile: true,
        defaultOri: 8, // 旋转-90度
        needRotate: true,
        fileBtnText: '选择文件',
        needCompress: true,
        success: function (data) {
            console.info('success...')
            console.info(data);
        },
        fail: function (err) {
            console.info('fail...')
            console.error(err)
        }
    }).then(() => {
        // console.info('摄像头准备就绪...')
    })

    // 单独请求录音audio权限
    xmedia.openAudio().then(()=>{
        console.info('麦克风成功授权..')
    })

    // 开始录音，一般是在openAudio成功后再调用，
    // 也可以直接调用请求授权并开始录音
    // 这里的success与fail均在xmedia.stopAudioRecord()后才执行
    xmedia.startAudioRecord({
        success: function(blob){
            console.info('结束录音...')
            console.info(blob)
            const audioURL = URL.createObjectURL(blob);
            document.querySelector("audio").src = audioURL;
        }, 
        fail: function(err){
            console.info('fail...')
            console.error(err)
        }
    })

    // 停止录音
    xmedia.stopAudioRecord();


```

#### 自定义引导框说明

如果默认的引导框不符合实际需求，可设置不展示默认引导框，并自主添加引导框，引导框需采用固定fixed定位，且z-index设置成1005。

> <font color=red>注意：拍摄组件z-index默认是从1000~1010，如果有其它组件的z-index大于1010会覆盖拍摄组件，开发者可利用大于1010的z-index添加其他覆盖效果。</font>