CODEWITHSUNDEEP
angularionic-frameworkhtml5-video
CodeAssasins
CodeAssasins

Reputation: 237

call another method inside video addEventListener

I am new at web development and building an app in Ionic 4+Angular 5. I'm selecting a video file and uploading it along with its thumbnail. I'm able to generate a thumbnail. But problem is I am not sure how to call a method inside video addeventlistener loadeddata. When I call an external method (this.convertB64ToBlob()) directly inside the eventlistener, I get an error saying this.convertB64ToBlob is not a function. Please let me know if there is another way to call an external method directly. Thanks.

// method to get thumbnail from video tag

getThumbnail(blob, filesize, filetype, filename) {
    var time = 15;
    var scale = 1;

    this.cdRef.detectChanges();
    const myVideo = this.elementRef.nativeElement.querySelector('#myVideo');
    var output = document.getElementById('output');
    myVideo.addEventListener('loadedmetadata', function () {

      this.currentTime = time;

    }, false);


    myVideo.addEventListener('loadeddata', function () {

      var canvas = document.createElement("canvas");
      canvas.width = myVideo.videoWidth * scale;
      canvas.height = myVideo.videoHeight * scale;
      canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height);

      var img = document.createElement("img");
      img.setAttribute("id", "thumbImg");
      img.src = canvas.toDataURL();
      output.appendChild(img);
      this.fImgPath = canvas.toDataURL().split(',')[1];
      console.log('my video path: '+this.fImgPath);
      const tblob = this.convertB64ToBlob(this.fImgPath);
      this.getToken(blob, tblob, filesize, filetype, filename);

    }, false); 

    //myVideo.loadeddata = this.setImage.bind(myVideo, blob, filesize, filetype, filename);


  }

Error I got

Upvotes: 0

Views: 336

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

Convert all the function() references to Arrow function syntax so that it scopes this to the Page.

// method to get thumbnail from video tag

getThumbnail(blob, filesize, filetype, filename) {
  var time = 15;
  var scale = 1;

  this.cdRef.detectChanges();
  const myVideo = this.elementRef.nativeElement.querySelector('#myVideo');
  var output = document.getElementById('output');
  myVideo.addEventListener('loadedmetadata', () => {

    this.currentTime = time;

  }, false);


  myVideo.addEventListener('loadeddata', () => {

    var canvas = document.createElement("canvas");
    canvas.width = myVideo.videoWidth * scale;
    canvas.height = myVideo.videoHeight * scale;
    canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");
    img.setAttribute("id", "thumbImg");
    img.src = canvas.toDataURL();
    output.appendChild(img);
    this.fImgPath = canvas.toDataURL().split(',')[1];
    console.log('my video path: ' + this.fImgPath);
    const tblob = this.convertB64ToBlob(this.fImgPath);
    this.getToken(blob, tblob, filesize, filetype, filename);

  }, false);

  //myVideo.loadeddata = this.setImage.bind(myVideo, blob, filesize, filetype, filename);


}

Upvotes: 1

Related Questions