首页 > 解决方案 > tensorflow.js cocossd 在移动浏览器中不起作用

问题描述

我正在尝试使用 tensorflow cocossd 模型检测对象。

如果是 png/jpg 图像:我的脚本在笔记本电脑和移动浏览器中都可以正常工作。

但在摄像头视频帧的情况下:我的脚本在笔记本电脑浏览器中运行良好,但在移动浏览器中无法运行。

这是我的代码示例:

 var img = new Image();
img.src = "catDog.jpg";

//I have videoframe buffer
var ubuf = new Uint8Array(videoFrame.buffer(0).buffer);
var imgData = imageCtx.createImageData(imageDiv.width, imageDiv.height)
imgData.data.set(ubuf)

cocoSsd.load().then(model => {
    // detect objects in the image.
    model.detect(imgData).then(predictions => {
      console.log('Predictions: ';
      console.log(predictions);
    });
  });

上面的代码在笔记本电脑浏览器中运行良好,但在移动浏览器中运行良好。虽然如果我使用 img 而不是 imgData,该脚本在笔记本电脑和移动设备上都可以正常工作。在控制台中没有错误只显示打印预测:[](检测到的对象=0)

更新:

我刚刚发现在移动或笔记本电脑浏览器中生成的图像数据存在一些差异。我更新了上面的代码如下:

var img = new Image();
//img.src = "catDog.jpg";

//I have videoframe buffer
var ubuf = new Uint8Array(videoFrame.buffer(0).buffer);
var imgData = imageCtx.createImageData(imageDiv.width, imageDiv.height)
imgData.data.set(ubuf)
imageCtx.putImageData(imgData,0,0)  // for debuging
img.src=cvImageDiv.toDataURL()

cocoSsd.load().then(model => {
    // detect objects in the image.
    model.detect(img).then(predictions => {
      console.log(img)
      console.log('Predictions: ';
      console.log(predictions);
    });
  });

我从控制台(img)发现,不同浏览器的img格式不同。结果是一样的:在笔记本电脑浏览器中工作,但不在移动浏览器中,但如果我把在笔记本电脑浏览器中产生的 img 静态方式放在两个地方,它都可以工作。

IE

img.src = 'data:image/png;base64,iVBORw0KGgoAAAANS...AASUVORK5CYII='

// 上面的值是在笔记本电脑中产生的,对于硬编码输入为 img.src,预测在笔记本电脑和移动设备上都很好。

img.src = 'data:image/png;base64,iVBORw0KGgoAAAANS...AAAAAElFTkSuQmCC'  

// 上面的值是在移动浏览器中产生的,对于硬编码输入,预测在任何笔记本电脑/移动浏览器中都不起作用

标签: javascriptnode.jstensorflowobject-detectionobject-recognition

解决方案


推荐阅读