User-vidu to HTMLVideoElement ? (Screenshot)

Issues developing apps
1

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.

2

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
image939×161 25.1 KB

3

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
html11003×598 73.1 KB

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
There is the error message I get :
error1
error1977×251 55.1 KB

4

<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

5

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

6

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