[python] 웹캠에서 캡처한 이미지를 서버로 전송하여 저장
개요
다음을 구현합니다.
· 브라우저에서 웹캠 시작
· 카메라 화면의 이미지를 캡처
· 캡처 이미지를 서버로 전송하여 저장
폴더 구성
/home/capture_img
|--run.py
|--app
| |--api.py
| |--service.py
| |--static
| | |--main.js
| |--templates
| | |--index.html
|--images #キャプチャした画像の保存先
소스 코드
룬. py
run.pyfrom app.api import api
if __name__ == '__main__':
api.run(host='0.0.0.0', port=8000)
app/api.py
app/api.pyfrom flask import Flask, request, make_response, render_template, url_for
from . import service
api = Flask(__name__)
@api.route('/', methods=['GET'])
def index():
return render_template('index.html')
@api.route('/capture_img', methods=['POST'])
def capture_img():
msg = service.save_img(request.form["img"])
return make_response(msg)
app/service.py
app/service.pyimport base64
import numpy as np
import cv2
def save_img(img_base64):
#binary <- string base64
img_binary = base64.b64decode(img_base64)
#jpg <- binary
img_jpg=np.frombuffer(img_binary, dtype=np.uint8)
#raw image <- jpg
img = cv2.imdecode(img_jpg, cv2.IMREAD_COLOR)
#デコードされた画像の保存先パス
image_file="/home/capture_img/images/img0000.jpg"
#画像を保存
cv2.imwrite(image_file, img)
return "SUCCESS"
templates/index.html
templates/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get_capture</title>
</head>
<body>
<h3>スペースキー押下でキャプチャ取得</h3>
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" class="canvas-wrapper"></canvas>
</body>
<script src="{{url_for('static', filename='main.js')}}"></script>
<style>
/* canvasは非表示にする */
#canvas {
display: none !important;
}
</style>
</html>
static/main.js
static/main.jsvar video = document.getElementById('video');
// getUserMedia()でカメラ映像の取得
var media = navigator.mediaDevices.getUserMedia({ video: true });
//リアルタイム再生（ストリーミング）を行うためにビデオタグに流し込む
media.then((stream) => {
video.srcObject = stream;
});
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', video.width);
canvas.setAttribute('height', video.height);
video.addEventListener(
'timeupdate',
function () {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, video.width, video.height);
},
true
);
// スペースキー押下時にキャプチャ取得を実行するリスナーを設定
document.addEventListener('keydown', (event) => {
var keyName = event.key;
if (keyName === ' ') {
console.log(`keydown: SpaceKey`);
context = canvas.getContext('2d');
// 取得したbase64データのヘッドを取り除く
var img_base64 = canvas.toDataURL('image/jpeg').replace(/^.*,/, '')
captureImg(img_base64);
}
});
var xhr = new XMLHttpRequest();
// キャプチャ画像データ(base64)をPOST
function captureImg(img_base64) {
const body = new FormData();
body.append('img', img_base64);
xhr.open('POST', 'http://localhost:8000/capture_img', true);
xhr.onload = () => {
console.log(xhr.responseText)
};
xhr.send(body);
}
필요한 모듈 설치
root@ed9f7bedad16:/# pip install opencv-python flask
실행
root@ed9f7bedad16:/# python /home/capture_img/run.py
* Serving Flask app "app.api" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:8000/ (Press CTRL+C to quit)
동작 확인
http://localhost:8000 방문 & 스페이스 키 누르기
root@ed9f7bedad16:/# ls /home/capture_img/images/
img0000.jpg
캡처 이미지가 저장되었습니다.
이상입니다.
Reference
이 문제에 관하여([python] 웹캠에서 캡처한 이미지를 서버로 전송하여 저장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/h_000/items/e5ff1152aae8c67af476
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
/home/capture_img
|--run.py
|--app
| |--api.py
| |--service.py
| |--static
| | |--main.js
| |--templates
| | |--index.html
|--images #キャプチャした画像の保存先
소스 코드
룬. py
run.pyfrom app.api import api
if __name__ == '__main__':
api.run(host='0.0.0.0', port=8000)
app/api.py
app/api.pyfrom flask import Flask, request, make_response, render_template, url_for
from . import service
api = Flask(__name__)
@api.route('/', methods=['GET'])
def index():
return render_template('index.html')
@api.route('/capture_img', methods=['POST'])
def capture_img():
msg = service.save_img(request.form["img"])
return make_response(msg)
app/service.py
app/service.pyimport base64
import numpy as np
import cv2
def save_img(img_base64):
#binary <- string base64
img_binary = base64.b64decode(img_base64)
#jpg <- binary
img_jpg=np.frombuffer(img_binary, dtype=np.uint8)
#raw image <- jpg
img = cv2.imdecode(img_jpg, cv2.IMREAD_COLOR)
#デコードされた画像の保存先パス
image_file="/home/capture_img/images/img0000.jpg"
#画像を保存
cv2.imwrite(image_file, img)
return "SUCCESS"
templates/index.html
templates/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get_capture</title>
</head>
<body>
<h3>スペースキー押下でキャプチャ取得</h3>
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" class="canvas-wrapper"></canvas>
</body>
<script src="{{url_for('static', filename='main.js')}}"></script>
<style>
/* canvasは非表示にする */
#canvas {
display: none !important;
}
</style>
</html>
static/main.js
static/main.jsvar video = document.getElementById('video');
// getUserMedia()でカメラ映像の取得
var media = navigator.mediaDevices.getUserMedia({ video: true });
//リアルタイム再生（ストリーミング）を行うためにビデオタグに流し込む
media.then((stream) => {
video.srcObject = stream;
});
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', video.width);
canvas.setAttribute('height', video.height);
video.addEventListener(
'timeupdate',
function () {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, video.width, video.height);
},
true
);
// スペースキー押下時にキャプチャ取得を実行するリスナーを設定
document.addEventListener('keydown', (event) => {
var keyName = event.key;
if (keyName === ' ') {
console.log(`keydown: SpaceKey`);
context = canvas.getContext('2d');
// 取得したbase64データのヘッドを取り除く
var img_base64 = canvas.toDataURL('image/jpeg').replace(/^.*,/, '')
captureImg(img_base64);
}
});
var xhr = new XMLHttpRequest();
// キャプチャ画像データ(base64)をPOST
function captureImg(img_base64) {
const body = new FormData();
body.append('img', img_base64);
xhr.open('POST', 'http://localhost:8000/capture_img', true);
xhr.onload = () => {
console.log(xhr.responseText)
};
xhr.send(body);
}
필요한 모듈 설치
root@ed9f7bedad16:/# pip install opencv-python flask
실행
root@ed9f7bedad16:/# python /home/capture_img/run.py
* Serving Flask app "app.api" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:8000/ (Press CTRL+C to quit)
동작 확인
http://localhost:8000 방문 & 스페이스 키 누르기
root@ed9f7bedad16:/# ls /home/capture_img/images/
img0000.jpg
캡처 이미지가 저장되었습니다.
이상입니다.
Reference
이 문제에 관하여([python] 웹캠에서 캡처한 이미지를 서버로 전송하여 저장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/h_000/items/e5ff1152aae8c67af476
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
from app.api import api
if __name__ == '__main__':
api.run(host='0.0.0.0', port=8000)
from flask import Flask, request, make_response, render_template, url_for
from . import service
api = Flask(__name__)
@api.route('/', methods=['GET'])
def index():
return render_template('index.html')
@api.route('/capture_img', methods=['POST'])
def capture_img():
msg = service.save_img(request.form["img"])
return make_response(msg)
import base64
import numpy as np
import cv2
def save_img(img_base64):
#binary <- string base64
img_binary = base64.b64decode(img_base64)
#jpg <- binary
img_jpg=np.frombuffer(img_binary, dtype=np.uint8)
#raw image <- jpg
img = cv2.imdecode(img_jpg, cv2.IMREAD_COLOR)
#デコードされた画像の保存先パス
image_file="/home/capture_img/images/img0000.jpg"
#画像を保存
cv2.imwrite(image_file, img)
return "SUCCESS"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get_capture</title>
</head>
<body>
<h3>スペースキー押下でキャプチャ取得</h3>
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" class="canvas-wrapper"></canvas>
</body>
<script src="{{url_for('static', filename='main.js')}}"></script>
<style>
/* canvasは非表示にする */
#canvas {
display: none !important;
}
</style>
</html>
var video = document.getElementById('video');
// getUserMedia()でカメラ映像の取得
var media = navigator.mediaDevices.getUserMedia({ video: true });
//リアルタイム再生（ストリーミング）を行うためにビデオタグに流し込む
media.then((stream) => {
video.srcObject = stream;
});
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', video.width);
canvas.setAttribute('height', video.height);
video.addEventListener(
'timeupdate',
function () {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, video.width, video.height);
},
true
);
// スペースキー押下時にキャプチャ取得を実行するリスナーを設定
document.addEventListener('keydown', (event) => {
var keyName = event.key;
if (keyName === ' ') {
console.log(`keydown: SpaceKey`);
context = canvas.getContext('2d');
// 取得したbase64データのヘッドを取り除く
var img_base64 = canvas.toDataURL('image/jpeg').replace(/^.*,/, '')
captureImg(img_base64);
}
});
var xhr = new XMLHttpRequest();
// キャプチャ画像データ(base64)をPOST
function captureImg(img_base64) {
const body = new FormData();
body.append('img', img_base64);
xhr.open('POST', 'http://localhost:8000/capture_img', true);
xhr.onload = () => {
console.log(xhr.responseText)
};
xhr.send(body);
}
root@ed9f7bedad16:/# pip install opencv-python flask
실행
root@ed9f7bedad16:/# python /home/capture_img/run.py
* Serving Flask app "app.api" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:8000/ (Press CTRL+C to quit)
동작 확인
http://localhost:8000 방문 & 스페이스 키 누르기
root@ed9f7bedad16:/# ls /home/capture_img/images/
img0000.jpg
캡처 이미지가 저장되었습니다.
이상입니다.
Reference
이 문제에 관하여([python] 웹캠에서 캡처한 이미지를 서버로 전송하여 저장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/h_000/items/e5ff1152aae8c67af476
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
root@ed9f7bedad16:/# python /home/capture_img/run.py
* Serving Flask app "app.api" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:8000/ (Press CTRL+C to quit)
http://localhost:8000 방문 & 스페이스 키 누르기
root@ed9f7bedad16:/# ls /home/capture_img/images/
img0000.jpg
캡처 이미지가 저장되었습니다.
이상입니다.
Reference
이 문제에 관하여([python] 웹캠에서 캡처한 이미지를 서버로 전송하여 저장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h_000/items/e5ff1152aae8c67af476텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
