js摄像头动态检测

这篇具有很好参考价值的文章主要介绍了js摄像头动态检测。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

利用摄像头每一秒截图一次图像。然后计算2次图像之间的相似度。

如果相似度低于98%就会报警。

var video = document.getElementsByClassName('inputvideo')[0];
video.innerHTML = "<video class='input_video' id='camera' autoplay width='640px' height='380px'></video>";

const videoElement = document.getElementById('camera');

// 获取用户媒体设备(摄像头)
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function (stream) {
    videoElement.srcObject = stream;
  })
  .catch(function (error) {
    console.error('获取摄像头失败:', error);
  });

var canvas = document.getElementsByClassName('outputcanvas')[0];
canvas.innerHTML = "<canvas class='output_canvas' width='640px' height='480px'></canvas>";

var canvasElement = document.getElementsByClassName('output_canvas')[0];
var canvasCtx = canvasElement.getContext('2d');

// 设置 canvas 尺寸与视频流尺寸一致
canvasElement.width = 64;
canvasElement.height = 64;
var last = 0

function captureFrame() {
  // 捕获图像并绘制到画布
  canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
  // 获取绘制后的图像数据
  const imageData = canvasCtx.getImageData(0, 0, canvasElement.width, canvasElement.height);

  // 压缩图像并将其绘制到目标画布上
  const compressedImageDataPromise = compressImgFromImageData(imageData);

  // 处理压缩后的图像数据
  compressedImageDataPromise.then(function (compressedData) {
    // 在这里可以使用 compressedData 进行进一步的操作,例如上传或显示在页面上

    // 清空画布
    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);

    // 转换为灰度图像
    const grayscaleImageData = createGrayscale(compressedData);

    // 获取哈希指纹
    const hashFingerprint = getHashFingerprint(grayscaleImageData);
    // 判断 last 是否等于 hashFingerprint
    if (last !== 0) {
      if (last === hashFingerprint) {
        console.log('你没动');
      } else {
        // console.log('你动了' + last);// 计算汉明距离
        const distance = hammingDistance(last, hashFingerprint);
        // 计算相似度百分比
        const similarityPercentage = (1 - distance / (hashFingerprint.length * 2)) * 100;
        // console.log('汉明距离:', distance);
        const baifenbi=similarityPercentage.toFixed(2);
        console.log('相似度百分比:', baifenbi + '%');
        if (baifenbi<98){
       _funcCb (true, {param1: true})
          }
       _funcCb (true, {param2: baifenbi})
      }
    }
    last = hashFingerprint
    // console.log('哈希指纹:', hashFingerprint);

    // 在画布上绘制灰度图像
    canvasCtx.putImageData(grayscaleImageData, 0, 0);
  });
}

// 每隔一段时间捕获一帧
setInterval(captureFrame, 1000); // 1 帧每秒

// 定义压缩图像的函数
function compressImgFromImageData(imageData) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const imgWidth = 64; // 设置压缩后的宽度

  canvas.width = imgWidth;
  canvas.height = imgWidth;

  // 将图像数据绘制到临时 canvas 上
  ctx.putImageData(imageData, 0, 0);

  // 获取压缩后的图像数据
  return new Promise((resolve, reject) => {
    const imgData = ctx.getImageData(0, 0, imgWidth, imgWidth);
    resolve(imgData);
  });
}

// createGrayscale 函数已经在之前的代码中定义
// 根据 RGBA 数组生成 ImageData
function createImgData(dataDetail) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const imgWidth = Math.sqrt(dataDetail.length / 4);
  const newImageData = ctx.createImageData(imgWidth, imgWidth);
  for (let i = 0; i < dataDetail.length; i += 4) {
    let R = dataDetail[i];
    let G = dataDetail[i + 1];
    let B = dataDetail[i + 2];
    let Alpha = dataDetail[i + 3];

    newImageData.data[i] = R;
    newImageData.data[i + 1] = G;
    newImageData.data[i + 2] = B;
    newImageData.data[i + 3] = Alpha;
  }
  return newImageData;
}

// 创建灰度图像
function createGrayscale(imgData) {
  const newData = Array(imgData.data.length).fill(0);
  imgData.data.forEach((_data, index) => {
    if ((index + 1) % 4 === 0) {
      const R = imgData.data[index - 3];
      const G = imgData.data[index - 2];
      const B = imgData.data[index - 1];

      const gray = ~~((R + G + B) / 3);
      newData[index - 3] = gray;
      newData[index - 2] = gray;
      newData[index - 1] = gray;
      newData[index] = 255; // Alpha 值固定为255
    }
  });
  return createImgData(newData);
}

// 获取图像的哈希指纹
function getHashFingerprint(imgData) {
  const grayList = imgData.data.reduce((pre, cur, index) => {
    if ((index + 1) % 4 === 0) {
      pre.push(imgData.data[index - 1]);
    }
    return pre;
  }, []);
  const length = grayList.length;
  const grayAverage = grayList.reduce((pre, next) => pre + next, 0) / length;
  return grayList.map(gray => (gray >= grayAverage ? 1 : 0)).join('');
}

// 计算汉明距离
function hammingDistance(hash1, hash2) {
  if (hash1.length !== hash2.length) {
    throw new Error('Hashes must have the same length');
  }

  let distance = 0;
  for (let i = 0; i < hash1.length; i++) {
    if (hash1[i] !== hash2[i]) {
      distance++;
    }
  }

  return distance;
}

原理是看了有一篇文章

利用 JS 实现多种图片相似度算法

首先降低图片分辨率

js摄像头动态检测,javascript,前端,开发语言

然后使用指纹提取

在“平均哈希算法”中,若灰度图的某个像素的灰度值大于平均值,则视为1,否则为0。把这部分信息组合起来就是图片的指纹。由于我们已经拿到了灰度图的 ImageData 对象,要提取指纹也就变得很容易了:

js摄像头动态检测,javascript,前端,开发语言

最后用汉明距离计算相似度

摘一段维基百科关于“汉明距离”的描述:

在信息论中,两个等长字符串之间的汉明距离(英语:Hamming distance)是两个字符串对应位置的不同字符的个数。换句话说,它就是将一个字符串变换成另外一个字符串所需要替换的字符个数。

例如:

  • 1011101与1001001之间的汉明距离是2。
  • 2143896与2233796之间的汉明距离是3。
  • "toned"与"roses"之间的汉明距离是3。

体验地址

不许动 文章来源地址https://www.toymoban.com/news/detail-700397.html

到了这里,关于js摄像头动态检测的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大华摄像头实时预览(spring boot+websocket+flv.js)Java开发

    1.大华NetSDK_JAVA; 这里使用的是 Linux64的架包 2.websocket 前端使用的vue框架    3.flv.js的播放插件     4.大华摄像头提供的平台(后面称为官方平台) 根据大华《NetSDK_JAVA编程指导手册》的流程图 根据图可以得知关键流程为: 初始化sdk——登录设备——打开实时预览——设置视

    2024年02月04日
    浏览(118)
  • 【face-api.js】前端实现,人脸捕获、表情识别、年龄性别识别、人脸比对、视频人脸追踪、摄像头人物识别

    官网看下简介,在线预览看下效果 官方的github文件拷下来 npm i face-api.js 把模型文件拷进你的项目 主要是在图片或视频元素上,盖一个相同大小的canvas 先是录入一些图片的描述信息,然后比较描述信息,判断人脸的相似度 人脸检测器有两种, SSD 和 Tiny 两种,SSD较大,Tiny用

    2024年02月11日
    浏览(69)
  • Qt开发_调用OpenCV(4.x)完成人脸检测并绘制马赛克(摄像头实时数据)

    这个基于Qt和OpenCV的人脸检测和人脸打码项目是通过实时视频流中的人脸识别来保护隐私。 该项目目的是保护隐私并确保人脸数据安全。在某些情况下,使用实时视频流进行人脸检测和识别可能涉及对个人隐私的侵犯。通过在图像中打码人脸区域,可以避免未经许可的人脸出

    2024年02月06日
    浏览(58)
  • windows平台使用CMake工具对darknet的编译以及安装过程+yolov3+图像检测+摄像头检测+视频检测+手机作为摄像头进行检测(详解)

    目录 1.编译和安装教程 (1)安装visual studio 2022 (2)CMake下载及安装 (3)下载darknet.zip文件 (4)安装OpenCV  (5)修改Makefile文件 (6)修改CMakeLists.txt文件 (7)使用CMake工具 2.yolov3进行测试 (1)单张图像进行检测  (2)开启摄像头进行检测 (3) 视频检测 (4)使用手机摄

    2024年02月05日
    浏览(75)
  • 前端调用电脑摄像头

    项目中需要前端调用,所以做了如下操作 先看一下效果吧 主要是基于vue3,通过canvas把画面转成base64的形式,然后是把base64转成 file文件,最后调用了一下上传接口 但是这个得开启浏览器的摄像头权限,不然会报错 以下是代码 进入页面先调用一下摄像头 拍照 转base64 完整代

    2024年02月10日
    浏览(51)
  • opencv人与摄像头距离检测

    参考: https://chtseng.wordpress.com/2018/09/18/%E5%A6%82%E4%BD%95%E4%BC%B0%E7%AE%97%E5%89%8D%E6%96%B9%E4%BA%BA%E7%89%A9%E7%9A%84%E8%B7%9D%E9%9B%A2/ https://blog.csdn.net/captain5339/article/details/128857313

    2024年02月08日
    浏览(71)
  • opencv人与摄像头距离、角度检测

    参考: https://chtseng.wordpress.com/2018/09/18/%E5%A6%82%E4%BD%95%E4%BC%B0%E7%AE%97%E5%89%8D%E6%96%B9%E4%BA%BA%E7%89%A9%E7%9A%84%E8%B7%9D%E9%9B%A2/ https://blog.csdn.net/captain5339/article/details/128857313

    2024年02月14日
    浏览(42)
  • 基于opencv的人脸检测(图片、视频、摄像头)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、检测图片中的人脸 二、检测视频与摄像头中的人脸 总结 人脸检测识别一直是个热门的研究问题,同时也是opencv中一个实现相对容易的课题。 OpenCV自带了函数detectMultiScale()可以实现对行人

    2024年02月13日
    浏览(43)
  • JavaCV的摄像头实战之八:人脸检测

    这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本文是《JavaCV的摄像头实战》的第八篇,前面的操作夯实了的帧和流处理的基本功,接下来开始实现一些常见的CV能力,就从本篇的人检测别开始吧 OpenCV中常用的人脸检测是基于Haar特征的级联分类器

    2024年02月09日
    浏览(95)
  • JavaCV的摄像头实战之十二:性别检测

    这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本文是《JavaCV的摄像头实战》系列的第十二篇,咱们来开发一个实用功能:识别性别并显示在预览页面,如下图: 今天的代码,主要功能如下图所示: 如果您看过《JavaCV的摄像头实战》系列的其他

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包