External video element

[hcevizci]

Hi gruhn,
I have an ip camera and i want to recognize QR code from this camera. I Stream from rtsp protocol with nodejs. Now how to prop video element to vue-qr-reader?

[gruhn]

Interesting use case. I'm not familiar with that API. How do you attach that video stream to the video element?

[hcevizci]

I watched this video here is the link https://youtu.be/fmLagxRhfpM?si=U0nEE3q3-Yw5Gg1V
There is a video element in your QR code stream template. I think it will work if we give this video element from outside. but I don't know how to do it can you help me.

[gruhn]

There is a video element in your QR code stream template. I think it will work if we give this video element from outside.

I think it's not that easy. At the moment the component internally requests a camera stream and attaches it to that video element. When that is done the scanning process starts. If the camera stream terminates, we stop the scanning process. However, if video element is provided from the outside then we don't know when to start or stop scanning. Maybe we can listen to events on the video element to make this work but I suspect this is a non-trivial change with many edge cases to consider: How do we react (can we?) when the custom video element is removed from the DOM? What if you update the constraints prop while providing a custom video element? Should we now request a camera stream again? Or is the custom video element having "priority"?

I recommend you have a look at this function. It takes the video element from the template as an argument and attaches a camera stream to it. This function is invoked whenever the Vue component is mounted and also when props of the component change. Maybe you can get away with adjusting this function so it gets the video stream from some other source.

[hcevizci]

Thank you for your interest. I will try your suggestion. I will write you the result. I hope I can do it.