tianjia

chenyc

2024-05-13 83c3fd352439e8f8c5858aaa8190e6ea33e2722d

 src/main.ts

@@ -4,95 +4,12 @@
import router from './router/index'
import "tracking";
import "tracking/build/data/face";
import "tracking/build/data/eye";
import "tracking/build/data/mouth";
import { ElMessage } from 'element-plus';
import { createPinia } from 'pinia'
import App from './App.vue'
import './samples/node-api'

function getUserMedia(constrains:any, success:any, error:any) {
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      //最新标准API
      ElMessage({ type: 'success', message: '支持最新标准API' });
      navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
  } else if (navigator.webkitGetUserMedia) {
    ElMessage({ type: 'success', message: '支持webkit内核浏览器' });
      //webkit内核浏览器
      navigator.webkitGetUserMedia(constrains).then(success).catch(error);
  } else if (navigator.mozGetUserMedia) {
    ElMessage({ type: 'success', message: '支持Firefox浏览器' });
      //Firefox浏览器
      navagator.mozGetUserMedia(constrains).then(success).catch(error);
  } else if (navigator.getUserMedia) {
    ElMessage({ type: 'success', message: '支持旧版API' });
      //旧版API
      navigator.getUserMedia(constrains).then(success).catch(error);
  } else {
    ElMessage('浏览器不支持getUserMedia');
  }
}
// 要重写initUserMedia_ 方法，因为chrome的底层api已做调整
window.tracking.initUserMedia_ = function (element: { srcObject: any; src: string; }, opt_options: { audio: any; }) {
  const options = {
      video: true,
      audio: !!(opt_options && opt_options.audio)
  };
  getUserMedia(options, function (stream: Blob | MediaSource) {
      try {
          element.srcObject = stream;
      } catch (err) {
          element.src = window.URL.createObjectURL(stream);
      }
  }, function (e: { message: MessageParams; }) {
    ElMessage(e.message);
  }
  );
};
// 重写视频捕获方法，因为不能停止 stop无效的bug
window.tracking.trackVideo_ = function (element: CanvasImageSource, tracker: tracking.Tracker) {
  console.log('trackVideo_');
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width: number;
  var height: number;

  var resizeCanvas_ = function () {
      width = element.offsetWidth;
      height = element.offsetHeight;
      canvas.width = width;
      canvas.height = height;
  };
  resizeCanvas_();
  element.addEventListener('resize', resizeCanvas_);

  var requestId: number;
  var stopped = false;
  var requestAnimationFrame_ = function () {
      requestId = window.requestAnimationFrame(function () {
          if (element.readyState === element.HAVE_ENOUGH_DATA) {
              try {
                  // Firefox v~30.0 gets confused with the video readyState firing an
                  // erroneous HAVE_ENOUGH_DATA just before HAVE_CURRENT_DATA state,
                  // hence keep trying to read it until resolved.
                  context.drawImage(element, 0, 0, width, height);
              } catch (err) { }
              tracking.trackCanvasInternal_(canvas, tracker);
          }
          if (stopped !== true) {
              requestAnimationFrame_();
          }
      });
  };
  var task = new tracking.TrackerTask(tracker);
  task.on('stop', function () {
      stopped = true;
      window.cancelAnimationFrame(requestId);
  });
  task.on('run', function () {
      stopped = false;
      requestAnimationFrame_();
  });
  return task.run();
};
createApp(App)
  .use(createPinia())
  .use(ElementPlus)