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

try streaming with websockets

Browse Source
This commit is contained in:
Sem van der Hoeven
2023-06-03 14:19:03 +02:00
parent 8fca2086ac
commit 2c9b12cd8d
1 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
api/views/index.ejs
View File

@@ -9,39 +9,39 @@
<title>5G drone API</title> <title>5G drone API</title>
</head> </head>
<body style="height: 100%;"> <body style="height: 100%;" onload="opensocket()">
<h1 class="header">5G Drone API</h1> <h1 class="header">5G Drone API</h1>
<!-- <div class="video"> --> <!-- <div class="video"> -->
<div class="mainvideo"> <div class="mainvideo">
<p>Camera view:</p> <p>Camera view:</p>
<img id="result-video" style="border: 1px solid blue; width: 800px;"></img> <canvas id="result-video" style="border: 1px solid blue; width: 800px;"></img>
<div id="connectedbuttons"> <div id="connectedbuttons">
<div id="connectedstatus"> <div id="connectedstatus">
<p id="connectedlabel">Connected: <%- api_connected %></p> <p id="connectedlabel">Connected: <%- api_connected %></p>
<button id="connectbutton" onclick="connect()">Connect</button> <button id="connectbutton" onclick="connect()">Connect</button>
</div>
<div id="buttons">
<button id="take_picture" onclick="take_picture()">Take picture</button>
<br>
<button id="arm_disarm" onclick="arm_disarm()">Arm/Disarm</button>
</div>
</div> </div>
<div id="buttons"> <div id="controls">
<button id="take_picture" onclick="take_picture()">Take picture</button> <h2>Controls</h2>
<br> <div id="buttons">
<button id="arm_disarm" onclick="arm_disarm()">Arm/Disarm</button> <button class="movebutton" id="button_turnleft">Turn left</button>
</div> <button class="movebutton" id="button_turnright">Turn right</button>
</div> <button class="movebutton" id="button_up">Up</button>
<div id="controls"> <button class="movebutton" id="button_down">Down</button>
<h2>Controls</h2> <button class="movebutton" id="button_forward">Forward</button>
<div id="buttons"> <button class="movebutton" id="button_backward">Backward</button>
<button class="movebutton" id="button_turnleft">Turn left</button> <button class="movebutton" id="button_left">Left</button>
<button class="movebutton" id="button_turnright">Turn right</button> <button class="movebutton" id="button_right">Right</button>
<button class="movebutton" id="button_up">Up</button> <button id="button_stop" onclick="stop()">Stop</button>
<button class="movebutton" id="button_down">Down</button> <button id="button_estop" onclick="estop()"><strong>Emergency Stop</strong></button>
<button class="movebutton" id="button_forward">Forward</button>
<button class="movebutton" id="button_backward">Backward</button>
<button class="movebutton" id="button_left">Left</button>
<button class="movebutton" id="button_right">Right</button>
<button id="button_stop" onclick="stop()">Stop</button>
<button id="button_estop" onclick="estop()"><strong>Emergency Stop</strong></button>
</div>
</div> </div>
</div>
</div> </div>
<div class="lastpicture"> <div class="lastpicture">
<p>Last picture:</p> <p>Last picture:</p>
@@ -60,7 +60,22 @@
<script> <script>
assign_button_callbacks(); assign_button_callbacks();
// connect_to_video_stream(); openSocket = () => {
socket = new WebSocket("ws://10.100.0.40:9002/");
let msg = document.getElementById("result-video");
socket.addEventListener('open', (e) => {
console.log("Connected to video")
});
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);
});
});
}
// Helper function to decode base64 image and set it as source of <img> element // Helper function to decode base64 image and set it as source of <img> element
function decodeBase64Image(base64Data, imgElement) { function decodeBase64Image(base64Data, imgElement) {
@@ -93,7 +108,7 @@
document.getElementById("armed").innerHTML = "Armed: " + data.data.armed; document.getElementById("armed").innerHTML = "Armed: " + data.data.armed;
document.getElementById("control_mode").innerHTML = "Control mode: " + data.data.control_mode; document.getElementById("control_mode").innerHTML = "Control mode: " + data.data.control_mode;
} else { } else {
decodeBase64Image(data.image, document.getElementById("result-video")); // decodeBase64Image(data.image, document.getElementById("result-video"));
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);