• 网页测试摄像头


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>网页调取摄像头</title>
    </head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
            #capture{
                position: absolute;
                right: 190px;
                bottom: -40px;
    
            }
            #video{
                position: absolute;
                right: 0;
                top: 0;
            }
            #img{
                position: absolute;
                left: 0;
                top: 0;
            }
            .auto{
                position: absolute;
                left: 50%;
                top: 50%;
                height: 320px;
                margin-top: -160px;
            }
            #sure{
                position: absolute;
                left: 210px;
                bottom: -40px;
    
            }
            button{
                cursor: pointer;
                margin: 0 auto;
                border: 1px solid #f0f0f0;
                background: #5CACEE;
                color: #FFF;
                 100px;
                height: 36px;
                line-height: 36px;
                border-radius: 8px;
                text-align: center;
                /*禁止选择*/
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Chrome/Safari/Opera */
                -khtml-user-select: none; /* Konqueror */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently not supported by any browser */
            }
    
    </style>
    <body>
        <div class="auto">
                <video id="video" width="480" height="320" autoplay></video>
                <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
                <img src="./body_default.png" id="img" width="480" height="320" style="margin-left: 20px;">
                <div>
                    <button id="capture" title="点击进行拍照">拍照</button>
                </div>
                <div>
                    <button id="sure" title="是否用这张图片进行验证">确认</button>
                </div>
        </div>
      
    
      <script>
        var file ,stream;
        //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
          if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
          } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
          } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
          } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
          }
        }
     
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
     
        function success(stream) {
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL;
          //将视频流设置为video元素的源
          console.log(stream);
          stream = stream;
          //video.src = CompatibleURL.createObjectURL(stream);
          video.srcObject = stream;
          video.play();
        }
     
        function error(error) {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }
     
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
          //调用用户媒体设备, 访问摄像头
          getUserMedia({video : { 480, height: 320}}, success, error);
        } else {
          alert('不支持访问用户媒体');
        }
            // base64转文件
    
        document.getElementById('capture').addEventListener('click', function () {
          context.drawImage(video, 0, 0, 480, 320);      
            // 获取图片base64链接
            var image = canvas.toDataURL('image/png');
            // 定义一个img
            var img = document.getElementById("img");
            //设置属性和src
            //img.id = "imgBoxxx";
            img.src = image;
            //将图片添加到页面中
            //document.body.appendChild(img);
            function dataURLtoFile(dataurl, filename) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                file = new File([u8arr], filename, {type: mime});
                return new File([u8arr], filename, {type: mime});
            }
            console.log(dataURLtoFile(image, 'aa.png'));
        })
    
        document.getElementById('sure').addEventListener('click', function () {
            var formData = new FormData();
            formData.append("file",file);
            $.ajax({
                type: "POST", // 数据提交类型
                url: "***********", // 发送地址
                data: formData, //发送数据
                async: true, // 是否异步
                processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                contentType: false,
                success:function(data){
                    if(data.code === 200){
                        console.log(`${data.message}`);
                    }else{
                        console.log(`${data.message}`);
                    }
                },
                error:function(e){
                    self.$message.warning(`${e}`);
                    //console.log("不成功"+e);
                }
            });
            stream.getTracks()[0].stop();//结束关闭流
        })
      </script>
    </body>
    </html>
    
  • 相关阅读:
    图解插入排序
    图解冒泡排序
    break 和continue的两种用法
    循环的使用选择
    jstl标签库使用报错index_jsp.java找不到问题
    [Android 除錯] Conflict with dependency
    jQueryMobile 網頁使用 ASP.NET Web API 服務
    Chart.js 與 ASP.NET MVC 整合應用
    HTML5 新增的 input 事件
    ASP.NET MVC 5 實作 GridView 分頁
  • 原文地址:https://www.cnblogs.com/ljincheng/p/15355368.html
Copyright © 2020-2023  润新知