How to take screenshot

OpenVidu v2 Issues developing apps
1 
Tried this method to take screenshot, but its giving blank png file.

captureImage() {

const FRAME_RATE = 10;
this.OV.getUserMedia({
  audioSource: false,
  videoSource: undefined,
  resolution: '1280x720',
  frameRate: FRAME_RATE
}).then(mediaStream => {
  var videoTrack = mediaStream.getVideoTracks()[0];
  var video = document.createElement('video');
  video.srcObject = new MediaStream([videoTrack]);

  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  //ctx.filter = 'grayscale(100%)';

  video.addEventListener('play', () => {
    var loop = () => {
      if (!video.paused && !video.ended) {
        ctx.drawImage(video, 0, 0, 300, 170);
        setTimeout(loop, 1000 / FRAME_RATE); // Drawing at 10 fps
        this.download(canvas.toDataURL("image/png"))
      }
    };
    loop();
  });
  video.play();

  //var grayVideoTrack = canvas.captureStream(FRAME_RATE).getVideoTracks()[0];
  /* var publisher = this.OV.initPublisher(
    'video-container',
    {
      audioSource: false,
      videoSource: grayVideoTrack
    }); */
    
});

}

2

May be it will be helpful for you
3

Thanks for the reply. My project is of Ionic 5 with Angular support. I’ve seen that already. But the problem is I don’t have the video tag directly in the html page here. I have a wrapper class user-video as given in Github code of OpenVidu.

4

ok as i know you are talking about angular library . In this case i will say make your one method in user.ts
see this file in openvidu-call
1.dialog-choose-room.component.ts
takePhoto() {

this.localUsers[0].setUserAvatar();

this.videoAvatar = this.localUsers[0].getAvatar();

this.setAvatar('video');

}
2.user.ts

public setUserAvatar(img?: string): Promise {

return new Promise((resolve) => {

  if (!img) {

    this.createVideoAvatar();

    const video = <HTMLVideoElement>document.getElementById('video-' + this.getStreamManager().stream.streamId);

    const avatar = this.videoAvatar.getContext('2d');

    avatar.drawImage(video, 200, 120, 285, 285, 0, 0, 100, 100);

    console.log('Photo was taken: ', this.videoAvatar);

    resolve();

  } else {

    this.randomAvatar = img;

    resolve();

  }

});

}

5

In my project’s design, my small circular avatar’s stream overlaps the other person’s full screen video stream. So can I make the screenshot have both the streams?

6

can you please help me to save the captured picture from given link above.