阅读 511

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> 
复制代码

对上述示例代码的说明:

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

实现的效果为:

左边为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”按钮重启浏览器即可

总结

  使用H5进行拍照,如果input能直接调起摄像头拍照的话,还是更推荐使用input组件直接进行拍照,相对来说更方便,需要写的代码量也更少,能更专注于业务的开发。

文章分类
前端
文章标签