Html-网页调用摄像头并拍照效果

最新推荐文章于 2024-09-10 12:55:25 发布

小狗蛋ing

最新推荐文章于 2024-09-10 12:55:25 发布

阅读量8.3k

点赞数 18

分类专栏： HTML 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/As_thin/article/details/118313591

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

给大家分享一个web端，网页调取摄像头并拍照保存照片的代码，感觉挺有意思的，代码是我面向百度编程找到的。。。。

以下是效果图，主要就是用到了强大的JS
在这里插入图片描述
代码

<!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;
            width: 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 : {width: 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>