优化

chenyc

2024-01-15 191100aca6b5afac1d3c76afeea56b3063b81071

 src/main.ts

@@ -4,95 +4,97 @@
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;
// 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 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();
};
//   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)