파이썬의 OpenCV를 이용한 카메라를 웹에 표출하기 위해서는 Flask 서버를 구축해야 한다.
1. Flask 설치
pip install Flask
- Flask를 설치하기 위해 해당 명령어를 입력한다.
2. 라이브러리 Import
from flask import Flask, Response, render_template
import cv2
- Flask를 포함하여 여러 라이브러리를 임포트한다.
3. 카메라 표출 함수 생성
camera = cv2.VideoCapture(0)
def generate_frames():
while True:
success, frame = camera.read() # 프레임 읽기
if not success:
break
else:
ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--frame\\r\\n'
b'Content-Type: image/jpeg\\r\\n\\r\\n' + frame + b'\\r\\n') # 프레임 스트리밍
- 카메라 영상의 프레임 단위 이미지를 반환해주는 함수를 작성한다.
- 일단 IP 카메라가 존재하지 않아서 camera = cv2.VideoCapture(0)을 통해 웹캠을 불러온다.
4. 카메라 표출 함수 실행 매핑 작성
@app.route('/camera')
def getCamera():
return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
- 카메라 프레임을 반환해주는 매핑 함수를 작성한다.
- 해당 함수는 html 내에서 이용하면 된다.
5. 카메라 표출 페이지 출력 매핑 작성
@app.route('/cameraPage')
def cameraPage():
return render_template('cameraPage.html')
- 카메라 영상을 보여줄 페이지를 렌더링는 매핑을 작성한다.
6. 카메라를 최종적으로 출력하는 HTML 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera</title>
</head>
<body>
<div>
<img src="/camera" style="height:100vh; width: 100%"/>
</div>
</body>
</html>
- <img src="/camera" style="height:100vh; width: 100%"/> 해당 코드를 통해 Flask 내 카메라 표출 함수를 이용하여 최종적으로 카메라를 표출한다.
※ 전체 코드
from flask import Flask, Response, render_template
import cv2
app = Flask(__name__)
camera = cv2.VideoCapture(0) # 웹캠에 연결
@app.route('/')
@app.route('/home')
def home():
return '메인 페이지'
def generate_frames():
while True:
success, frame = camera.read() # 프레임 읽기
if not success:
break
else:
ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--frame\\r\\n'
b'Content-Type: image/jpeg\\r\\n\\r\\n' + frame + b'\\r\\n') # 프레임 스트리밍
@app.route('/cameraPage')
def cameraPage():
return render_template('cameraPage.html')
@app.route('/camera')
def getCamera():
return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera</title>
</head>
<body>
<div>
<img src="/camera" style="height:100vh; width: 100%"/>
</div>
</body>
</html>
