Python实现网页端显示摄像头拍摄视频_在网页中嵌入python的cv2摄像头

作者：IT小白 | 2024-07-01 09:58:51

踩

在网页中嵌入python的cv2摄像头

需要基础

Python 端的web框架是tronado,你可以通过这个网址学习它
我们发送请求的协议是websocket,是http协议升级版,看完让你彻底搞懂Websocket原理
Python 端需要安装的重要的库:
- cv2 (用于打开摄像头)
- tornado (搭建服务)
- numpy (用于处理数组)
- PIL (处理图片)
- 其它一些基本库,大家应该都自带
基本网页基础

代码力求简洁,没有上面基础的应该也能看懂 : )

后台实现

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

# 定义一些基本设置
port = 10101
address = "localhost"
JPEG_HEADER = "data:image/jpeg;base64,"  # 这个是对图片转码用的

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

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 IndexHandler(web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render("index.html")

class VideoHandler(websocket.WebSocketHandler):

    # 处理接收数据
    def on_message(self, message):
        self.write_message({"img":get_image_dataurl()})

if __name__ == '__main__':

    app = web.Application(handlers=[(r"/",IndexHandler),
                           (r"/index",IndexHandler),
                            (r'/video',VideoHandler)],
                          template_path=os.path.join(os.path.dirname(__file__),"ui"))
    http_server = httpserver.HTTPServer(app)
    http_server.listen(port=port,address=address)
    print("URL: http://{}:{}/index".format(address,port))
    ioloop.IOLoop.instance().start()
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

前端页面

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

    <!--
        canvas 这个标签常用来绘制图像
    -->
    <canvas id="canvas"></canvas>

</body>

<script>
    var address = "localhost";
    var port = 10101;
    var ws = new WebSocket("ws://"+address+":"+port+"/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).首先获取到一帧帧的图片
        var img_src = JSON.parse(res.data)["img"];
        var img = new Image();
        img.src = img_src;

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

</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

后序

由于canvas 刷新的问题,在有些浏览器可能不成功
我之前用的Google不成功,后来用QQ浏览器成功了

代码提供

点击传送

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】