python 中用flask 通过socket实现实时摄像头传输到网页

dabo_520

已于 2024-01-24 16:30:05 修改

阅读量1.2k

点赞数 2

于 2023-04-18 23:20:06 首次发布

本文链接：https://blog.csdn.net/dabo_520/article/details/130233167

版权

话不多说直接上代码：

这个为服务端代码

from flask import Flask
from flask import render_template
from flask import Response
import cv2
import socket
import threading

lock = threading.Lock()
app = Flask(__name__, template_folder="data/template") # 这个路径为存放web.html的相对路径


@app.route('/')
def index():
    return render_template("web.html")

#cap = cv2.VideoCapture(0)
def generate():
    sk = socket.socket()
    sk.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)  # 确保下次启动是端口保留
    sk.bind(('10.40.129.105', 1))  # 这里也是写本服务机的ip，端口随便写
    sk.listen(5)
    conn, address = sk.accept()
    while True:
        with lock:
            # ret, frame = cap.read()
            # flag, img_encode = cv2.imencode('.jpg', frame)
            data = conn.recv(188888)  # 188888为接受的最大字节数
        yield(b'--frame\r\n' b'content-type:image/jpeg\r\n\r\n' + data + b'\r\n')  # bytearray(img_encode)


@app.route('/video_feed')
def video_feed():
    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')


if __name__ == "__main__":
     app.run(debug=True)

这个为网站页面代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>video</title>
    </head>
    <style>
        img{
            margin-left:400px;
        }
    </style>
    <body>
        <h1>video</h1>
        <img src="{{url_for('video_feed')}}"> 
    </body>
</html>

这个为客户端代码

import socket
import cv2
import numpy as np

ip_port = ('10.40.129.105', 1)  # 这里填服务端的ip，端口要和服务端一致
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)  # 创建套接字
s.connect(ip_port)  # 连接服务器

cap = cv2.VideoCapture(0)  # 打开摄像头，0为默认摄像头
# cap.set(cv2.CAP_PROP_FRAME_WIDTH, 352)  # 设置每帧图片的宽
# cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 288)  # 设置每帧图片的高

while True:
    ret, frame = cap.read()  # 获取视频的开启状态和每一帧图片
    img_encode = cv2.imencode('.jpg', frame)[1]  # 对每一帧图片进行编码
    data = np.array(img_encode)  # 转化为矩阵
    byte_encode = data.tobytes()  # 编码格式转为字节格式
    data_len = str(len(byte_encode))  # 获取每一帧图片的大小（字节数）
    print('每帧图片大小: %s' % data_len)
    s.send(byte_encode)  # 发送给客户端呈现

1、过程理解

通过运行服务端实现监听客户端等待传输摄像头每一帧的图片，摄像头图象由客户端传输，服务端再传输到网页上呈现。最重要的是运行的顺序：服务端->网页->客户端。

#cap = cv2.VideoCapture(0)
def generate():
    sk = socket.socket()
    sk.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)  # 确保下次启动是端口保留
    sk.bind(('10.40.129.105', 1))  # 这里也是写本服务机的ip，端口随便写
    sk.listen(5)
    conn, address = sk.accept()
    while True:
        with lock:
            # ret, frame = cap.read()
            # flag, img_encode = cv2.imencode('.jpg', frame)
            data = conn.recv(188888)  # 188888为接受的最大字节数
        yield(b'--frame\r\n' b'content-type:image/jpeg\r\n\r\n' + data + b'\r\n')  # bytearray(img_encode)

这里运行video_feed函数调用generate函数实现向网页返回每一帧图片的编码，记得这里的图片编码要化为数组，因为我们浏览器可以自动转换编码数组，这在很多处理图片视频方面都适用。

@app.route('/video_feed')
def video_feed():
    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')

可看到在generate函数中，实现了socket的监听、等待连接，在我第一次学习时，把socket通讯放在了函数外面，就想这通过一次连接直接传输，但结果是网页一直在加载打不开，原因似乎是服务端在执行传输时又进行了监听，使得一直在等待。所以把socket通讯放在里面就是每传一张图片就监听连接一次。

我也不知道为什么不能运行客户端后再运行网页，但这样做后就是网页一直在加载，可能是个bug也可能是我学艺不精，如果各位有比较完美的代码或想法可在评论区留言。

dabo_520

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
python 中用flask 通过socket实现实时摄像头传输到网页

话不多说直接上代码：这个为服务端代码这个为网站页面代码这个为客户端代码。
复制链接

扫一扫

python 中用flask 通过socket实现实时摄像头传输到网页

1、过程理解

“相关推荐”对你有帮助么？