# How to take screenshot

**URL:** <https://openvidu.discourse.group/t/how-to-take-screenshot/757>\
**Category:** Issues developing apps\
**Tags:** v2\
**Created:** [May 11, 2020, 11:42am UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757 "2020-05-11T11:42:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Somnath\_Pal](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/somnath_pal/32/237_2.png) [@Somnath\_Pal](https://openvidu.discourse.group/u/Somnath_Pal)\
**Post date:** [May 11, 2020, 11:42am UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757/1 "2020-05-11T11:42:26Z")

</div>

```
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
    }); */
    
});

```

}

---

<div class="post-metadata">

**Author:** ![vipin\_mishra](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/vipin_mishra/32/32_2.png) [@vipin\_mishra](https://openvidu.discourse.group/u/vipin_mishra)\
**Post date:** [May 12, 2020, 6:26am UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757/2 "2020-05-12T06:26:33Z")

</div>

> **[Taking still photos with WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos)**
>
> This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.

  
May be it will be helpful for you

---

<div class="post-metadata">

**Author:** ![Somnath\_Pal](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/somnath_pal/32/237_2.png) [@Somnath\_Pal](https://openvidu.discourse.group/u/Somnath_Pal)\
**Post date:** [May 12, 2020, 6:38am UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757/3 "2020-05-12T06:38:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vipin\_mishra](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/vipin_mishra/32/32_2.png) [@vipin\_mishra](https://openvidu.discourse.group/u/vipin_mishra)\
**Post date:** [May 12, 2020, 6:59am UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757/4 "2020-05-12T06:59:13Z")

</div>

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();

  }

});

```

}

---

<div class="post-metadata">

**Author:** ![Somnath\_Pal](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/somnath_pal/32/237_2.png) [@Somnath\_Pal](https://openvidu.discourse.group/u/Somnath_Pal)\
**Post date:** [May 12, 2020, 7:12am UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757/5 "2020-05-12T07:12:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Nitesh\_Kumar\_Barnwal](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/nitesh_kumar_barnwal/32/463_2.png) [@Nitesh\_Kumar\_Barnwal](https://openvidu.discourse.group/u/Nitesh_Kumar_Barnwal)\
**Post date:** [May 21, 2020, 7:31pm UTC](https://openvidu.discourse.group/t/how-to-take-screenshot/757/6 "2020-05-21T19:31:53Z")

</div>

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

> **[Taking still photos with WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos)**
>
> This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.