h5前端人脸识别

等待戈多啊

已于 2022-12-07 17:02:49 修改

阅读量1.7k

点赞数

文章标签：前端 html javascript css

于 2022-11-15 18:45:22 首次发布

本文链接：https://blog.csdn.net/qq_41157351/article/details/127871338

版权

调用摄像头，获取视频流，并转成base64文件，清测可用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>人脸识别</title>
</head>
<style>
    .checkagain {
  background-color: #f44242;
  height: 35px;
  position: fixed;
  width: 90%;
  margin-left: 5%;
  transform: translateY(2.5%);
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
  line-height: 35px;
  bottom: 70px;
  color: #ffffff;
}
.videodiv {
  width: 200px;
  height: 200px;
  background-color: #999999;
  border-radius: 100px;
  margin-top: 30px;
  margin-left: calc((100% - 200px) / 2);
  overflow: hidden;
}
.video {
  position: relative;
  left: -100px;
}
  </style>
<body>
	<div class="videodiv">
      <video id="video" controls="false" muted="true" width="400px" class="video"></video>
    </div>
    <div class="checkagain" onclick="startRecord()">开始录制</div>
    <div class="checkagain" style="bottom: 25px;" onclick="stopRecord()">结束录制</div>
 <script type="text/javascript">
 	var video = document.querySelector('video');
 	var mediaRecorder
 	var recorderFile
  var mediaStream
  var stopRecordCallback

  openCamera()

   function  startRecord() {
      mediaRecorder.start(); 
      setTimeout(() => {
        console.log('setTimeout')
        stopRecord(function() {
          console.log(recorderFile);
          blobToBase64(recorderFile).then(function(base64) {
            console.log(base64);
          });
          console.log("录制成功");
        }, mediaStream);
      }, 4 * 1000);
    }

 
  function openCamera() {
      getUserMedia(function(error, stream) {
        if (error) {
          console.log(error);
        } else {
          console.log(stream)
          mediaRecorder = new MediaRecorder(stream);
          mediaStream = stream;
          //存储数据流
          let chunks = [];
          video.srcObject = stream;
          video.play();
          mediaRecorder.ondataavailable = function(e) {
            console.log('e=',e)
            mediaRecorder.blobs.push(e.data);
            chunks.push(e.data);
            console.log('chunks',chunks)
          };
          console.log('mid')
          mediaRecorder.blobs = [];
          mediaRecorder.onstop = function() {
            //数据流转换为 blob
            recorderFile = new Blob(chunks, { type: mediaRecorder.mimeType });
            chunks = [];
            if (null != stopRecordCallback) {
              stopRecordCallback();
            }
          };
        }
      });
    }

  function getUserMedia(callback) {
      console.log("获取设备信息");
      // 这个用来控制你需要调取的设备
      const constraints = {
        audio: true, // 调用录音
        video: {
          deviceId: "default",
          facingMode: "user", //调用前置摄像头
          width: 1024,
          height: 600
        }
      };
      navigator.getUserMedia =
        navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      if (navigator.getUserMedia) {
        // 返回一个promise   需要详细了解https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/mediaDevices 前往这个地址
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            console.log("then");
            console.log(stream)
            callback(false, stream);
          })
          .catch(function(error) {
            callback(error);
          });
      } else {
        callback(new Error("您的浏览器暂不支持视频录制"));
      }
    }

        //停止录制
    function stopRecord(callback) {
      console.log(mediaStream)
      stopRecordCallback = callback;
      mediaRecorder.stop();
      closeStream(mediaStream);
    }
    //关闭流
    function closeStream(stream) {
      const tracks = stream.getTracks();
      tracks.forEach(track => {
        track.stop();
      });
    }

    function blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = e => {
          resolve(e.target.result);
        };
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("文件流异常"));
        };
      });
    }

 </script>
</body>
</html>