javascript TensorFlowJS画布大小错误-如何获得图像显示？

g6baxovj 于 2023-08-02 发布在 Java

关注(0)|答案(3)|浏览(98)

我正在尝试使用BodyPix/Tensorflow来模糊网络摄像头的背景。我正在努力遵循这个指南。https://github.com/vinooniv/video-bg-blur的数据。这显然对他们有效，因为他们有一个活生生的例子。
下面是我的代码：

ngOnInit(): void {
    const videoElement = document.getElementById('face-blur-video') as HTMLVideoElement
    const canvas = document.getElementById('blur-canvas') as HTMLCanvasElement;
    videoElement.onplaying = () => {
      canvas.height = videoElement.height
      canvas.width = videoElement.width
    }
    const context = canvas.getContext('2d');
    context.canvas.height = 320;
    context.canvas.height = 480;
    

    navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(stream => {
      videoElement.srcObject = stream;
      videoElement.play();
      const options: ModelConfig = {
        multiplier: .75,
        outputStride: 16,
        quantBytes: 4,
        architecture: 'MobileNetV1'
  
      }
      tfjs.getBackend();
      BodyPix.load(options).then(bp => this.perform(bp))
    })

个字符
但是，当应用程序运行时，我得到以下错误：

core.js:6162 ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at drawWithCompositing (body-pix.esm.js:17)
    at Module.drawBokehEffect (body-pix.esm.js:17)
    at FaceBlurComponent.<anonymous> (face-blur.component.ts:56)
    at Generator.next (<anonymous>)
    at fulfilled (tslib.es6.js:73)
    at ZoneDelegate.invoke (zone-evergreen.js:372)
    at Object.onInvoke (core.js:28510)
    at ZoneDelegate.invoke (zone-evergreen.js:371)
    at Zone.run (zone-evergreen.js:134)
    at zone-evergreen.js:1276
    at resolvePromise (zone-evergreen.js:1213)
    at zone-evergreen.js:1120
    at zone-evergreen.js:1136
    at ZoneDelegate.invoke (zone-evergreen.js:372)
    at Object.onInvoke (core.js:28510)
    at ZoneDelegate.invoke (zone-evergreen.js:371)
    at Zone.run (zone-evergreen.js:134)
    at zone-evergreen.js:1276
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28497)

型
我已经尽可能地设置了宽度和高度。为什么TensorFlow检测到画布的高度/宽度为零？

JavaScript

来源：https://stackoverflow.com/questions/66805324/tensorflowjs-canvas-size-error-how-to-get-image-displaying

3条答案

按热度按时间

ztmd8pv51#

所以我最终查看了Google TensorFlow/BodyPix演示并做了一些修改。任何改变都不应该有什么不同，但无论修复是什么，一切都正常工作。下面是我的工作代码：

import { Component, OnInit } from '@angular/core';
import * as BodyPix from '@tensorflow-models/body-pix';
import * as tfjs from '@tensorflow/tfjs';
import { ModelConfig } from '@tensorflow-models/body-pix/dist/body_pix_model';

@Component({
  selector: 'opentok-face-blur',
  templateUrl: './face-blur.component.html',
  styleUrls: ['./face-blur.component.scss']
})
export class FaceBlurComponent implements OnInit {

  
  videoElement: HTMLVideoElement;
  canvas : HTMLCanvasElement;
  context 
  constructor() { }

  ngOnInit(): void {

    this.videoElement = document.getElementById('face-blur-video') as HTMLVideoElement
    this.canvas = document.getElementById('blur-canvas') as HTMLCanvasElement;
    this.context = this.canvas.getContext('2d');
    this.context.fillStyle = 'black'
    this.context.fillRect(0,0,this.canvas.width,this.canvas.height);

    this.bindPage();

  }

  async setupMedia() {
    const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: false});
    this.videoElement.srcObject = stream;

    this.videoElement.onloadedmetadata = () => {
      this.videoElement.width = this.videoElement.videoWidth;
      this.videoElement.height = this.videoElement.videoHeight;
    }
    await this.videoElement.play();
    return this.videoElement;
  }

  async bindPage() {
    tfjs.getBackend();
    const net = await BodyPix.load({
      multiplier: .75,
      outputStride: 16,
      quantBytes: 4,
      architecture: 'MobileNetV1'
    });
    await this.setupMedia();
    this.segmentBodyInRealTime(net);
  }

  async segmentBodyInRealTime(net: BodyPix.BodyPix) {
    const segmentation = await net.segmentPerson(this.videoElement)
    BodyPix.drawBokehEffect(this.canvas,this.videoElement,segmentation,6,2,true);
    this.segmentBodyInRealTime(net);
    
  }
}

字符串
我基本上做了一堆异步方法，然后递归地调用绘制效果。我不知道为什么会成功，但确实成功了。

赞(0）回复(0）举报 2023-08-02

mzillmmw2#

在我的情况下，我正在传输的视频没有宽度和高度，设置此修复此

<video
    id="video"
    controls
    loop
    autoplay
    muted
    width="250"
    height="200"
  />

字符串

赞(0）回复(0）举报 2023-08-02

ar5n3qh53#

在我的情况下，我传输的视频没有宽度和高度，设置这个固定了这个.非常好的解决方案。

<video
id="video"
controls
loop
autoplay
muted
width="250"
height="200"
/>

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

javascript TensorFlowJS画布大小错误-如何获得图像显示？

3条答案

相关问题

热门标签

最新问答