try streaming with websockets

This commit is contained in:
Sem van der Hoeven
2023-06-03 14:13:34 +02:00
parent f30a51ca68
commit 8fca2086ac
5 changed files with 57 additions and 2 deletions

View File

@@ -163,5 +163,9 @@ app.get("/connect", function (req, res) {
}, 1000);
});
app.get("/test", function (req, res) {
res.render("test");
});
app.listen(8080);
console.log("Server is listening on port 8080");

37
api/views/test.ejs Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Python_Websocket_Live_Streaming</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="openSocket()">
<div id="status">
Connection failed. Somebody may be using the socket.
</div>
<div style="text-align: center">
<canvas id="msg" width="960" height="720" style="display:inline-block" />
</div>
</body>
<script>
openSocket = () => {
socket = new WebSocket("ws://10.100.0.40:9001/");
let msg = document.getElementById("msg");
socket.addEventListener('open', (e) => {
document.getElementById("status").innerHTML = "Opened";
});
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);
});
});
}
</script>
</html>

View File

@@ -2,6 +2,7 @@ import rclpy
from rclpy.node import Node
from drone_services.msg import DroneStatus
from drone_services.msg import FailsafeMsg
from drone_services.srv import TakePicture
from drone_services.srv import MovePosition
@@ -39,6 +40,7 @@ class ResponseMessage(Enum):
STATUS = 0
IMAGE = 1
MOVE_DIRECTION_RESULT = 2
FAILSAFE = 3
class ApiListener(Node):
@@ -47,6 +49,8 @@ class ApiListener(Node):
self.get_logger().info('ApiListener node started')
self.drone_status_subscriber = self.create_subscription(
DroneStatus, '/drone/status', self.drone_status_callback, 10)
self.failsafe_subscriber = self.create_subscription(FailsafeMsg, "/drone/failsafe", self.failsafe_callback, 10)
self.timer = self.create_timer(1, self.publish_status)
waiting = 0
self.take_picture_client = self.create_client(
@@ -95,7 +99,14 @@ class ApiListener(Node):
self.status_data['armed'] = msg.armed
self.status_data['control_mode'] = msg.control_mode
self.status_data['route_setpoint'] = msg.route_setpoint
self.status_data['velocity'] = msg.velocity
self.status_data['position'] = msg.position
self.status_data['failsafe'] = msg.failsafe
def failsafe_callback(self, msg):
self.status_data['failsafe'] = msg.enabled
self.message_queue.append(json.dumps(
{'type': ResponseMessage.FAILSAFE.name, 'message': msg.msg}))
# def send_video(self):
# self.get_logger().info('Starting video thread')
# vid = cv2.VideoCapture(0)

View File

@@ -58,7 +58,7 @@ class CameraController(Node):
def handle_video_connection(self):
self.get_logger().info('Starting sending video')
vid = cv2.VideoCapture(0, cv2.CAP_V4L)
vid = cv2.VideoCapture(0, cv2.CAP_DSHOW)
vid.set(cv2.CAP_PROP_FRAME_WIDTH, RES_4K_W)
vid.set(cv2.CAP_PROP_FRAME_HEIGHT, RES_4K_H)

View File

@@ -2,4 +2,7 @@ float32 battery_percentage
float32 cpu_usage
int32 route_setpoint # -1 if no route
wstring control_mode
bool armed
bool armed
float32 velocity[3]
float32 position[3]
bool failsafe