Posting Variable Values from Javascript and Reading them with Python (UV4L, WebRTC, Raspberrypi3)

Question

I am working on a project where we plan on controlling a rover through a web-based application. I am using UV4L and its modules on the Raspberry Pi. I have the streaming side set up well, but now I am trying to send data back to the Pi.

I have taken this joystick and put into the demo webpage.

What I want to do is take the X and Y value that this joystick produces and send it back to the Pi and have it print the values. The way I have been attempting to do this is to turn the X and Y values into a JSON and read the JSON with Python. I am relatively new to programming, and have been thrown into the proverbial deep end.

I was trying to use an example I found in another stackoverflow question this is what I produced butchering the code:

var xhr = new XMLHttpRequest();
var url= “webappurl”;
xhr.open(“POST”, url, true);
xhr.setRequestHeader(“Content-Type”, “json”);

xhr.onload= function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json =JSON.parse(xhr.responseText);
        console.log(json.x +”, “ + json.y);
    }
};

var data = JSON.stringify({x, y});
xhr.send(data);

Then I did this on the Python Side:

import requests
import simplejson
r = requests.get('webappurl')
c = r.content
j = simplejson.loads(c)
print(j)

The problem I have been having is that everything I find online has a different recommendation on how to do this and I haven't been able to find something in other people's projects I could utilise for our purposes or have the knowledge to adapt, and I need to keep it as direct/simple as possible.

I am under the impression that the joystick may already be built with functions/variables that can be used to trigger or post.

Any recommendations for the best way to go about this or the correct code to do this would be appreciated - I also have the WebRTC data channels available but I don't know if I need to use them to do this.

I also wondered if there was means to send the variable values over the websocket and use python to parse the websocket.

Thank you for your time,

Answer 1

Since you are developing a web application, it seems natural to stay with WebRTC. UV4L supports two-way audio, video and data channels. Here is how data channels work on the UV4L side.

Furthermore, the built-in WebRTC demo page that you can fetch, as an example, from the /stream/webrtc URL on the uv4l server certainly embeds some javascript code using data channels from the client side. You can find some code in this other demo web app here as well.