网页调用摄像头技术

Word count: 2.1k   |   Reading time≈ 11 min

网页调用摄像头技术

参考文档

[(182条消息) Html-网页调用摄像头并拍照效果_小狗蛋ing的博客-CSDN博客_网页调用摄像头](https://blog.csdn.net/As_thin/article/details/118313591?ops_request_misc=&request_id=&biz_id=102&utm_term=html 调用摄像头拍照&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-0-118313591.142^v62^pc_search_tree,201^v3^control_2,213^v1^t3_esquery_v2&spm=1018.2226.3001.4187)

(182条消息) 前端网页打开摄像头并将图像传给后端_blog_1103的博客-CSDN博客

别人的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!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>


实际操作

进过各种尝试，终于，写好了前端拍照端接收

结果

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!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});
            console.log(file)
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, "aa.png"));
    })

    document.getElementById("sure").addEventListener("click", function () {
        var formData = new FormData();
        console.log(file)
        formData.append("file",file);
        $.ajax({
            type: "post",
            //后端需要调用的地址
            url:"http://localhost:8089/plotform/areFace.do",
            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>


后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.dwx.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@Controller
public class areFaceController {

    @RequestMapping(value = "/areFace.do")
    @ResponseBody
    public String areFaceTest(HttpServletRequest request,HttpServletRequest response,HttpSession session) {
        MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
        return "sxt";
    }

}

注意，这里需要在springmvc.xml中添加一个bean配置否则会出错

1
2
3
4
5
6
7
8
<!--在SpringMvc.xml文件中增加Spring文件上传的解析器-->
   <bean id="multipartResolver"
         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
       <property name="maxUploadSize" value="10485760" />
       <!-- resolveLazily属性启用是为了推迟文件解析，以便在Action 中捕获文件大小异常 -->
       <property name="resolveLazily" value="true" />
       <property name="defaultEncoding" value="UTF-8" />
   </bean>
Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2015-2023 dwx
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信