How Does the Forlinx OK3588-C Development Board Implement Cross-Domain Video Surveillance?
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.
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()})
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>
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)
]
Once the service is running, we can see the display of the video stream on the web page by 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.
