sem/5g_drone_ROS2
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add displaying video stream using sse

Browse Source
This commit is contained in:
Sem van der Hoeven
2023-05-31 21:03:40 +02:00
parent bdcdb19d96
commit df8f391c9f
3 changed files with 69 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
api/index.js
View File

@@ -18,12 +18,29 @@ var ws;
var api_connected = false;
function send_events_to_clients(data) {
// console.log("sending events to clients");
sse_clients.forEach((client) => {
client.response.write("event: message\n");
client.response.write("data:" + JSON.stringify(data) + "\n\n")
}
);
// console.log("sending events to clients");
sse_clients.forEach((client) => {
client.response.write("event: message\n");
client.response.write("data:" + JSON.stringify(data) + "\n\n");
});
}
function send_image_data_to_clients(frameData) {
sse_clients.forEach((client) => {
// Create a Blob from the frame data
const blob = new Blob([frameData], { type: "image/jpeg" });
// Set the SSE event name as 'message'
client.response.write("event: message\n");
// Create an object URL from the Blob
const objectURL = URL.createObjectURL(blob);
// Set the SSE event data as the object URL
client.response.write(
"data: " + JSON.stringify({ image: objectURL }) + "\n\n"
);
});
}
function handle_sse_client(request, response, next) {
@@ -50,25 +67,6 @@ function handle_sse_client(request, response, next) {
});
}
const getSizeInBytes = obj => {
let str = null;
if (typeof obj === 'string') {
// If obj is a string, then use it
str = obj;
} else {
// Else, make obj into a string
str = JSON.stringify(obj);
}
// Get the length of the Uint8Array
const bytes = new TextEncoder().encode(str).length;
return bytes;
};
const logSizeInBytes = (description, obj) => {
const bytes = getSizeInBytes(obj);
console.log(`${description} is approximately ${bytes} B`);
};
var connect_to_api = function () {
console.log("Connecting to API");
ws = new WebSocket("ws://10.100.0.40:9001/");
@@ -80,15 +78,15 @@ var connect_to_api = function () {
ws.on("message", function message(message) {
try {
var msg = JSON.parse(message);
if (msg.type != "IMAGE") {
send_events_to_clients(msg);
} else {
console.log("got image");
}
var msg = JSON.parse(message);
if (msg.type != "IMAGE") {
send_events_to_clients(msg);
} else {
console.log("got image");
}
} catch (error) {
console.log("could not parse as json, must be bytes");
console.log("could not parse as json, must be bytes");
send_image_data_to_clients(message);
}
});

87
api/views/index.ejs
View File

@@ -14,7 +14,7 @@
<div class="video">
<div class="mainvideo">
<p>Camera view:</p>
<canvas id="msg" width="960" height="720" style="display: inline-block; border: 1px solid blue;"></canvas>
<img id="msg" style="border: 1px solid blue; width: 960px;"></img>
<div id="connectedbuttons">
<div id="connectedstatus">
<p id="connectedlabel">Connected: <%- api_connected %></p>
@@ -59,7 +59,7 @@
</body>
<script>
// var update_status = setInterval(update_status, 1000);
var update_status = setInterval(update_status, 1000);
assign_button_callbacks();
window.onload = function () {
const events = new EventSource("/events");
@@ -69,10 +69,19 @@
}
events.onmessage = (event) => {
//TODO handling status, failsafe etc
const parsedData = JSON.parse(event.data);
console.log("RECEIVED EVENT");
console.log(parsedData);
console.log("MESSAGE RECEIVED");
const eventData = JSON.parse(event.data);
// Check if the event contains image data
if (eventData.image) {
const imageURL = eventData.image;
// Process the received image URL
// For example, you can set it as the source of an <img> element
const imgElement = document.getElementById('image-element');
imgElement.src = imageURL;
}
// console.log(parsedData);
}
};
@@ -183,51 +192,29 @@
}
function connect() {
console.log("connect");
socket = new WebSocket("ws://10.0.100.40:9001/");
let msg = document.getElementById("msg");
socket.addEventListener('open', (e) => {
console.log("open");
});
socket.addEventListener('message', (e) => {
let ctx = msg.getContext("2d");
let image = new Image();
image.src = URL.createObjectURL(e.data);
image.addEventListener("load", (e) => {
ctx.drawImage(image, 0, 0, msg.width, msg.height);
});
});
var received = false;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/connect", true);
xhr.onreadystatechange = function () {
if (this.status == 200) {
console.log(this.responseText);
if (this.responseText.length > 0) {
var status = JSON.parse(this.responseText);
// console.log(status)
document.getElementById("connectedlabel").innerHTML = "Connected: true";
document.getElementById("connectbutton").disabled = true;
}
} else {
console.log("error");
document.getElementById("connectedlabel").innerHTML = "Connected: false";
if (!received) {
alert("Could not connect to API!");
received = true;
// ws.on("error", function error(err) {
// console.log("there was an error");
// console.error("error: " + err);
// received_error = true;
// });
// var received = false;
// var xhr = new XMLHttpRequest();
// xhr.open("GET", "/connect", true);
// xhr.onreadystatechange = function () {
// if (this.status == 200) {
// console.log(this.responseText);
// if (this.responseText.length > 0) {
// var status = JSON.parse(this.responseText);
// // console.log(status)
// document.getElementById("connectedlabel").innerHTML = "Connected: true";
// document.getElementById("connectbutton").disabled = true;
// }
// } else {
// console.log("error");
// document.getElementById("connectedlabel").innerHTML = "Connected: false";
// if (!received)
// {
// alert("Could not connect to API!");
// received = true;
// }
// }
// };
// xhr.send();
}
}
};
xhr.send();
}
// window onload function die elke seconde een request doet om te kijken of er al nieuwe foto is
// function die elke 100 ms een request doet om de status te updaten