/webxr-unreal-cinecamera-control

Control an Unreal Engine CineCamera with WebXR

Primary LanguageJavaScriptMIT LicenseMIT

webxr-unreal-cinecam-control

Control an Unreal Engine CineCamera with WebXR

This uses Unreal's Web Remote Control to control a CineCamera position.

To Run:

  1. Start Unreal Project

    • Make sure there's at least one CineCamera or VPCineCamera in your project. It will use the first one it finds.

  2. Turn on WebControl in Unreal:

    • Window -> Developer Tools -> Output Log
    • In the Cmd window enter: WebControl.StartServer

  3. Enable local XHR requests in Chrome for Android:

    • Start Chrome
    • Enter chrome://flags
    • Search for "Insecure origins treated as secure"
    • Enter the URL with the IP address of computer where Unreal is running using port 8080. Example: http://192.168.1.119:8080
    • Relaunch Chrome

  4. Use Chrome for Android to load web/index.html from an https website.

  5. In the "WebXR Camera Control" web page, enter the same URL as above.

  6. Tap "Enter AR"

To Run locally:

  1. Install web server: Example:

    • Install Node (http://nodejs.org) if not installed,
    • Open Command Prompt
      • npm -g install serve
      • cd to project's /web directory
      • serve .
    • Server is running on port 5000 by default.

  2. Enable Local XR in Chrome for Android:

    • Start Chrome
    • Enter chrome://flags
    • Search for "Insecure origins treated as secure"
    • Enter the URL with the IP address of the page is being served, using the correct port. Example: http://192.168.1.119:5000 (note this is in addition to the above :8080 address).
    • Relaunch Chrome

  3. Load web page from computer's IP address above.

To use the Live Link server, see the /livelink directory. It's complicated.

Check out this YouTube video to see it in action: https://www.youtube.com/watch?v=V6sECkur9ak

Pull Requests welcome!