Issue capturing a screenshot

[rossrossp]

Hello,

I'm facing a couple of issues when trying to capture a screenshot, having followed the guide on how to do so.

In Chrome, in the new tab that is opened, nothing loads and I see the error "​ Not allowed to navigate top frame to data URL: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAAMgCAYAAAB7wK5aAAAAAXNSR0IArs4c6QAAIABJREFUeF7s2UERAAAIAkHpX9oeN2sDFn/sHAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgJrBYHnEIECBAgAABAgQIECBAgAABAgQIECBAgAABAmcA8QQECBAgQIAAAQIECBAgQIAAAQIECBAgQIBATsAAkqtUIAIECBAgQIAAAQIECBAgQIAAAQIECBAgQMAA4gcIECBAgAABAgQIECBAgAABAgQIECBAgACBnIABJFepQAQIECBAgAABAgQIECBAgAABAgQIECBAgIABxA8QIECAAAECBAgQIECAAAECBAgQIECAAAECOQEDSK5SgQgQIECAAAECBAgQIECAAAECBAgQIECAAAEDiB8gQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEcgIGkFylAhEgQIAAAQIECBAgQIAAAQIEC...ABB4gNECBAgAABAgQIECBAgAABAgQIECBAgAABAjsBB8iuUoEIECBAgAABAgQIECBAgAABAgQIECBAgAABB4gNECBAgAABAgQIECBAgAABAgQIECBAgAABAjsBB8iuUoEIECBAgAABAgQIECBAgAABAgQIECBAgAABB4gNECBAgAABAgQIECBAgAABAgQIECBAgAABAjsBB8iuUoEIECBAgAABAgQIECBAgAABAgQIECBAgAABB4gNECBAgAABAgQIECBAgAABAgQIECBAgAABAjsBB8iuUoEIECBAgAABAgQIECBAgAABAgQIECBAgAABB4gNECBAgAABAgQIECBAgAABAgQIECBAgAABAjsBB8iuUoEIECBAgAABAgQIECBAgAABAgQIECBAgAABB4gNECBAgAABAgQIECBAgAABAgQIECBAgAABAjsBB8iuUoEIECBAgAABAgQIECBAgAABAgQIECBAgACBAEVNAyFKrAHdAAAAAElFTkSuQmCC" in the console.
This may be because the image generated is blank, or for some other reason, I'm not sure.

In Firefox, the image loads as a blank white image, with no errors in the console.

A live example can be found here: https://dev.anibles.io/ranger-builder

Here's my code:

import React from 'react';
import { Unity, useUnityContext } from "react-unity-webgl";

const baseUrl = "https://firebasestorage.googleapis.com/v0/b/conservation-nft.appspot.com/o/web%2Frangerbuilder%2Fbuild%2F"

const RangerBuilder = () => {
    const { unityProvider, takeScreenshot } = useUnityContext({
        loaderUrl: baseUrl+"RangerBuilder.loader.js?alt=media",
        dataUrl: baseUrl+"RangerBuilder.data?alt=media",
        frameworkUrl: baseUrl+"RangerBuilder.framework.js?alt=media",
        codeUrl: baseUrl+"RangerBuilder.wasm?alt=media",
        webGLContextAttributes: {
            preserveDrawingBuffer: true,
        },
    });

    function handleClickTakeScreenshot() {
        const dataUrl = takeScreenshot("image/png", 0.5);
        window.open(dataUrl);
    }

    return (
        <>
            <Unity style={{ maxWidth:'800px' }} unityProvider={unityProvider}/>
            <div>
                <button onClick={handleClickTakeScreenshot}>Take Screenshot</button>
            </div>
        </>
    );
}

export default RangerBuilder;

My Unity project's version is 2021.3.6f1

I've tried adding the code in the guide to the template project, and get the same result.

Can anyone see anything I'm doing wrong?

Thanks in advance!

[rossrossp]

I couldn't get this working, so ended up using a different approach that makes use of: https://github.com/Nateonus/WebGLFileSaverForUnity

Note, I also got a blank image initially, which I was able to fix by putting the screenshot code inside a coroutine as follows:

IEnumerator RecordFrame()
{
    yield return new WaitForEndOfFrame();
    // take screenshot
}

Not sure if this may hint at a fix, there may be some crossover with preserveDrawingBuffer, but thought I'd document it for posterity.

[jeffreylanters]

Excuse my late response. I'm not sure what going wrong in your scenario (Chrome not willing to open the image is a security feature of chrome. Handeling the image in another other way should work fine in this case.)

But since you're saying FireFox displays just a white image there should be something that's not working properly. Have you tried providing another mime type?

[oggiVVV]

I'm having the same issue. I was able to bypass the Chrome security feature, but after doing so I just get a white screen(shot) too. Same goes for FireFox. My code is pretty much the same as rossrossp's is

[Maadhav]

I am also just getting a white image

[timakro]

Checking with the console it seems like preserveDrawingBuffer: true does not actually get set correctly.

document.getElementById("react-unity-webgl-canvas-7").getContext('webgl2').getContextAttributes()

[timakro]

It seems this is simply a naming mismatch: in the docs it says to use webGLContextAttributes but webglContextAttributes is correct. Works flawlessly this way.

[cincibeles]

this works for me!! Thanks