pytorch-实现摄像头实时检测并显示在网页上

机智的程序DOG

已于 2022-08-09 17:21:04 修改

阅读量1.9k

点赞数 2

分类专栏： pytorch 深度学习文章标签： pytorch tornado websocket

于 2020-07-21 17:49:48 首次发布

本文链接：https://blog.csdn.net/weixin_40330033/article/details/107494523

版权

深度学习同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

pytorch

11 篇文章 2 订阅

订阅专栏

1. 项目结构

detection_camera

templates

index.html

camera_main.py

2. main.py

from tornado import web, httpserver, ioloop, websocket
import os
import cv2
import numpy as np
from PIL import Image
import base64
import webbrowser
import time

port = 8080
address = "127.0.0.1"
JPEG_HEADER = "data:image/jpeg;base64,"

cap = cv2.VideoCapture(0)


def get_image_dataurl():
    # 获取摄像头数据
    hasMoreFrame, frame = cap.read()
    r, buf = cv2.imencode(".jpeg", frame)
    dat = Image.fromarray(np.uint8(buf)).tobytes()
    img_date_url = JPEG_HEADER + str(base64.b64encode(dat))[2:-1]
    # 获取当前时间
    time_now = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())

    data = [{
        "img_date_url": img_date_url,
        "time_now": time_now
    }]

    return data


class IndexHandler(web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render("index.html")


class VideoHandler(websocket.WebSocketHandler):
    # 处理接收数据
    def on_message(self, message):
        self.write_message({"data": get_image_dataurl()})


if __name__ == '__main__':
    app = web.Application(handlers=[(r"/", IndexHandler),
                                    (r'/camera', VideoHandler)],
                          template_path=os.path.join(os.path.dirname(__file__), "templates"))
    http_server = httpserver.HTTPServer(app)
    http_server.listen(port=port, address=address)
    print("URL: http://{}:{}/".format(address, port))
    webbrowser.open("http://127.0.0.1:8080/")
    try:
        ioloop.IOLoop.instance().start()
    except KeyboardInterrupt:
        ioloop.IOLoop.instance().stop()
        cap.release()
        cv2.destroyAllWindows()

3. index.html

<!DOCTYPE html>
<html style="height: 100%; width: 100%">
<head>
    <title>摄像头</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="height: 100%; width: 100%">

<div class="container-fluid" style="height: 100%">
    <div class="row" style="height: 100%">
        <div class="col-sm-2" style="background-color:gray;height: 100%">
            <div class="row">
                <div class="col-sm-12"><p id="time_now" style="text-align: left;font-size: 20px"></p></div>
            </div>
        </div>
        <div class="col-sm-10" style="background-color:white;height: 100%" id="img">
        </div>
    </div>
</div>

<script>
    var address = window.location.host;
    console.log(address)
    var port = 8080;
    var ws = new WebSocket("ws://" + address + "/camera");

    var timer = setInterval(function () {
        if (ws.readyState == 1) {
            ws.send("camera");
            clearInterval(timer);
        }
    }, 10);

    ws.onmessage = function (res) {
        var ret_data = JSON.parse(res.data)["data"];
        // 摄像头数据
        var img_src = ret_data[0].img_date_url
        var img = new Image();
        img.src = img_src;

        // 时间
        var time_now = ret_data[0].time_now

        var imgurl = "<img src=" + img.src + " height='100%' width='100%'>";
        $("#img").html(imgurl);
        $("#time_now").html("当前的时间为: " + time_now)
        ws.send("camera");
    }
</script>
</body>
</html>

机智的程序DOG

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
pytorch-实现摄像头实时检测并显示在网页上

1. 项目结构detection_cameratemplatesindex.htmlcamera_main.py2. main.pyfrom tornado import web, httpserver, ioloop, websocketimport osimport cv2import numpy as npfrom PIL import Imageimport base64import webbrowserimport timeport = 8080add
复制链接

扫一扫