Home / Tutorial / WebGL Camera Plugin for Unity: COMPLETE Tutorial

WebGL Camera Plugin for Unity: COMPLETE Tutorial

/
/
/
886 Views

Following the previous tutorials on how to create an Android Camera Plugin and an iOS Camera Plugin, I’ve decided to create a last one – a WebGL Camera Plugin for Unity.

Although the WebCamTexture is already supported in WebGL, the webcam light stays on after being used. I was not able to solve this issue and apparently, it’s a bug.

So, I’ve decided to implement the webcam access directly on JavaScript.


IMPLEMENT THE WEBGL CAMERA ACCESS

  • Create a new JavaScript – nativemedia.js – and an HTML file – nativemedia.html; IMAGE1

In this example, the SendMessage method is implemented to log the result. In the “real” case the result is sent into Unity.

  • Implement all the consts, HTML references and variables;
  • Add the enableCamera implementation; IMAGE2 IMAGE3

Known errors: the webcam is not supported in Safari and in doesn’t work properly in older versions of Chrome.

  • Change the SendMessage implementation to parse a JSON result;
  • Implement the following camera functions: close, pause/resume and disable; IMAGE4

IMPLEMENT THE SELECT FILE DIALOG

  • Add the selectImage implementation;

To enable the Select Image, press the Unity Window after pressing the Select button. Check here for the explanation on how I’m launching the <input type=”file”> onclick event handler.


SCALE THE IMAGE

  • Implement the getImage method;
  • Scale the image result from the Camera and Select image methods; IMAGE5

UNITY PROJECT

CREATE THE UNITY PROJECT

I’m using the same project from the previous Android Camera Plugin for Unity Tutorial. If you completed that one, skip the unnecessary steps.
  • Create a new Unity Project;
  • Import this Unity Package into the project and open the main_initial.scene;
  • Duplicate the button and change the text to Select from Gallery; IMAGE6
This is a very simple scene with a Button to open the camera and an Image component to show the captured image.
  • Switch to the WebGL Platform on the project Build Settings and add the current scene; IMAGE7
  • Build and Run the project. IMAGE8, IMAGE9
This is just to make sure that you can compile the WebGL Project before continuing with the tutorial. Open the index.html file with Mozilla Firefox otherwise, it won’t run locally.

ADD THE WEBGL CAMERA C-SHARP COMPONENT

  • Create a new C-Sharp Script called MediaWebGL.cs to communicate with the browser; IMAGE10
  • Add the following code to call the enableCamera and the selectImage methods on the JavaScript file and to receive the result on the PictureCallback method on Unity;
  • Add the JSONObject package from the Unity Asset Store;

Check here to know more about interacting with browser scripting.

  • Add the MediaWebGL.cs component to the Controller GameObject. IMAGE11

Remember to comment the SendMessage calls on the JavaScript file that were just logs and not actually callbacks. See it below.

 

IMPLEMENT THE UNITY CONTROLLER COMPONENT

  • Create a new Controller.cs component; IMAGE12
  • Add the following code to the Controller.cs (check the code comments for deeper explanation);
Since I’m using the same project from the last tutorials, I left the Android and iOS code on this file. You can always remove it.
  • Assign the Controller.cs serialized references; IMAGE13
  • Link the camera UI buttons to the Controller.cs component; IMAGE14
  • Replace the Button component from the button gallery with an Event Trigger component – this is necessary because of the way we are handling the onclick event on the input field (check here); IMAGE15

ADD THE WEBGL CUSTOM TEMPLATE

  • Add a new WebGL template with the nativemedia.js file and the following HTML file; IMAGE16

Check my previous tutorial to know more about WebGL Custom Templates.

  • Select the Add Component Template and Build the project. IMAGE17

As always, any corrections, suggestions and tips are welcome. Thanks.

Happy Coding 🙂

Leave a Comment

Your email address will not be published. Required fields are marked *