# User-vidu to HTMLVideoElement ? (Screenshot)

**URL:** <https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287>\
**Category:** Issues developing apps\
**Tags:** v2\
**Created:** [June 24, 2020, 3:05pm UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287 "2020-06-24T15:05:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DreamEp](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@DreamEp](https://openvidu.discourse.group/u/DreamEp)\
**Post date:** [June 24, 2020, 3:05pm UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287/1 "2020-06-24T15:05:17Z")

</div>

Hello,

I’m trying to make a button to take a “screenshot” of a user-video tag, like if it was a basic video tag,  
but I got some isssues. When I use getElementById on my user-video tag and use HTMLVideoElement before to do it, it seems to be recognized as an HTMLElement and not HTMLVideoElement so I can’t have access to the width or the height of my video for exemple.  
Same when I want to call drawImage() function and put the user-video in argument of the function, the console told me :

_“Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’”_

So my question is : How can I work with an user-video tag as if It was a basic video tag ?  
How to solve that problem and perform a screenshot by calling the drawImage() function with the use of a user-video tag instead of video tag ?

Thanks you very much.

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [June 26, 2020, 10:16am UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287/2 "2020-06-26T10:16:39Z")

</div>

Just be sure to identify the proper HTMLVideoElement where `<video>` is created. Take into account that openvidu-browser.js will create `<video>` tags as children elements of id passed as parameter in `subscribe`:

 ![image](https://global.discourse-cdn.com/free1/uploads/openvidu/original/1X/4ae4261ed78550664c18c93471d7b1432b11c2e4.png)

---

<div class="post-metadata">

**Author:** ![DreamEp](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@DreamEp](https://openvidu.discourse.group/u/DreamEp)\
**Post date:** [June 29, 2020, 11:21am UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287/3 "2020-06-29T11:21:47Z")

</div>

I don’t get it, I’m currently working with openvidu-insecure-angular.  
I’m trying to take a local screenshot on a \>user-video\> tag which is coded in my html.

 ![html1](https://global.discourse-cdn.com/free1/uploads/openvidu/original/1X/b775d654405091c20f0a7fa773b9e3c51e06655e.jpeg)  
Then I’m trying to implement the function takePicture(), which is based on webRTC tutorial, but it looks like my \>user-video\> is not recognized as a video, so I cant put it in my drawImage()…  
 ![takepicture](https://global.discourse-cdn.com/free1/uploads/openvidu/original/1X/35b95f45c2956bb34c67983a7c0659780638e9d5.jpeg)  
There is the error message I get :  
 ![error1](https://global.discourse-cdn.com/free1/uploads/openvidu/original/1X/daa88b384960fda5599d13d7c9965e345922af6b.jpeg)

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [June 29, 2020, 5:42pm UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287/4 "2020-06-29T17:42:18Z")

</div>

`<user-video>` is not an HTMLVideoElement.

Take a look to the DOM to see how a new video element child of `<user-video>` is the real video element.

Regards

---

<div class="post-metadata">

**Author:** ![DreamEp](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@DreamEp](https://openvidu.discourse.group/u/DreamEp)\
**Post date:** [June 30, 2020, 9:29am UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287/5 "2020-06-30T09:29:38Z")

</div>

Hello @micael.gallego,

I didnt know where I can found the DOM associate to my problem, could you give me a link ?

Thanks you very much,

Regards

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [June 30, 2020, 10:13am UTC](https://openvidu.discourse.group/t/user-vidu-to-htmlvideoelement-screenshot/1287/6 "2020-06-30T10:13:15Z")

</div>

Take a look to DOM loaded in the browser to see where is `<video>` tag.