【案例简介】

步骤 #1 - MediaDevices.getUserMedia()

MediaDevices.getUserMedia 是一个浏览器 API，它允许 Web 应用程序访问用户的摄像头和麦克风。在MDN上阅读更多内容。

第 2 步 - glfx.js，JCrop

 glfx.js用于图像效果（锐化、对比度等）。裁剪功能（支持触摸）由 jQuery 插件Jcrop 提供

第 3 步 - Tesseract.js

 Tesseract.js用于 OCR（光学字符识别）。它是Tesseract 开源 OCR 引擎的 javascript 版本。

【案例截图】

【核心代码】

 function setupVideo(rearCameraId) {
        var deferred = new $.Deferred();
        var videoSettings = {
            video: {
                optional: [
                    {
                        width: { min: pictureWidth }
                    },
                    {
                        height: { min: pictureHeight }
                    }
                ]
            }
        };

        //if rear camera is available - use it
        if (rearCameraId) {
            videoSettings.video.optional.push({
                sourceId: rearCameraId
            });
        }

        navigator.mediaDevices.getUserMedia(videoSettings)
            .then(function (stream) {
                //Setup the video stream
                video.srcObject = stream;

                video.addEventListener("loadedmetadata", function (e) {
                    //get video width and height as it might be different than we requested
                    pictureWidth = this.videoWidth;
                    pictureHeight = this.videoHeight;

                    if (!pictureWidth && !pictureHeight) {
                        //firefox fails to deliver info about video size on time (issue #926753), we have to wait
                        var waitingForSize = setInterval(function () {
                            if (video.videoWidth && video.videoHeight) {
                                pictureWidth = video.videoWidth;
                                pictureHeight = video.videoHeight;

                                clearInterval(waitingForSize);
                                deferred.resolve();
                            }
                        }, 100);
                    } else {
                        deferred.resolve();
                    }
                }, false);
            }).catch(function () {
                deferred.reject('There is no access to your camera, have you denied it?');
            });

        return deferred.promise();
    }