新接触功能之uniApp（H5）打开摄像头、拍照、切换摄像头、下载照片功能

1）打开摄像头  

思路：navigator.mediaDevices.getUserMedia(constraints)获取到视频流，然后将视频流挂载到video标签上

步骤

1）页面中写一个viedo标签

2) 通过navigator.mediaDevices.getUserMedia(constraints)获取并挂载上

async getMedia() {
    //navigator.mediaDevices.getUserMedia(constraints)产生一个媒体流，返回一个 Promise 对象
    /**
    	constraints配置  
    		audio: true/false是否获取音频
    		video: true/false是否获取视频
    		video的相关配置：
    			width:number  视频宽
    			height: number 视频高
    				（ideal理想尺寸权重最高，min最小，max最大）
            facingMode：String 启用那个摄像头user前置，environment后置
    **/
    let videoStream = await navigator.mediaDevices.getUserMedia({
        video: {
            facingMode: "user",
            width: {
                ideal: document.documentElement.clientWidth
            },
            height: {
                ideal: document.documentElement.clientHeight
            }
        },
        audio: false,
    })
    this.video = document.getElementsByTagName('video')[0]
    //挂在视频流
    this.video.srcObject = videoStream
    //设置播放
    //PS：手机端只有设置静音该方法调用才有效
    this.video.play();
}

2）切换摄像头

思路：改变facingMode

async changeCarmer() {
    this.videoStream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            facingMode: "environment"
        }
    })
    this.videoElement = document.getElementsByTagName('video')[0]
    videoElement.srcObject = videoStream
    videoElement.play();
}

3) 拍照

 思路：将视频流通过canvas.drawImage（）画到canvas上，再利用toDataURL（）创建url，挂在到img标签上显示

takePhoto() {
    const canvas = document.getElementsByTagName('canvas')[0]
    // canvas.getContext(contextType)方法返回canvas 的上下文，如果上下文没有定义则返回 null
    // contextTypes属性"2d", 建立一个 CanvasRenderingContext2D 二维渲染上下文。
    const context = canvas.getContext("2d");
    if (this.width && this.height) {
        this.i++
        // 设置宽高
        canvas.width = this.width;
        canvas.height = this.height;
        // CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
        // image————画布图像源；sx，sy画布图像源选择框的左上角 X 轴坐标；sWidth，sHeight 画布图像源 的矩形（裁剪）选择框的宽度与高度
        // dx，dy————左上角在目标画布上 X Y轴坐标；dWidth，dHeight 在目标画布上绘制的宽度与高度
        context.drawImage(this.video, 0, 0, this.width, this.height);
        const data = canvas.toDataURL("image/png");
        //查找img表签
        const photoAlbum = document.querySelector('.photoAlbum')
        photoAlbum.setAttribute("src", data);
    }
},

4）保存照片

思路：将blob类型的图片挂在到a标签的href上，通过a标签的download下载

PS:此方法只能下载base64图片，URL图片无法下载只能跳转

// 保存到相册
saveToPhoto() {
    // 重新命名
    let fileName = Date.parse(new Date())
    // 创建a标签
    const a = document.createElement('a');
    // 设置为不可见
    a.style.display = 'none';
    // 拿到base64照片(之前存到了localStorage)
    const base64 = localStorage.getItem(`photo${this.number}`)
    // 挂到a标签上
    a.href = base64;
    // 设置名字
    a.download = fileName;
    // 点击开始下载
    a.click();
}