网上大量的opecv.js 都是html的 不是vue的 虽然有 但是也不是 uniapp的 为了让代码成功运行真的踩雷了非常多的坑 虽然网上也有看到代码 但是居然要钱 这我真受不了 所以 直接上代码

请仔细阅读代码 几乎每一行我都加了详细解释 复制去掉文字即可直接运行

<template>
  <div>
  经过我的各种踩坑加阅读opencv.js源码 我发现 如果直接使用canvas 标签
  或者video标签 在网页中会变渲染成uni-video 
  或者uni-canvas  这样的话下面的 this.$refs.就会没有方法 就报错
    <view v-show="false" class="" v-html="video"></view>
    <view class="" v-html="canvas"></view>
    
  </div>
</template>

<script>
  import cv from '@/utils/opencv.js'
  export default {
    data() {
      return {
       使用v-html="video"的方式渲染到页面上 一样可用
        video: '<video ref="videoInput" id="videoInput"  width="300px" height="300px"></video>',
        canvas: '<canvas ref="canvasOutput" id="canvasOutput" width="300px" height="300px"></canvas>'
      }
    },
    mounted() {
    必须加上这个 我发现就算在mounted里面初始化opencv也一样会报错 
    必须在这个回调里面加载opecv的初始化 
    这个时候才是真的加载完成了 不然也会报错
      cv['onRuntimeInitialized'] = () => {
        this.startVideoCapture();
      }
    },
    methods: {
    读取方法 传入一个camera对象
      processVideo(camera) {
      下面的代码就不多说了 opencv基础知识 不会就学习opencv
        const src = new cv.Mat(300, 300, cv.CV_8UC4);
        const dst = new cv.Mat(300, 300, cv.CV_8UC4);
        try {
        下面的代码如果用用过opencv的话 应该一样能看懂 
        opencv已经成功加载并且运行起来了
          camera.read(src); // 读取视频帧
          cv.imshow('canvasOutput', src); // 在 canvas 上显示灰度图
          释放资源
          src.delete()
          dst.delete()
          
          // 设置下一帧处理的延迟时间
         setTimeout(() => {
               this.processVideo(camera);
             }, 1000 / 30);
        } catch (err) {
          console.error('Error processing video: 在读取的时候捕捉到了错误', err);
        }
      },
       初始化方法
      startVideoCapture() {
      获取video和canvas
        let canvas = this.$refs.canvasOutput;
        let video = document.getElementById('videoInput');
        下面这一串是在浏览器打开摄像头并且把数据流赋给video 
        并且开始播放的代码
        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({
              video: true
            })
            .then(stream => {
              video.srcObject = stream;
              video.play();
            })
            .catch(err => {
              console.error("Error打开摄像头失败", err);
            });
        } else {
          console.error("getUserMedia失败");
        }
        
        利用opencv创建摄像头输入流
        const camera = new cv.VideoCapture('videoInput');
        // 开始视频流处理
        this.processVideo(camera);
      },
    },
  };
</script>

感谢观看 如果可以的话 请帮忙点一个赞吧