HTML5-video - autoplay

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/v1.8.2/ai-sdk.js"></script>
<video playsinline preload="auto" src="https://demo.morphcast.com/sdk-features/test.mp4" type="video/mp4" id="video"></video>

JavaScript

class Camera {
  constructor(camera) {
    this._ytPlayer = camera;
    this._canvas = document.createElement('canvas');
    this._ctx = this._canvas.getContext("2d");
    this._stopped = true;
  }

  getFrame() {
    this._canvas.height = this._ytPlayer.videoHeight;
    this._canvas.width = this._ytPlayer.videoWidth;
    
    if (this._canvas.height < 2) {
    	return Promise.reject();
    }
    
    this._ctx.drawImage(this._ytPlayer, 0, 0, this._ytPlayer.videoWidth, this._ytPlayer.videoHeight);
    return Promise.resolve(this._ctx.getImageData(0, 0, this._canvas.width, this._canvas.height));
  }

  start() {
    console.log("BBBBBB");
    this._stopped = false;
    return Promise.resolve();
  }

  stop() {
    this._stopped = true;
    return Promise.resolve();
  }

  get stopped(){
    console.log("AAAAA");
    return this._stopped;
  }

  get width() {
    return this._ytPlayer.videoWidth;
  }

  get height() {
    return this._ytPlayer.videoHeight;
  }
};

// global or parent scope of handlers
let video = document.getElementById("video"); // added for clarity: this is needed
let i = 0;

let source = new Camera(video);

CY.loader()
  .addModule(CY.modules().FACE_DETECTOR.name, {maxInputFrameSize: 320})
  .addModule(CY.modules().FACE_POSE.name, {})
  .addModule(CY.modules().FACE_AGE.name, {
  windowSizeMs: 4000,
  maxVarianceCutoff: Math.pow(7, 2),
  numericalStability: 1
})
  .addModule(CY.modules().FACE_GENDER.name, {})
  .addModule(CY.modules().FACE_EMOTION.name, {smoothness: 0.5})
  .addModule(CY.modules().FACE_FEATURES.name, {})
  .addModule(CY.modules().FACE_AROUSAL_VALENCE.name, {})
  .addModule(CY.modules().FACE_ATTENTION.name, {})
  .source(source)
  .delayMs(142)
  .maxInputFrameSize(320)
  .load()
  .then(({start}) => {
  	//start();
  	//video.playbackRate = 0.5;
		//video.play();
  });

//video.playbackRate = 0.5;
//video.play();

/*
video.addEventListener('loadeddata', function() {
    this.currentTime = i;
});

video.addEventListener('seeked',...