Xmediajs NPM | npm.io

xmedia

介绍

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

安装教程

 // npm 安装
 npm install xmediajs -S

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

使用说明

    // 使用前置摄像头拍照
    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();