[技术]

【飞凌RK3588开发板试用】实现跨域视频监控

2023-3-9 12:53:58 2532 RK3588 飞凌开发板试用

在tornado服务器上创建视频分发，客户端用websocket连接服务端接收视频流并显示。

1、插上USB摄像头，先用工具查看usb占用的哪个接口：

USB摄像头占用video74端口。
2、添加tornado调用摄像头，实时把图像发送给ws连接对象：

JPEG_HEADER = "data:image/jpeg;base64,"  # 这个是对图片转码用的

# 开启一个摄像头
cap = cv2.VideoCapture(74)


def get_image_dataurl():
    # (1).从摄像头读取数据, 读取成功 ret为True,否则为False,frame里面就是一个三维数组保存图像
    ret, frame = cap.read()
    # (2).先将数组类型编码成 jepg 类型的数据,然后转字节数组,最后将其用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):
    # 这里是显示监控的页面
    def get(self, *args, **kwargs):
        self.render("capture.html")


class VideoHandler(WebSocketHandler):
    # 处理接收数据，用户发送数据请求后反馈一帧图像
    def on_message(self, message):
        self.write_message({"img": get_image_dataurl()})

3、创建网页文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
</head>
<body>

    <!--
        canvas 这个标签常用来绘制图像
    -->
    <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");

    //设置一个定时10ms,等待WebSocket 连接完成
    var timer = setInterval(function () {
        if (ws.readyState == 1){
            //想服务器发送数据,请求图片,这里发送的内容随便都可以
            ws.send("msg");
            clearInterval(timer);
        }
    },10);

    //信息的回调处理函数
    ws.onmessage = function (res) {
        //(1).首先获取到一帧帧的图片
        console.log("接收到数据");
        var img_src = JSON.parse(res.data)["img"];
        var img = new Image();
        img.src = img_src;

        //(2).展示出来
        var ctx = canvas.getContext("2d"); // 2维图像
        img.onload = function(){
            canvas.setAttribute("width",img.width);
            canvas.setAttribute("height",img.height);
            ctx.drawImage(img,0,0,600,800); //后面两个0代表从坐标(0,0)的位置开始绘制图片
        }

        ws.send("msg");
    }

</script>
</html>

3、添加路由：

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)
]