search

steren / stereo-img

web component to display stereographic pictures on web pages, with VR support
https://stereo-img.steren.fr
Apache License 2.0
23 stars 6 forks source link

Images from Insta360 Evo not supported #48

Closed azw413 closed 3 months ago

azw413 commented 3 months ago

sample

When using this image as a sample, I get an error :- 

stereo-img.js:204 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')
    at StereoImg.createEye (stereo-img.js:204:21)
    at StereoImg.initialize3DScene (stereo-img.js:311:18)
    at async StereoImg.parseImageAndInitialize3DScene (stereo-img.js:320:7)
    at async StereoImg.init (stereo-img.js:366:7)

You can keep this image as an example for your project, thanks

steren commented 3 months ago

Thanks for the bug report.

I was able to load this image successfully at https://stereo-img.steren.fr

While it loads fine in the viewer, the field of view isn't automatically detected as a 180. I will see what I can do to improve this.

Can you share the exact steps you are using? (component attributes)

azw413 commented 3 months ago

That's interesting, I also uploaded to your site and it displayed without issue. I cloned the project and copied the js client side libraries in lib, parsers, vendor and stereo-img.js to the docroot and then used this as the template :- 

<html>
<head>

    <!-- Polyfill for WebXR -->
    <script src='https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'></script>
    <script>
        window.polyfill = new WebXRPolyfill();
    </script>

    <script type="module" src="stereo-img.js"></script>
</head>
<body>
<stereo-img src="media/sample.jpg" type="vr"></stereo-img>
</body>
</html>

So basically copying your example. I don't have an npm backend and instead using a rust backend so maybe I've missed some crucial step. I'm assuming that all the logic is client side, perhaps I'm mistaken and there's some processing on the server?

Thanks.

steren commented 3 months ago

Thanks, can you replace type=vr with type=left-right ? Or remove the attribute entirely.

I'll make sure the component doesn't crash when the VR180 type cannot find metadata it is looking for

azw413 commented 3 months ago

Thanks for the suggestion, it works for the non-vr display :- 

<stereo-img src="media/sample.jpg" angle="180" wiggle="false"></stereo-img>

but not for the VR mode where only the left eye view moves and the right doesn't - it's just not VR any more.

steren commented 3 months ago

Added image to example folder in https://github.com/steren/stereo-img/commit/ff907649cb004e99180f7f862308e3d15b152e2b

steren commented 3 months ago

using https://mutiny.cz/exifr/, I wasn't able to see any focal length information in the example image.

So we'll need to hardcode using 180deg when "Model": "insta360 evo"

steren commented 3 months ago

Hardcoded in https://github.com/steren/stereo-img/commit/f4025b27d885722282f7fee1a29b74131780833d

Added as example in https://github.com/steren/stereo-img/commit/89890dcf5c2f88fa7ab0851f875f28ff3f0b2ba4