js调用摄像头拍照并访问后端代码

最新推荐文章于 2024-07-27 22:26:20 发布

研究猿小刘

最新推荐文章于 2024-07-27 22:26:20 发布

阅读量971

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/weixin_43225966/article/details/112474109

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.先上效果（注意我的摄像头是打开的这里获取的是实时的视频流）：

图略，太丑了决定删了

2.index.html

 <!--
Copyright (c) 2018 ml5

This software is released under the MIT License.
https://opensource.org/licenses/MIT
-->

<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/jquery.min.js"></script>
</head>


<!--<body οnresize="windowResized()">-->
<body >

  <h1 class='title'>口罩检测 </h1>

  <h5 class='title' id='tips'> 
    提示: 一些用手机拍的照片需要旋转90度
  <div id="container">

    <!--<img src="images/demo.jpg" id="image" class="center">-->
    <video id="video" width="480" height="320" controls>
   </video>
    <div id="text-container">
      <p id="instruction" class="green-color">
      <button id="uploader-btn" onClick="clickUploader()">点击拍照,智能识别</button>

      <p id="warning" class="result-color"></p>
      <p class="result-color">
        识别结果:
      </p>
      <input name="imgFile" type="file" id="fileUploader" accept="image/*" onChange="handleFiles()">
    </div>
    <canvas id="canvas" width="500" height="500"></canvas>
  </div>
  <script src="js/index2.js"></script>
</body>
</html>

3. index2.js

  //访问用户媒体设备的兼容方法
    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);
       }
     }
     //后端自己搭建的，后端返回json,格式如下
    // {'results': [{'name': 'cat', 'conf': '0.9664477', 'bbox': [43, 163, 191, 328]},
     //            {'name': 'dog', 'conf': '0.86579907', 'bbox': [223, 54, 498, 396]}]}
 
    const URL = "http://ip地址:5000/api/"
     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);

       //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('不支持访问用户媒体');
     }

function drawResult(results) {
    canvas.width = video.width;
    canvas.height = video.height;
    ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(video, 0, 0);
    if (results == []){

    }else{
        for(bboxInfo of results) {
      bbox = bboxInfo['bbox'];
      class_name = bboxInfo['name'];
      score = bboxInfo['conf'];

      ctx.beginPath();
      ctx.lineWidth="4";

      ctx.strokeStyle="red";
      ctx.fillStyle="red";

      ctx.rect(bbox[0], bbox[1], bbox[2] - bbox[0], bbox[3] - bbox[1]);
      ctx.stroke();

      ctx.font="30px Arial";

      let content = class_name + " " + parseFloat(score).toFixed(2);
      ctx.fillText(content, bbox[0], bbox[1] < 20 ? bbox[1] + 30 : bbox[1]-5);
  }
    }

}
//
function communicate(img_base64_url) {
  $.ajax({
    url: URL,
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({"image": img_base64_url}),
    dataType: "json"
  }).done(function(response_data) {
      drawResult(response_data.results);
  });
}
 function clickUploader() {

      //context.drawImage(video, 0, 0,video.width , video.height)
      context.drawImage(video, 0, 0)
      let img = document.getElementById('canvas').toDataURL("image/png");
      console.log('img-----', img);
    //调用后端代码
     communicate(img)


 }

4. index.css


html, body {
  margin: 0;
  padding: 0;
  font-family: Apercu;
  
}

.title {
  text-align: center
}

#tips {
  color:rosybrown
}

#container {
  background: #c79ef812;
  /* height: 500px; */
  padding: 20px;
  font-size: 14px;
  border-radius: 33px;
  text-align: center;
}

#text-container {
  /* height: 100px; */
  width: 100%;
  text-align: center;
}

#instruction {
  margin-top: 20px;
}

.result-color {
  color: #A159FC;
}

.green-color {
  color: #0bcf82;
}

.highlight {
  opacity: 0.4;
  background-color: rgba(161,89,252, 0.2) !important;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#fileUploader {
  opacity: 0;
}

#uploader-btn {
  background: #faebd700;
  margin-top: 1em;
  color: #0bcf81;
  border: solid 1px #0bcf81;
  padding: .6em 2em;
  line-height: 2;
  font-size: 12px;
  font-family: Apercu;
  cursor: pointer;
  border-radius: 10px;
}

#uploader-btn:hover {
  color: white;
  background-color: #0bcf82;
  border: solid 1px #0bcf82;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}