Successful Theta V stream from drone to VR headset 0.25 miles away

codetricity · November 21, 2019, 2:18pm

If you have a blog or set of pictures of your bicycle trip, please share the link.

Also, thanks for mentioning teamLab Borderless. I had not heard of this before.

@Jake_Kenin or anyone else, I’m trying to get the mjpeg stream to appear in a browser window and looking for a barebones example that shows the simplest possible way to get the mjpeg stream in a browser window.

I am getting this error:

showPreview:1 Access to fetch at ‘http://192.168.1.1/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I notice that Jake used cors-anywhere

github.com

dirtshell/amelia_viewer/blob/f6c86ad29fba0ff100062726fcc4204d7f8da932/assets/js/ricoh_api.js#L220


      
              var retryIntervalId = setInterval(stopRecording, 500);
          }
          
          /*
           * Gets a live preview from the camera
           * This is a modified version of this: https://github.com/aruntj/mjpeg-readable-stream/blob/master/index.html
           * TODO: automatically stop when the theta stops sending video using timeout or something
           */
          function getThetaLivePreview() {
              const endpoint = "/osc/commands/execute";
              const url = CORS_ANYWHERE + "/" + settings.theta_ip + endpoint;
              const postData = { name: "camera.getLivePreview" };
              
              const SOI = new Uint8Array(2);
              SOI[0] = 0xFF;
              SOI[1] = 0xD8;
              const CONTENT_LENGTH = 'Content-Length';
              const TYPE_JPEG = 'image/jpeg';
          
              // Use digest fetch
              const digestOptions = {

I’m not quite sure how to use this or how to get the live preview to appear in a web page.

Jake’s comments referenced this code:

github.com

aruntj/mjpeg-readable-stream/blob/master/index.html

<html>
    <head></head>
    <body>
        <img id="image" width="640" height="480"/>
        <canvas id="canvas" width="640" heigth="480"></canvas>
        <script>
            // The mjpeg url.
            const url = "/mjpeg";

            const SOI = new Uint8Array(2);
            SOI[0] = 0xFF;
            SOI[1] = 0xD8;
            const CONTENT_LENGTH = 'content-length';
            const TYPE_JPEG = 'image/jpeg';
            let image = document.getElementById('image');

            fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw Error(response.status+' '+response.statusText)

This file has been truncated. show original

I’ve been trying to work with the aruntj code as it is smaller and more manageable for my limited knowledge. The amelia_viewer code has much more features. I first want to get any frame to appear and then add features.

I am using node, express, and request.

Topic		Replies	Views
Can RICOH THETA Z1 be used in Unity as a webcam? Unity Development unity , livestreaming , vr	66	9190	February 14, 2024
Wireless Live Streaming Plug-in Audio Problems 360 Media livestreaming	68	2295	December 17, 2021
NDI plugin experiments ? plugin	26	1106	June 26, 2023
Connecting RICOH THETA Z1 with Unity Unity Development z1 , video , unity , thetaengineering , livestreaming	77	2744	May 29, 2024
360 Video Conferencing with the RICOH THETA S Contests and Challenges video	32	14658	February 28, 2017

Successful Theta V stream from drone to VR headset 0.25 miles away

Related topics