Javascript 如何将opencv输出显示到画布?

Javascript 如何将opencv输出显示到画布?,javascript,opencv,Javascript,Opencv,我正试图学习openCv以下的内容。这是我的完整代码: <script async src="js/opencv.js" onload="openCvReady()" type="text/javascript"></script> <video id="video" width="320" height="240"></video&g

我正试图学习openCv以下的内容。这是我的完整代码:

<script async src="js/opencv.js" onload="openCvReady()" type="text/javascript"></script>
<video id="video" width="320" height="240"></video>
<canvas id="cvOutput" width="320" height="240"></canvas>
<script>
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
let video = document.getElementById('video');
var streaming = false
var handleSuccess = function(stream) {
  video.srcObject = stream;
  video.play()
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  streaming = true
};


navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true
  })
  .then(handleSuccess)


function openCvReady() {
  cv['onRuntimeInitialized'] = async () => {
    // pause here until streaming is true
    await sleep(5000);
    let canvasOutput = document.getElementById("cvOutput");
    let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
    let dst = new cv.Mat(video.height, video.width, cv.CV_8UC1);
    let cap = new cv.VideoCapture(video);
    
    const FPS = 30;
    function processVideo() {
      try {
          if (!streaming) {
              // clean and stop.
              console.log('Clean and stop')
              src.delete();
              dst.delete();
              return;
          }
          let begin = Date.now();
          // start processing.
          cap.read(src);
          cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
          cv.imshow('canvasOutput', dst); //line 54
          // schedule the next one.
          let delay = 1000/FPS - (Date.now() - begin);
          setTimeout(processVideo, delay);
      } catch (err) {
          //utils.printError(err);
          console.log(err)
      }
    };
    
    // schedule the first one.
    setTimeout(processVideo, 0);

  };
}
</script>
该行:

cv.imshow('canvasOutput', dst);
不正确,因为它采用canvas元素的id,而不是变量名

尝试:

cv.imshow('canvasOutput', dst);
cv.imshow('cvOutput', dst);