如何在 Vue.js 中使用 ImageCapture？

Question

我正在尝试截取 Ionic Vue 应用程序的整个可见页面的屏幕截图，但出现错误“找不到名称 'ImageCapture'”。

const stream = await navigator.mediaDevices.getDisplayMedia();
      const screenVideoTrack = stream.getVideoTracks()[0];
      console.log("screenVideoTrack", screenVideoTrack);
      const capture = new ImageCapture(screenVideoTrack); // here the error occurs
      // when you need the still image
      const bitmap = await capture.grabFrame();
      // if you want a Blob version
      const canvas = document.createElement("canvas");
      if (!canvas) {
        console.error("no canvas created");
        return;
      }
      canvas.width = bitmap.width;
      canvas.height = bitmap.height;
      canvas.getContext("bitmaprenderer")?.transferFromImageBitmap(bitmap);
      const blob = await new Promise((res) => canvas.toBlob(res));

我确实通过 npm 安装了 ""@types/w3c-image-capture": "^1.0.5","。编译时出错而不是执行时出错（编译不正确无法执行）

我如何让 Ionic Vue 意识到这种类型确实存在？

是否有其他方法可以截取整个页面的屏幕截图？（lib 'html2canvas' 不适合我）

Answer 1

我找到了一个类似的 question to mine on Whosebug and followed the answer given by Paweł Ciucias。我必须手动将库添加到 'compileroptions -> types'

下的 tsconfig.json 文件中

"types": [
      "webpack-env",
      "jest",
      "w3c-image-capture"
    ],

错误现在消失了！

如何在 Vue.js 中使用 ImageCapture？

How to use ImageCapture in Vue.js?

javascript

screenshot

vue.js