H5拍照浅析-一一网

前言

在开发中经常有调用摄像头拍照上传的需求。移动端一般通过input组件调用移动端设备进行拍照，或者是调用第三方平台提供的jssdk进行拍照。input组件在PC端环境中只有选择附件的功能，无法直接调起摄像头进行拍照。PC端环境拍照一般是通过video组件获取到视频流，截取当前视频的画面实现拍照的效果。

移动端拍照

使用input组件进行拍照，设置input的type为file，接收的文件类型为图片。

<input onchange="fileChange(this)" type="file" accept="image/*" />
<script>
    function fileChange(el) {
        let file = el.files
    }
</script>
复制代码

accept规定可通过文件上传控件提交的文件类型
capture表示的是系统所捕获的默认设备，加上capture=”camera”之后不会调用图库，而是直接打开摄像头拍照。

<input onchange="fileChange(this)" type="file" accept="image/*" capture="camera"/>
<script>
    function fileChange(el) {
        let file = el.files
    }
</script>
复制代码

桌面端拍照

使用video组件获取视频流，通过点击“拍照”按钮截取当前视频的画面，以此来模拟拍照的效果。
示例代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照</title>
    <style type="text/css">
        div {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div>
        <button id="switchCamera">打开/切换摄像头</button>
        <button id="closeCamera">关闭摄像头</button>
        <button id="takePicture">拍照</button>
    </div>
    <video id="video" width="240" height="160" autoplay></video>
    <canvas id="canvas" width="240" height="160"></canvas>
    <script>
        const WIDTH = 240
        const HEIGHT = 160
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                navigator.getUserMedia(constraints, success, error);
            }
        }
        function openCameraFn() {
            if (navigator.mediaDevices.getUserMedia ||
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia) {
                getUserMedia({
                    audio: false,
                    video: {
                        width: WIDTH,
                        height: HEIGHT,
                        deviceId: videoDevices[videoDeviceIndex]
                    }
                }, (stream)=>{
                    video.srcObject = stream;
                    video.play();
                }, (err)=>{
                    console.log('开启摄像头失败：' + err)
                })
            }
        }
        function closeCameraFn() {
            if (video.srcObject) {
                try {
                    let tracks = video.srcObject.getTracks();
                    for (let track of tracks) {
                        track.stop();
                    }
                } catch(err) {
                    console.log(err)
                }
            }
        }
        function dataURLtoFile(dataUrl, fileName) {
            if (!fileName) {
                return null;
            }
            const arr = dataUrl.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bytes = window.atob(arr[1])
            // 处理异常,将ascii码小于0的转换为大于0
            const ab = new ArrayBuffer(bytes.length);
            const ia = new Uint8Array(ab);
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            if (fileName.indexOf(".") < 0) {
                fileName += `.${mime.replace("image/", "")}`
            }
            return new File([ab], fileName, { type: mime });
        }
        let videoDevices = []
        let videoDeviceIndex = 0

        let video = document.getElementById("video")
        let canvas = document.getElementById("canvas")
        let context2d = canvas.getContext("2d")
        // 获取摄像头设备信息
        try {
            navigator.mediaDevices.enumerateDevices().then(function(devices){
                videoDevices = []
                devices.forEach(function(device) {
                    let deviceKind = device.kind
                    if (deviceKind.match(/^video.*/)) {
                        videoDevices.push(device.deviceId)
                    }
                })
            })
        } catch (err) {
            console.log('获取设备失败：' + JSON.stringify(err))
        }
        document.getElementById("switchCamera").addEventListener('click', function (ev) {
            closeCameraFn()
            openCameraFn()
            videoDeviceIndex = (videoDeviceIndex++) % videoDevices.length
        })
        document.getElementById("closeCamera").addEventListener('click', function (ev) {
            closeCameraFn()
        })
        document.getElementById("takePicture").addEventListener('click', function (ev) {
            context2d.drawImage(video, 0, 0, WIDTH, HEIGHT)
            let picture = canvas.toDataURL("image/png")
            let pictureFile = dataURLtoFile(picture, Date.now()+'.png')
        })
    </script>
</body>
</html> 
复制代码

对上述示例代码的说明：

canvas.getContext(contextID)：返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 “2d”，它返回一个CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。（参见：www.w3school.com.cn/jsref/met_c…
context2d.drawImage： drawImage() 方法在画布上绘制图像、画布或视频。（参见：www.w3school.com.cn/tags/canvas…
canvas.toDataURL：把画布上的绘制内容以一个data URI的格式返回。（参见：www.w3cschool.cn/microgame/m…
MediaDevices.enumerateDevices()：请求一个可用的媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等。返回的Promise完成时，会带有一个描述设备的MediaDeviceInfo的数组。（参见：developer.mozilla.org/zh-CN/docs/…

实现的效果为：
图片[1]-H5拍照浅析-一一网
左边为video实时显示的视频画面，右边为点击拍照按钮以后截取到的视频当前画面。

chrome浏览器默认只支持https，localhost，127.0.0.1这三种地址获取摄像头，如果不具备https的环境，则需要手动设置chrome浏览器访问的地址允许使用摄像头，否则摄像头不可用，具体操作步骤如下：
（1）在chrome浏览器输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure
（2）找到“Insecure origins treated as secure”这一项，在输入框中输入允许调用摄像头的http地址，示例：http://119.75.217.109:8080
（3）修改“Disabled”为“Enabled”
（4）点击“Relaunch”按钮重启浏览器即可