Add videoLayer video with addMarker method, TypeError: Cannot read properties of undefined (reading 'transfer')

[FED-Noob]

Describe the bug

I want to annotate the position. There is no problem in adding non-Videolayer and imageLayer when I call addMarker method to add config. When adding videoLayer, TypeError will be displayed: Cannot read properties of undefined (reading 'transfer'),

markersPluginRef.current.addMarker(
          {
            id: 'videoid',
            chromaKey: '#ffffff',
            videoLayer: 'https://vr-platform.cos.clife.cn/1735201062727.mp4?q-sign-algorithm=sha1&q-ak=AKIDMlEeqCPSPCk3ED2e5A8zfCAyYAdu1xfA&q-sign-time=1738892591;1738899791&q-key-time=1738892591;1738899791&q-header-list=&q-url-param-list=&q-signature=82b14188e5eebe140348b05c8b8b8c4d413ee2ba',
            position: [
                { yaw: 2.90978, pitch: 0.25583 }, { yaw: 3.20036, pitch: 0.25220 },
                { yaw: 3.20567, pitch: -0.28784 }, { yaw: 2.92182, pitch: -0.31297 },
            ],
            style: {
                cursor: 'pointer',
            },
            tooltip: 'Play / Pause',
        },
      )

Online demo URL

No response

Photo Sphere Viewer version

5.11.0

Plugins loaded

No response

OS & browser

Windows / Google Chrome

Additional context

No response

[mistic100]

Your chromKey definition is not correct, it must be an object

https://photo-sphere-viewer.js.org/plugins/markers.html#chromakey

[FED-Noob]

Fixed the chromaKey configuration, but TypeError: Cannot read properties of undefined (reading 'transfer')
markersPluginRef.current.addMarker( { id: 'videoid', chromaKey: { enabled: true, color: 0x00ff00, similarity: 0.2, smoothness: 0.2, }, videoLayer: getSignCode(video_url), position: [ { yaw: 2.90978, pitch: 0.25583 }, { yaw: 3.20036, pitch: 0.25220 }, { yaw: 3.20567, pitch: -0.28784 }, { yaw: 2.92182, pitch: -0.31297 }, ], style: { cursor: 'pointer', }, tooltip: 'Play / Pause', }, )

[FED-Noob]

Even by example, https://photo-sphere-viewer.js.org/demos/markers/chroma-key.html#chroma-key-video-markers, Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'transfer') Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'transfer')

viewer.current = new Viewer({
                container: "viewId",
                panorama: getSignCode(scene_url.replace("http://", "https://")),
                caption: "Parc national du Mercantour <b>&copy; Damien Sorel</b>",
                minFov: 0,
                maxFov: 180,
                navbar: [],
                plugins: [
                    [
                        MarkersPlugin,
                        {
                            markers: [
                                {
                                    id: 'video',
                                    videoLayer: baseUrl + 'pictos/rick.webm',
                                    position: [
                                        { yaw: 2.90978, pitch: 0.25583 }, { yaw: 3.20036, pitch: 0.25220 },
                                        { yaw: 3.20567, pitch: -0.28784 }, { yaw: 2.92182, pitch: -0.31297 },
                                    ],
                                    style: {
                                        cursor: 'pointer',
                                    },
                                    tooltip: 'Play / Pause',
                                },
                                {
                                    id: 'image',
                                    imageLayer: baseUrl + 'pictos/rick.jpg',
                                    position: [
                                        { yaw: 2.17063, pitch: 0.47556 }, { yaw: 2.47392, pitch: 0.47121 },
                                        { yaw: 2.47818, pitch: 0.24468 }, { yaw: 2.17698, pitch: 0.24809 },
                                    ],
                                },
                            ],
                        },
                    ],
                ],
                lang: {
                    loadError: "加载失败：请检查VR图像源的正确性",
                    webglError: "你的浏览器似乎不支持WebGL",
                },
            });

[mistic100]

Then please provide a simple online demo.

But I think this is because your three.js version is too old or too recent.

[github-actions]

An isolated working demo is required in order to analyze this issue.
You can easily create a demo on Codepen/JSFiddle/StackBlitz by clicking the buttons on the top of every example in the documentation.

Why this is important:

• I do not have the time to reproduce every test case from scratch
• your bug might be related to your own application and not Photo Sphere Viewer (thus I will be unable to reproduce it)
• taking the time to create a demo yourself allows to take a step back and find the solution yourself

DO'S and DON'TS:

• DON'T use minified source files in your demo
• DON'T share your code inside a ZIP, I will only look at online demos
• DO isolate the viewer from the rest of the app, if possible
• DO describe the step-by-step workflow to reproduce the issue

[github-actions]

This issue has been automatically marked as stale because not enough information was provided. It will be closed if no further activity occurs.