什么技术可以用前端实现物品识别，找到有款框架叫AR.js但是网上教程比较少就比如桌子上有一个杯子，网页默认打开相机，识别这是一个杯子让后做相应的逻辑跳转

Question

什么技术可以用前端实现物品识别，找到有款框架叫AR.js但是网上教程比较少
就比如桌子上有一个杯子，打开我们的网页，网页默认打开相机，识别这是一个杯子让后做相应的逻辑跳转

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7531697
• 这篇博客也不错, 你可以看下JS之盒子的宽高问题，鼠标在盒子中跟随，拖拽，图片切换，滑动验证，放大镜功能的实现等
• 除此之外, 这篇博客: IE与各种浏览器兼容文本实现两行超出部分用省略号代替，简单不复杂并且亲测实用中的 对于IE浏览器各种兼容性的问题一直是开发人员困扰的问题，目前就因HTML文本想要显示两行多余的文本用省略号代替这个问题各路大神各显神通，有用弹性盒子等等，但经实测弹性盒子这种方法显然不适合在IE低版本施展拳脚于是我就封装了一个js方法非常简单实用直接拿去就能直接用下面直接上代码： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• function wordlimit(cname,wordlength){
  var cname=document.getElementsByClassName(cname);
  for(var i=0;i<cname.length;i++){
  var nowhtml=cname[i].innerHTML;
  var nowlength=cname[i].innerHTML.length;
  if(nowlength>wordlength){
  cname[i].innerHTML=nowhtml.substr(0,wordlength)+’…’;
  }
  }
  }
  wordlimit(“sldiv”,20);//"sldiv"代表你给div定义的Class名称看下边Html中的class名
  根据你的实际名来，20代表的是想要截取的字符串长度这个自己定义找个最合适的长度，使用者只需要改这两处地方其他都不用动

• 您还可以看一下 黄菊华老师的基于网页在线图书小说电子书阅读系统 毕业设计毕设源码 使用教程课程中的 -电子书阅读系统-系统发布演示小节, 巩固相关知识点
  
• 以下回答由chatgpt基于相关博客总结生成:

  针对前端实现物品识别的问题，可以使用TensorFlow.js这个框架，它是一个基于TensorFlow的JavaScript库，可以在浏览器或Node.js中运行机器学习模型。可以使用它来训练和部署模型，并在客户端JavaScript中进行推断。具体可以按照以下步骤实现：

  1. 先将物品的图片进行训练，使用TensorFlow.js提供的Transfer Learning API进行快速的图像分类模型构建。
  2. 设置前端页面，通过getUserMedia API实现网页自动打开相机，并将视频流输入到图像分类模型中。
  3. 在图像分类模型中识别出物品的类型，根据识别结果执行特定的逻辑跳转。

  代码示例:

  1.用TensorFlow.js进行图像分类模型训练

  //加载MobileNet模型
  const mobileNet = await tf.loadMobileNet();
  
  //使用Transfer Learning API构建模型
  const model = tf.sequential();
  model.add(tf.layers.dense({units: 100, inputShape: [mobileNet.outputs[0].shape[1]]}));
  model.add(tf.layers.dense({units: classes, activation: 'softmax'}));
  
  //编译模型
  model.compile(optimizer: 'adam', loss: 'categoricalCrossentropy');
  
  //训练模型
  const history = await model.fit(dataset, {epochs: 10});
  

  2.前端页面实现相机输入和图像识别

  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="canvas" width="640" height="480"></canvas>
  

  //获取视频流并输入到模型中进行识别
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  
  //使用getUserMedia API获取视频流
  navigator.mediaDevices.getUserMedia({video: { width: 640, height: 480 }, audio: false})
  .then(function(stream) {
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });
  
  //将视频流输入到模型中进行识别
  const model = await tf.loadLayersModel('model.json');
  const input = tf.browser.fromPixels(canvas);
  const prediction = model.predict(input);
  const label = prediction.argMax().dataSync()[0];
  

  3.根据识别结果进行逻辑跳转

  //根据识别结果进行逻辑跳转
  if(label === 0) {
    window.location.href = 'http://example.com/category1';
  } else if(label === 1) {
    window.location.href = 'http://example.com/category2';
  } else {
    window.location.href = 'http://example.com/';
  }
  

  参考资料：

  1. TensorFlow.js官方文档：https://www.tensorflow.org/js/quickstart
  2. TensorFlow.js图像分类教程：https://codelabs.developers.google.com/codelabs/tfjs-training-classfication/index.html#0
  3. getUserMedia API文档：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia