Python如何将OpenCV摄像头视频流通过浏览器播放

Written by

风君子

in

软件

文章目录

这是最简单的方法，通过Flask创建一个HTTP服务器，将视频帧编码为MJPEG流。

from flask import Flask, Response import cv2 app = Flask(__name__) def generate_frames(): camera = cv2.VideoCapture(0) # 0表示默认摄像头 while True: success, frame = camera.read() if not success: break else: # 将帧转换为JPEG格式 ret, buffer = cv2.imencode(‘.jpg’, frame) frame = buffer.tobytes() yield (b’–framern’ b’Content-Type: image/jpegrnrn’ + frame + b’rn’) @app.route(‘/video_feed’) def video_feed(): return Response(generate_frames(), mimetype=’multipart/x-mixed-replace; boundary=frame’) @app.route(‘/’) def index(): return “”” <html> <head> <title>摄像头直播</title> </head> <body> <h1>摄像头直播</h1> <img src=”/video_feed” width=”640″ height=”480″> </body> </html> “”” if __name__ == ‘__main__’: app.run(host=’0.0.0.0′, port=5000, threaded=True)
运行上述Python脚本在浏览器中访问 http://localhost:5000 你将看到摄像头的实时视频流
实现简单无需额外客户端代码兼容大多数现代浏览器
延迟较高（通常在0.5-2秒）不是真正的视频流，而是连续JPEG图片

这种方法使用WebSocket实现更低延迟的视频传输。

from flask import Flask, render_template from flask_socketio import SocketIO import cv2 import base64 import threading import time app = Flask(__name__) app.config[‘SECRET_KEY’] = ‘secret!’ socketio = SocketIO(app) def video_stream(): camera = cv2.VideoCapture(0) while True: success, frame = camera.read() if not success: break # 调整帧大小 frame = cv2.resize(frame, (640, 480)) # 转换为JPEG ret, buffer = cv2.imencode(‘.jpg’, frame) # 转换为base64 jpg_as_text = base64.b64encode(buffer).decode(‘utf-8’) # 通过WebSocket发送 socketio.emit(‘video_frame’, {‘image’: jpg_as_text}) time.sleep(0.05) # 控制帧率 @app.route(‘/’) def index(): return render_template(‘index.html’) @socketio.on(‘connect’) def handle_connect(): print(‘客户端已连接’) threading.Thread(target=video_stream).start() if __name__ == ‘__main__’: socketio.run(app, host=’0.0.0.0′, port=5000)
<!DOCTYPE html> <html> <head> <title>WebSocket摄像头</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js”></script> <style> #video { width: 640px; height: 480px; border: 1px solid #ccc; } </style> </head> <body> <h1>WebSocket摄像头</h1> <img id=”video” src=””> <script> const socket = io(); const video = document.getElementById(‘video’); socket.on(‘video_frame’, function(data) { video.src = ‘data:image/jpeg;base64,’ + data.image; }); </script> </body> </html>
延迟比MJPEG低更适合实时交互应用双向通信能力
实现稍复杂需要WebSocket支持

WebRTC可以提供最低延迟的视频传输，适合需要实时交互的场景。

import cv2 import asyncio from aiortc import VideoStreamTrack from av import VideoFrame class OpenCVVideoStreamTrack(VideoStreamTrack): def __init__(self): super().__init__() self.camera = cv2.VideoCapture(0) async def recv(self): pts, time_base = await self.next_timestamp() success, frame = self.camera.read() if not success: raise Exception(“无法读取摄像头”) # 转换颜色空间BGR->RGB frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) # 创建VideoFrame video_frame = VideoFrame.from_ndarray(frame, format=’rgb24′) video_frame.pts = pts video_frame.time_base = time_base return video_frame
完整的WebRTC实现需要信令服务器，代码较为复杂，建议使用现成的库如aiortc的示例代码。

降低分辨率：640×480通常足够 frame = cv2.resize(frame, (640, 480)) 调整帧率：15-30FPS通常足够 time.sleep(1/30) # 控制为30FPS 使用硬件加速：如果可用 camera.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter_fourcc(‘M’, ‘J’, ‘P’, ‘G’)) 多线程处理：避免阻塞主线程

摄像头无法打开：检查摄像头索引（尝试0,1,2等）确保没有其他程序占用摄像头高延迟：降低分辨率减少帧率使用WebSocket或WebRTC替代MJPEG 浏览器兼容性问题： Chrome和Firefox通常支持最好对于Safari，可能需要额外配置

这是最简单的方法，通过Flask创建一个HTTP服务器，将视频帧编码为MJPEG流。

from flask import Flask, Response
import cv2

app = Flask(__name__)

def generate_frames():
    camera = cv2.VideoCapture(0)  # 0表示默认摄像头
    
    while True:
        success, frame = camera.read()
        if not success:
            break
        else:
            # 将帧转换为JPEG格式
            ret, buffer = cv2.imencode('.jpg', frame)
            frame = buffer.tobytes()
            yield (b'--framern'
                   b'Content-Type: image/jpegrnrn' + frame + b'rn')

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

@app.route('/')
def index():
    return """
    <html>
    <head>
        <title>摄像头直播</title>
    </head>
    <body>
        <h1>摄像头直播</h1>
        <img src="/video_feed" width="640" height="480">
    </body>
    </html>
    """

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, threaded=True)

运行上述Python脚本

在浏览器中访问 `http://localhost:5000`

你将看到摄像头的实时视频流

实现简单

无需额外客户端代码

兼容大多数现代浏览器

延迟较高（通常在0.5-2秒）

不是真正的视频流，而是连续JPEG图片

这种方法使用WebSocket实现更低延迟的视频传输。

from flask import Flask, render_template
from flask_socketio import SocketIO
import cv2
import base64
import threading
import time

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

def video_stream():
    camera = cv2.VideoCapture(0)
    
    while True:
        success, frame = camera.read()
        if not success:
            break
        # 调整帧大小
        frame = cv2.resize(frame, (640, 480))
        # 转换为JPEG
        ret, buffer = cv2.imencode('.jpg', frame)
        # 转换为base64
        jpg_as_text = base64.b64encode(buffer).decode('utf-8')
        # 通过WebSocket发送
        socketio.emit('video_frame', {'image': jpg_as_text})
        time.sleep(0.05)  # 控制帧率

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

@socketio.on('connect')
def handle_connect():
    print('客户端已连接')
    threading.Thread(target=video_stream).start()

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=5000)

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket摄像头</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        #video {
            width: 640px;
            height: 480px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>WebSocket摄像头</h1>
    <img id="video" src="">
    
    <script>
        const socket = io();
        const video = document.getElementById('video');
        
        socket.on('video_frame', function(data) {
            video.src = 'data:image/jpeg;base64,' + data.image;
        });
    </script>
</body>
</html>

延迟比MJPEG低

更适合实时交互应用

双向通信能力

实现稍复杂

需要WebSocket支持

WebRTC可以提供最低延迟的视频传输，适合需要实时交互的场景。

import cv2
import asyncio
from aiortc import VideoStreamTrack
from av import VideoFrame

class OpenCVVideoStreamTrack(VideoStreamTrack):
    def __init__(self):
        super().__init__()
        self.camera = cv2.VideoCapture(0)
    
    async def recv(self):
        pts, time_base = await self.next_timestamp()
        
        success, frame = self.camera.read()
        if not success:
            raise Exception("无法读取摄像头")
        
        # 转换颜色空间BGR->RGB
        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        # 创建VideoFrame
        video_frame = VideoFrame.from_ndarray(frame, format='rgb24')
        video_frame.pts = pts
        video_frame.time_base = time_base
        
        return video_frame

完整的WebRTC实现需要信令服务器，代码较为复杂，建议使用现成的库如`aiortc`的示例代码。

降低分辨率：640×480通常足够

frame = cv2.resize(frame, (640, 480))

调整帧率：15-30FPS通常足够

time.sleep(1/30)  # 控制为30FPS

使用硬件加速：如果可用

camera.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter_fourcc('M', 'J', 'P', 'G'))

多线程处理：避免阻塞主线程

摄像头无法打开：

检查摄像头索引（尝试0,1,2等）

确保没有其他程序占用摄像头

高延迟：

降低分辨率

减少帧率

使用WebSocket或WebRTC替代MJPEG

浏览器兼容性问题：

Chrome和Firefox通常支持最好

对于Safari，可能需要额外配置

对于快速实现，推荐方法1（Flask + MJPEG），它简单易用且兼容性好。如果需要更低延迟，可以选择方法2（WebSocket）。对于专业级实时应用，方法3（WebRTC）是最佳选择，但实现复杂度最高。

根据你的具体需求（延迟要求、浏览器兼容性、开发复杂度）选择最适合的方案。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持风君子博客。

您可能感兴趣的文章:

使用Python和OpenCV库实现实时颜色识别系统

Python中OpenCV与Matplotlib的图像操作入门指南

Python使用OpenCV实现帧间差异检测

使用Python和OpenCV实现实时文档扫描与矫正系统

使用Python和OpenCV实现图片拼接的方法

Python中OpenCV绑定库的使用方法详解

华夏福临门盛世加强版怎么样？产品责任是重中之重

国寿福庆典版值得买吗？附投保建议

理财中低风险是几级？中低风险理财会亏吗

瑞泰泰安心防癌险优缺点是什么？这份分析不容错过

2020最新自助免费申请Office365教育版，免费5TOneDrive云盘详细图文教程

MacBook怎么绕过BootCamp安装Win10双系统？

国内知名的前端博客

域名为什么会被墙？如何检测域名是否被墙？域名被墙如何处理？

最新的windows xp sp3产品密匙 xp sp3序列号 xp sp3激活码

Python如何将OpenCV摄像头视频流通过浏览器播放

目录

这是最简单的方法，通过Flask创建一个HTTP服务器，将视频帧编码为MJPEG流。

运行上述Python脚本 在浏览器中访问 http://localhost:5000 你将看到摄像头的实时视频流

实现简单 无需额外客户端代码 兼容大多数现代浏览器

延迟较高（通常在0.5-2秒） 不是真正的视频流，而是连续JPEG图片

这种方法使用WebSocket实现更低延迟的视频传输。

延迟比MJPEG低 更适合实时交互应用 双向通信能力

实现稍复杂 需要WebSocket支持

WebRTC可以提供最低延迟的视频传输，适合需要实时交互的场景。

完整的WebRTC实现需要信令服务器，代码较为复杂，建议使用现成的库如aiortc的示例代码。

降低分辨率：640×480通常足够 frame = cv2.resize(frame, (640, 480)) 调整帧率：15-30FPS通常足够 time.sleep(1/30) # 控制为30FPS 使用硬件加速：如果可用 camera.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter_fourcc('M', 'J', 'P', 'G')) 多线程处理：避免阻塞主线程

摄像头无法打开： 检查摄像头索引（尝试0,1,2等） 确保没有其他程序占用摄像头 高延迟： 降低分辨率 减少帧率 使用WebSocket或WebRTC替代MJPEG 浏览器兼容性问题： Chrome和Firefox通常支持最好 对于Safari，可能需要额外配置

More posts

站内搜索

标签云

热门文章

友情链接

运行上述Python脚本

在浏览器中访问 `http://localhost:5000`

你将看到摄像头的实时视频流

实现简单

无需额外客户端代码

兼容大多数现代浏览器

延迟较高（通常在0.5-2秒）

不是真正的视频流，而是连续JPEG图片

延迟比MJPEG低

更适合实时交互应用

双向通信能力

实现稍复杂

需要WebSocket支持

完整的WebRTC实现需要信令服务器，代码较为复杂，建议使用现成的库如`aiortc`的示例代码。

摄像头无法打开：

检查摄像头索引（尝试0,1,2等）

确保没有其他程序占用摄像头

高延迟：

降低分辨率

减少帧率

使用WebSocket或WebRTC替代MJPEG

浏览器兼容性问题：

Chrome和Firefox通常支持最好

对于Safari，可能需要额外配置