网页调用摄像头

最新推荐文章于 2025-06-28 11:30:38 发布

van_copy

最新推荐文章于 2025-06-28 11:30:38 发布

阅读量4.8k

点赞数 1

分类专栏： html 文章标签： html

html 专栏收录该内容

1 篇文章

订阅专栏

该博客展示了使用HTML实现调用摄像头进行人脸识别登录的代码。通过HTML标签创建视频和画布元素，利用JavaScript调用摄像头获取视频流，将视频帧绘制到画布上，再将图像数据发送到指定servlet进行人脸识别，根据返回结果判断登录状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>调用摄像头</title>
       <script src="js/jq/jquery-3.2.1.js"></script>
       <script src="js/jq/jquery-3.2.1.min.js"></script>
   </head>

<body>
       <video id="v" width="400" height="300"></video>
       
       <canvas width="200" height="150"></canvas>
       <button id="" onclick="face_login()" class="btn btn-info"><i class="icon-play"></i> 登录</button>
       <script>
           function $(elem) {
               return document.querySelector(elem);
           }
           var canvas = $('canvas'),
               context = canvas.getContext('2d'),
               video = $('video'),
               snap = $('#snap'),
               upload = $('#upload'),
               uploaded = $('#uploaded'),
               mediaStreamTrack;
           //人脸识别参考文档：https://cloud.baidu.com/doc/FACE/
           function face_login() {
               context.drawImage(video, 0, 0, 200, 150);
               jQuery.post('faceLogin', {      //指定发送图片到的servlet
                   snapData: canvas.toDataURL('image/jpg')
               }).done(function(rs) {
                   //对结果集进行解析，判断是否存在人脸
                   console.log(JSON.stringify(rs));
                   if(rs.error_code == "222202") {
                       alert("没有人脸信息或人脸数量非1，请重新拍照！");
                   } else if(rs.error_code == "222207") {
                       alert("人脸库中没有您的注册信息，请先注册。");
                   } else if(rs.error_code == "223120") {
                       alert("请正确登录，不得伪造！");
                   } else if(rs.error_msg == "SUCCESS") {
                       alert("登录成功！");
                       // console.log(rs.result.user_list[0].user_info);
                   }
               });
           }
       </script>

</html>