Video quality issue

[DevArt002]

**Bug Description: The streaming video from webcamera, it looks not good. I mean, the edge is sharp. Just like "anti-aliasing".

would like to solve soon.

Best regards.

**To Reproduce Just see the streaming video closely and check with other site streaming video via webcamera.

**Recorded Video https://drive.google.com/open?id=1JZf3moHJ0MjCzEkk2POn6tINezJKXZlH

[xavierjs]

Hi,

Thank you for this detailed bug report. This is not really a bug. Here are some ways to avoid this. I would be interested by your feedback :) .

Video settings

First you can play with video settings to request a higher camera resolution, cf https://github.com/jeeliz/jeelizFaceFilter#optionnal-init-arguments In the boilerplate demo (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube), we use the resizer helper ( https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizThreejsHelper.js ) which will select the video resolution which is the closest to the <canvas> size. If you have a small canvas, it will request a small resolution.

Canvas resolution

In the default demo (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube), we use the three.js helper: https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizThreejsHelper.js

We create a texture called _glVideoTexture or _threeVideoTexture and we display it on the canvas. So the video that you see is not directly the <video> element, it is the video drawn on the canvas.

And the <canvas> has a fixed resolution (HTML inline width and height properties). This resolution is set by the resizer helper ( https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizResizer.js ) at function update_sizeCanvas(). Then even if you change the display size of the canvas using CSS, its resolution will stay the same.

• If your video is 1920x720
• Then if your canvas is 100x100 pixels (<canvas width='100' height='100'></canvas>) then the video texture will be 100x100 pixels and your displayed video resolution will be 100x100
• If the CSS canvas size is 1020x1024 pixels, it does not matter. the video texture resoltion will still be 100x100 pixels.

Display original video

Instead of displaying the video as a texture, you can do a transparent background 3D rendering and put the <video> element behind, aligned using CSS. Then you won't lose video resolution by resizing. This demo does the trick: https://jeeliz.com/demos/faceFilter/demos/threejs/cube2cv/ and source here: https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube2cv But there are 2 drawbacks:

• you cannot tweak the background color using GLSL shaders
• it involves browser compositing (costly) whereas displaying the video with a shader has almost no computationnal cost since the video is already put into a texture by FaceFilter core
• it require a perfect alignment through CSS positionning.

[DevArt002]

Hello.

Thanks for your reply. But the problem is not resolution.

I compared your video view with another one from another site. Here, it’s one example.

https://drive.google.com/open?id=1JZf3moHJ0MjCzEkk2POn6tINezJKXZlH https://drive.google.com/open?id=1JZf3moHJ0MjCzEkk2POn6tINezJKXZlH

As you can, your video looks sharper than the BRFv4. The quality of the BRFv4 is better than yours.

Actually, I like your library. Because your library has more concentrated tracking than another webgl tracking ones.

But the quality, I would like to fix on my side.

Hope to hear more from you. Cheers.

On Aug 6, 2019, at 5:22 AM, Bourry Xavier <notifications@github.com mailto:notifications@github.com> wrote:

Hi,

Thank you for this detailed bug report. This is not really a bug. Here are some explanations:

Video settings

First you can play with video settings to request a higher camera resolution, cf https://github.com/jeeliz/jeelizFaceFilter#optionnal-init-arguments https://github.com/jeeliz/jeelizFaceFilter#optionnal-init-arguments In the boilerplate demo (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube), we use the resizer helper ( https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizThreejsHelper.js https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizThreejsHelper.js ) which will select the video resolution which is the closest to the size. If you have a small canvas, it will request a small resolution.

Canvas resolution

In the default demo (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/cube), we use the three.js helper: https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizThreejsHelper.js https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizThreejsHelper.js We create a texture called _glVideoTexture or _threeVideoTexture and we display it on the canvas. So the video that you see is not directly the

And the has a fixed resolution (HTML inline width and height properties). This resolution is set by the resizer helper ( https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizResizer.js https://github.com/jeeliz/jeelizFaceFilter/blob/master/helpers/JeelizResizer.js ) at function update_sizeCanvas(). Then even if you change the display size of the canvas using CSS, its resolution will stay the same.

If your video is 1920x720 Then if your canvas is 100x100 pixels () then the video texture will be 100x100 pixels and your displayed video resolution will be 100x100 If the CSS canvas size is 1020x1024 pixels, it does not matter. the video texture resoltion will still be 100x100 pixels. Display original video

Instead of displaying the video as a texture, you can do a transparent background 3D rendering and put the

you cannot tweak the background color using GLSL shaders it involves browser compositing (costly) whereas displaying the video with a shader has almost no computationnal cost since the video is already put into a texture by FaceFilter core it require a perfect alignment through CSS positionning. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jeeliz/jeelizFaceFilter/issues/108?email_source=notifications&email_token=AMOLRQBD446PJBZMLPDUF23QDB4XNA5CNFSM4IJJB4I2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3SZ7TI#issuecomment-518365133, or mute the thread https://github.com/notifications/unsubscribe-auth/AMOLRQDVZZKRHM26H552UXTQDB4XNANCNFSM4IJJB4IQ.

[xavierjs]

There are 2 resolutions: the <video> resoluton and the <canvas> resolution. You should have enough elements as a web developer to fix it with my reply (I gave 3 stuffs to try). If you don't manage to get it we can also do the job as a dev service.

Best, Xavier

[xavierjs]

I close this issue since there is no feedbacks. Feel free to re-open it to discuss some of the proposed solutions.

Best, Xavier