Continue to Site

Welcome to EDAboard.com

Welcome to our site! EDAboard.com is an international Electronics Discussion Forum focused on EDA software, circuits, schematics, books, theory, papers, asic, pld, 8051, DSP, Network, RF, Analog Design, PCB, Service Manuals... and a whole lot more! To participate you need to register. Registration is free. Click here to register now.

Register Log in

How Does the Forlinx OK3588-C Development Board Implement Cross-Domain Video Surveillance?

Blog entry Discussion
It is a video distribution system implemented by the Tornado framework. The system reads video stream data in real-time by connecting to a USB camera and sends the data to clients for display via WebSocket protocol.

Main steps for implementation are as follows:

1. Check the interface occupied by the USB camera with the tool to determine the source port of the video streaming data.

video distribution system



USB camera occupies video74 port

2. Call the camera with the OpenCV library on the Tornado server to obtain video streaming data and convert it to JPEG image data. The system uses the WebSocket protocol to communicate with the client, which receives the video stream by connecting to the WebSocket and displays it on the web page.

JPEG_HEADER = "data:image/jpeg;base64," # It is for image trans-coding.
# Turn on a camera
cap = cv2.VideoCapture(74)
def get_image_dataurl():
# (1).Read data from the camera, if the reading succeeds “ret” is True, otherwise it is False. It is a three-dimensional array saved as image in the frame.
ret, frame = cap.read()
# (2).First encode the array type into jepg data, then convert it to byte array, and finally encode it in base64.
r, buf = cv2.imencode(".jpeg", frame)
dat = Image.fromarray(np.uint8(buf)).tobytes()
img_date_url = JPEG_HEADER + str(base64.b64encode(dat))[2:-1]
return img_date_url
class CaptureHandler(RequestHandler):
# It is the page showing the surveillance.
def get(self, *args, **kwargs):
self.render("capture.html")
class VideoHandler(WebSocketHandler):
# Process received data and feedback a frame after the user sends a data request
def on_message(self, message):
self.write_message({"img": get_image_dataurl()})
Click to expand...


3. Display video streams on the client by creating web files.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<!--
The canvas tag is often used to draw images
-->
<canvas id="canvas"></canvas>
</body>
<script>
var address = "192.168.3.232";
var port = 9000;
var ws = new WebSocket("ws://192.168.3.232:9000/video");
var canvas = document.getElementById("canvas");
var start = document.getElementById("start");
//Set a timing of 10ms to wait for the WebSocket connection to complete
var timer = setInterval(function () {
if (ws.readyState == 1){
//Send data to the server, request images, and any content is fine.
ws.send("msg");
clearInterval(timer);
}
},10);
//Information callback processing function
ws.onmessage = function (res) {
//(1).First get images frame by frame
console.log("Data received");
var img_src = JSON.parse(res.data)["img"];
var img = new Image();
img.src = img_src;
//(2).Display
var ctx = canvas.getContext("2d"); // 2-D image
img.onload = function(){
canvas.setAttribute("width",img.width);
canvas.setAttribute("height",img.height);
ctx.drawImage(img,0,0,600,800); //The last two zeros mean that the image is drawn from the position of coordinate (0,0)
}
ws.send("msg");
}
</script>
</html>
Click to expand...


4. Adding Routes

from views.capture import CaptureHandler as capture_get
from views.capture import VideoHandler as vide_capt
admin_urls = [
(r"/", app_index),
(r"/chat", app_chat),
(r"/can", app_can_get),
(r"/can_test", app_can_test),
(r"/capture", capture_get),
(r"/video", vide_capt)
]
Click to expand...

Once the service is running, we can see the display of the video stream on the web page by opening the temporary URL

opening the temporary URL


We can also view the video stream on the mobile by opening the temporary URL.

The implementation of this video distribution system uses technologies such as the Tornado framework, the OpenCV library, and the WebSocket protocol.

Tornado is a Python Web framework with high efficiency, simplicity, and scalability. OpenCV is a computer vision and machine learning library for processing image and video data. WebSocket protocol is a TCP-based full-duplex communication protocol that enables real-time communication between browsers and servers.

For additional information, visit the OK3588-C Single Board Computer

Originally published at www.forlinx.net.
  • Like
Reactions: nick liu

Comments

There are no comments to display.

Part and Inventory Search

Blog entry information

Author
Forlinx
Read time
1 min read
Views
467
Last update
Join the discussion

More entries in Uncategorized

More entries from Forlinx

Share this entry

Back
Top