Python实现网页端显示摄像头拍摄视频

2023-12-19 20:58| 来源: 网络整理| 查看: 265

需要基础 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() 前端页面 display 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"); } 后序

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

代码提供

点击传送

【本文地址】

公司简介

联系我们