人脸识别-调用摄像头~

港控/mmm° 2024-02-19 18:21 47阅读 0赞

<p>
    <button onclick="openMedia()">打开</button>
    <button onclick="closeMedia()">关闭</button>
    <button onclick="drawMedia()">截取</button>
    </p>
    <video id="video" class="bg"></video>
    <canvas id="qr-canvas"></canvas>
    
    <script type="text/javascript">
        var video = document.querySelector('video');
        var text = document.getElementById('text');
        var canvas1 = document.getElementById('qr-canvas');
        var context1 = canvas1.getContext('2d');
        var mediaStreamTrack;
    
        // 一堆兼容代码
        window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function(constraints) {
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));//此浏览器中未实现GetUserMedia
                }
                return new Promise(function(resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
    
        //摄像头调用配置
        var mediaOpts = {
            audio: false,
            video: true,
            video: { facingMode: "environment"} // 或者 "user"
            // video: { width: 1280, height: 720 }
            // video: { facingMode: { exact: "environment" } }// 或者 "user"
        }
    
        // 回调
        function successFunc(stream) {
            mediaStreamTrack = stream;
            video = document.querySelector('video');
            if ("srcObject" in video) {
                video.srcObject = stream
            } else {
                video.src = window.URL && window.URL.createObjectURL(stream) || stream
            }
            video.play();
        }
        function errorFunc(err) {
            alert(err.name);
        }
    
        // 正式启动摄像头
        function openMedia(){
            navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
        }
    
        //关闭摄像头
        function closeMedia(){
            mediaStreamTrack.getVideoTracks().forEach(function (track) {
                track.stop();
                context1.clearRect(0, 0,context1.width, context1.height);//清除画布
            });
        }
    
        //截取视频
        function drawMedia(){
            canvas1.setAttribute("width", video.videoWidth);
            canvas1.setAttribute("height", video.videoHeight);
            context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        }
    
    </script>

<%@page pageEncoding="UTF-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <script>
        var ctx="${ctx}/";
    </script>
    <!doctype html>
    <html lang="zh-cmn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <base href="${ctx}/"/>
        <link rel="stylesheet" href="webjars/css/bootstrap.css">
        <link rel="stylesheet" href="webjars/css/bootstrap-table.css">
        <link rel="stylesheet" href="webjars/fonts/css/font-awesome.css">
        <link rel="stylesheet" href="webjars/css/sweetalert2.min.css">
        <link rel="stylesheet" href="webjars/css/toastr.css">
        <%--<link rel="stylesheet" href="${ctx}/static/css/fileinput.css">--%>
        <link rel="stylesheet" href="webjars/css/bootstrap-treeview.css">
    </head>
    <body>