How can i properly destroy the "viewer" in ReactJS.

[hotreloadjohn]

I am having issue destroying the player (viewer).
This produce a warning in the console log: Too many active WebGL contexts. Oldest context will be lost. This warning will cause my other component that is also using webgl canvas to lose its display.

i have tried calling the destroy method (viewer.destroy()) but after 16 times of displaying, the above warning and issue occur.

Is there any reference to any reactjs project that is using this player that i can reference to check if i am using it correctly? any help? Thanks.

[thiagopnts]

Hi @theeverythinggeek, in which part of the component lifecycle are you calling viewer.destroy() and in which one are you creating? An easy workaround would be to hide/show instead of creating/destroying since creating contexts can be an expensive thing

[hotreloadjohn]

Hi thiagopnts, i am calling viewer.destroy() in componentWillUnmount and also in my function that closes the video player. yes, I'm trying to see how i can hide/show instead of creating/destroying but somehow the render() need to be call after creating "var viewer = new Kaleidoscope.Video({source: 'equirectangular-video.mp4', containerId: '#target'})" and changing the source doesn't seems to work for me too.

A little more about my current implementation, i am creating the viewer and calling render() in componentDidMount() and destroying the viewer the way i described above. It seems that my current implementation would works for loading and destroying image (releasing the context) but not the video.

I'm not exactly sure if i am using the player correctly in ReactJS.. any example would help.

Thanks.

[thiagopnts]

Hey, yeah you will need to fit that inside the React lifecycle trying to avoid wasting too many context. The way the viewer was designed is that you destroy/recreate whenever you need to change the source. So with React you would have to control show/hide during lifecycle hooks and destroy/recreate once you have to change source

[hotreloadjohn]

Thanks for clarification. ill need to change source frequently so i guess theres no point to hide/show as i cant change the vid without destroy&recreate first. Any idea if addition step is needed to destroy player playing video? seems that webgl context is not releasing for me..when im playing a video. Thanks.

[thiagopnts]

I'll check if I can find some leak in the destroy calls, but I never ran on an issue like that using the lib in production(the project I worked was using it to play 360 videos in a player, sometimes with multiple players). How many 360 videos do you have currently?

[hotreloadjohn]

i just need 1 active player..but ill need to the change source depending on which the user select, different video. Therefore ill need to destroy and create the player with the correct source. My current implementation works for Image player, which the player seems to destroy properly but when i loading video with Video player, it does not seems to destroy/release the webgl context...which i am puzzled.

Thanks.

[darylldawn]

@theeverythinggeek Is the video player just showing a black screen as well when you change the source (even after the destroy call)?

[hotreloadjohn]

@darylldawn no. Just that i have some other lib in my app that is using webgl too. That component shows a black screen instead Thanks for your help anyway

[hotreloadjohn]

Just to update that i managed to find a workaround that solves my problem. For anyone who is interested and having the same issue you can try do this in your componentWillUnmount() lifecycle or a function that you might want to destroy the player like this:

let canvas = document.querySelector('#target>canvas);
let gl = canvas.getContext('webgl');
viewer.destroy();
gl.getExtension('WEBGL_lose_context').loseContext();

I have no idea what it does, but it seems to work for me.

Thanks.

[thiagopnts]

nice find @theeverythinggeek, I'll try to find where we're leaking this context and add to the destroy method when I get some time

[isagna]

I know it may come late, but it might be useful for someone else.
Got same issue, i solved this by using useRef() from react.

const viewer = useRef(null);

// ...

videoOptions = // what needed
viewer.current = new Kaleidoscope.Video(videoOptions);

And for destroying :

useEffect(() => {
            // ...
	    return () => {
		    viewer.current.destroy();
	    }
    },[]);