话不多说直接上代码：
这个为服务端代码
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)
这个为网站页面代码
video
这个为客户端代码
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也可能是我学艺不精，如果各位有比较完美的代码或想法可在评论区留言。
好文推荐
您阅读本篇文章共花了：
发表评论