HTML5 call cell phone camera to take pictures

A, getUserMedia API Introduction

getUserMedia API provides users with access to the hardware device medium (camera, video, audio, geographic location, etc.) interface, based on this interface, the developer can access the hardware media device without relying on any browser plug-in conditions.

getUserMedia API was originally navigator.getUserMedia, has now been abolished the latest Web standards, change navigator.mediaDevices.getUserMedia () , but browser support is worse than the old version API popular.

MediaDevices.getUserMedia () method allows prompt the user to use a video and / or audio input device, such as a camera or a screen sharing and / or a microphone. Callback parameter if the user is given permission, it returns a Promise objects, MediaStream object as this Promise object to Resolved [Success] states, corresponding, if a user refused permission, or no media available PermissionDeniedError or NotFoundError as this Promise of the Rejected [failure] callback parameter status. Note that since the user will not be required to be made to allow or reject the choice, so Promise returned object may trigger neither resolve nor trigger reject.

Refer to the official API: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

Support for mobile version:

Second, the page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay="autoplay"></video>
<!--拍照按钮-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="640" height="480"></canvas>
<script>
    let video = document.getElementById("video");
    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d"); 

    // old browsers might not have realized mediaDevices, so we can first set up a null object 
    IF (navigator.mediaDevices === undefined) { 
        navigator.mediaDevices = {}; 
    } 

    // Some browsers partially support mediaDevices . We can not give a direct target set getUserMedia 
    // because this might overwrite existing properties. Here we will only add it when there is no getUserMedia property. 
    IF (navigator.mediaDevices.getUserMedia === undefined) { 
        navigator.mediaDevices.getUserMedia =  function (Constraints) { 

            // First, if there getUserMedia then, it is obtained 
            var getUserMedia = navigator.webkitGetUserMedia ||navigator.mozGetUserMedia; 

            // Some browsers do not realize it - it returns error to reject a promise to maintain a unified interface 
            IF ( ! getUserMedia) {
                 return Promise.reject ( new new Error ( ' getUserMedia not Implemented The IS in the this Browser ' )); 
            } 

            // otherwise, a package for the old navigator.getUserMedia method Promise 
            return  new new Promise ( function (Resolve, Reject) { 
                getUserMedia.call (Navigator, Constraints, Resolve, Reject); 
            }); 
        } 
    } 

    / / default front camera, rear camera enforce the following settings 
    @Video Constraints = {the let: {facingMode: {Exact: "Environment"}}}; 
    the let Constraints = {Video: to true }; 
    navigator.mediaDevices.getUserMedia (Constraints) 
        .then ( function (Stream) {
             // old browsers may not srcObject 
            IF ( " srcObject "  in Video) { 
                video.srcObject = Stream; 
            } the else {
                 // prevent the use of its new browser, it should no longer supported 
                video.src = window.URL.createObjectURL (Stream); 
            }
            video.onloadedmetadata =  function (E) { 
                Video.play (); 
            }; 
        }) 
        . the catch ( function (ERR) { 
            the console.log (err.name +  " : "  + err.message); 
        }); 

    // Register the camera button click event 
    document.getElementById ( " Capture " ) .addEventListener ( " the click " , function () {
         // draw picture 
        context.drawImage (Video, 0 , 0 , 640 ,480);
    });
</script>
</body>
</html>

After completion of the above code can be used directly in the browser http: // localhost: 8080 View. Or use 127.0.0.1 for local viewing. But if you want to set additional ip address, for example: 192.168.0.11 IP address, etc. can not be accessed.

The reason: getUserMedia addition to the local address, only supports secure access protocol. That requires access using https to, the following explains how to configure https.

Three, https configuration

1, keytoo tools used to generate secret key provided jdk

Open a command line, enter the following code:

keytool -genkey -alias tomcat -keyalg RSA -keystore ./server.keystore

After entering the command by typing the following:

After the operation is complete you will get a file named server.keystore secret key in the current path.

2, the secret key join springboot project

The keys copied to the root item. Note: Follow the path refers to the path of the first layer of the project, please note the location.

3, the application.properties arranged springboot profile, add the following code:

server.port=8443
server.ssl.key-store=server.keystore
server.ssl.key-alias=tomcat
server.ssl.enabled=true
server.ssl.key-store-password=123456
server.ssl.key-store-type=JKS

4、启动项目，访问路径 https://localhost:8443/。

**注意协议和端口号**

会看到如下错误提示，这是因为我们自己配置的秘钥（证书）没有官方注册，无法被浏览器识别。可以点高级 -> 继续前往。

这时能正常访问则说明我们的https配置完毕。可以替换成其他IP地址测试能正常使用摄像头了。