Possible to take a screenshot?

[oulfik]

Is it possible to take a screenshot with react-unity-webgl or do I have to call the unity function ScreenCapture.CaptureScreenshot() for this purpose?

[jeffreylanters]

Hi, ScreenCapture.CaptureScreenshot is not available is WebGL. I will add support for taking screenshots in the near future. But for now, there is an easy solution for taking screenshots from your web application as following:

import React, { useEffect, useState } from "react";
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "build/myunityapp.loader.js",
  dataUrl: "build/myunityapp.data",
  frameworkUrl: "build/myunityapp.framework.js",
  codeUrl: "build/myunityapp.wasm",
});

function App() {
  const [canvas, setCanvas] = useState(null);

  useEffect(function () {
    unityContext.on("canvas", setCanvas);
  }, []);

  function takeScreenshot () {
    const screenshotBase64 = canvas.toDataURL();
    // Do something with the screenshot data...
  }

  return (
    <div>
      <button onClick={takeScreenshot}>Take Screenshot</button>
      <Unity unityContext={unityContext} />
    </div>
  );
}

[oulfik]

Thanks! Works like a charm. One thing to consider: I had to change one line of code in the loader.js file:
preserveDrawingBuffer: true
Before that I only got a blank image. (See link)

[jeffreylanters]

Awesome! Thanks for the feedback, I'll keep that in mind while implementing this natively.

[jeffreylanters]

FYI, the option to enable preserveDrawingBuffer is added in release v8.5.1.

[jeffreylanters]

FYI, support for taking screenshots has ben added natively in release v8.6.0.