工程的所有文件：

想要改成自己获取视频帧并处理的图片，在camera.py文件中修改就可以了。也可以参考最后给出的camera_opencv.py文件和camera_pi.py文件。

文件的代码如下：

index.html

<html><head><title>web Video</title></head><body><h1>web端实时视频demo</h1><img src="{{ url_for('video_feed') }}"></body>
</html>

app.py

#!/usr/bin/env python
from importlib import import_module
import os
from flask import Flask, render_template, Response# import camera driver
if os.environ.get('CAMERA'):Camera = import_module('camera_' + os.environ['CAMERA']).Camera
else:from camera import Camera# Raspberry Pi camera module (requires picamera package)
# from camera_pi import Cameraapp = Flask(__name__)@app.route('/')
def index():"""Video streaming home page."""return render_template('index.html')def gen(camera):"""Video streaming generator function."""while True:frame = camera.get_frame()yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')@app.route('/video_feed')
def video_feed():"""Video streaming route. Put this in the src attribute of an img tag."""return Response(gen(Camera()),mimetype='multipart/x-mixed-replace; boundary=frame')if __name__ == '__main__':app.run(host='0.0.0.0', threaded=True)

base_camera.py

import time
import threading
try:from greenlet import getcurrent as get_ident
except ImportError:try:from thread import get_identexcept ImportError:from _thread import get_identclass CameraEvent(object):"""An Event-like class that signals all active clients when a new frame isavailable."""def __init__(self):self.events = {}def wait(self):"""Invoked from each client's thread to wait for the next frame."""ident = get_ident()if ident not in self.events:# this is a new client# add an entry for it in the self.events dict# each entry has two elements, a threading.Event() and a timestampself.events[ident] = [threading.Event(), time.time()]return self.events[ident][0].wait()def set(self):"""Invoked by the camera thread when a new frame is available."""now = time.time()remove = Nonefor ident, event in self.events.items():if not event[0].isSet():# if this client's event is not set, then set it# also update the last set timestamp to nowevent[0].set()event[1] = nowelse:# if the client's event is already set, it means the client# did not process a previous frame# if the event stays set for more than 5 seconds, then assume# the client is gone and remove itif now - event[1] > 5:remove = identif remove:del self.events[remove]def clear(self):"""Invoked from each client's thread after a frame was processed."""self.events[get_ident()][0].clear()class BaseCamera(object):thread = None  # background thread that reads frames from cameraframe = None  # current frame is stored here by background threadlast_access = 0  # time of last client access to the cameraevent = CameraEvent()def __init__(self):"""Start the background camera thread if it isn't running yet."""if BaseCamera.thread is None:BaseCamera.last_access = time.time()# start background frame threadBaseCamera.thread = threading.Thread(target=self._thread)BaseCamera.thread.start()# wait until frames are availablewhile self.get_frame() is None:time.sleep(0)def get_frame(self):"""Return the current camera frame."""BaseCamera.last_access = time.time()# wait for a signal from the camera threadBaseCamera.event.wait()BaseCamera.event.clear()return BaseCamera.frame@staticmethoddef frames():""""Generator that returns frames from the camera."""raise RuntimeError('Must be implemented by subclasses.')@classmethoddef _thread(cls):"""Camera background thread."""print('Starting camera thread.')frames_iterator = cls.frames()for frame in frames_iterator:BaseCamera.frame = frameBaseCamera.event.set()  # send signal to clientstime.sleep(0)# if there hasn't been any clients asking for frames in# the last 10 seconds then stop the threadif time.time() - BaseCamera.last_access > 10:frames_iterator.close()print('Stopping camera thread due to inactivity.')breakBaseCamera.thread = None

camera.py

import time
from base_camera import BaseCamera
import numpy as np
import cv2class Camera(BaseCamera):"""An emulated camera implementation that streams a repeated sequence of"""@staticmethoddef frames():# 在这里实现自己视频帧的获取和处理i = 0while True:time.sleep(0.5)img = np.ones((640, 1080, 3), np.uint8) * 188cv2.putText(img, str(i), (300, 300), cv2.FONT_HERSHEY_SIMPLEX, 2, (255, 0, 0), 3)img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)img_encode = cv2.imencode('.jpg', img)[1]img_byte = img_encode.tobytes()yield img_bytei = i + 1i = i % 1000

最后在浏览器的效果如下：

另附：

camera_opencv.py（用opencv实现调用摄像头）

import os
import cv2
from base_camera import BaseCameraclass Camera(BaseCamera):video_source = 0def __init__(self):if os.environ.get('OPENCV_CAMERA_SOURCE'):Camera.set_video_source(int(os.environ['OPENCV_CAMERA_SOURCE']))super(Camera, self).__init__()@staticmethoddef set_video_source(source):Camera.video_source = source@staticmethoddef frames():camera = cv2.VideoCapture(Camera.video_source)if not camera.isOpened():raise RuntimeError('Could not start camera.')while True:# read current framestart = cv2.getTickCount()_, img = camera.read()# the fps put in imagestop = cv2.getTickCount()fps = cv2.getTickFrequency() / (stop - start)fps = '{}: {:.3f}'.format('FPS', fps)(fps_w, fps_h), baseline = cv2.getTextSize(fps, cv2.FONT_HERSHEY_SIMPLEX, 0.5, 2)cv2.rectangle(img, (2, 20 - fps_h - baseline), (2 + fps_w, 18), color=(0, 0, 0), thickness=-1)cv2.putText(img, text=fps, org=(3, 15), fontFace=cv2.FONT_HERSHEY_SIMPLEX,fontScale=0.5, color=(255, 255, 255), thickness=2)# encode as a jpeg image and return ityield cv2.imencode('.jpg', img)[1].tobytes()

camera_pi.py（树莓派摄像头模块实现）

import io
import time
import picamera
from base_camera import BaseCameraclass Camera(BaseCamera):@staticmethoddef frames():with picamera.PiCamera() as camera:# let camera warm uptime.sleep(2)stream = io.BytesIO()for _ in camera.capture_continuous(stream, 'jpeg',use_video_port=True):# return current framestream.seek(0)yield stream.read()# reset stream for next framestream.seek(0)stream.truncate()

flask实现浏览器实时视频播放相关推荐

VUE+webrtc-streamer实现实时视频播放（监控设备-rtsp）
首先说明目前我只完成了本地测试,因还没确定技术选型所以暂无项目应用,先做一下储备,后续项目应用的话这篇文章会持续更新. 监控设备播放效果如下:基于公司环境测试了大华和海康的监控设备(H264编码)可以 ...
webpack-dev-server 搭建本地服务以及浏览器实时刷新
一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员对服务器的搭建和配置并不熟悉,这个时候需要 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
ios的Safari浏览器下视频播放问题
ios的Safari浏览器下视频播放问题起因原因: 解决方案: 示例代码起因最近在做手机端接口对接,后端使用java,前端使用vue开发,在提供给前端视频接口时出现了个问题: 视频在安卓上可以 ...
海康视频VTM流监控浏览器实时播放调试总结
海康视频VTM流播放调试总结 VTM视频demo调用部分代码配置好地址账号密码后即可进行浏览器实时调用demo实现网域ip可在vtm服务配置中获取设备编码需注意: 设备编码取此处编码设备编号,可 ...
解决远程控制软件在连接时无法正常显示浏览器、视频播放器等软件界面的问题
问题描述在使用一些远程控制软件(如TeamViewer或者向日葵等)进行远程连接时无法正常显示浏览器.视频播放器.VS等软件的界面,会变成一个白屏或黑屏怎么办? 原因剖析原因一:笔记本合上盖子关闭 ...
移动端HTML5＜video＞浏览器劫持视频播放视频激活播放后强制全屏视频无法被其他元素覆盖
浏览器劫持视频播放.视频无法被其他元素覆盖 Html5 video 多媒体标签 <videoid="loginVideo"mutedautoplayloop:src=&quo ...
QT实时视频播放界面设计
QT播放界面设计今天写了个QT的实时视频播放界面,其实要写一个播放界面非常容易,以下为代码首先定义一个用于播放的控件: * PlsyItem.h #ifndef PLAYITEM_H #defin ...
利用flask将opencv实时视频流输出到浏览器
opencv通过webcam可以获取本地实时视频流,但是如果需要将视频流共享给其他机器调用,就可以将利用flask框架构建一个实时视频流服务器,然后其他机器可以通过向这个服务器发送请求来获取这台机器上 ...
采集rtsp流摄像头到浏览器实时播放方案
本文旨在实现使用摄像头采集视频,并且可以在网页实时显示,主要参考的两篇博文为: 1. 视频实时显示的三种方案 2. 使用WebSockets进行HTML5视频直播我们使用博文1介绍的第 ...

flask实现浏览器实时视频播放

工程的所有文件：

文件的代码如下：

最后在浏览器的效果如下：

另附：

flask实现浏览器实时视频播放相关推荐

最新文章

热门文章