人脸识别-调用摄像头~

<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>

人脸识别-调用摄像头~

猜你喜欢