はじめに
NGK2020S と言うイベントで
「市販のプレゼンソフトに満足できなくなったお話（画像処理編）」と言う発表をしました。
先ほどのLT資料です🐤
— 高橋 かずひと@PyConMini静岡 発表予定🐤 (@KzhtTkhs) January 18, 2020
「【NGK2020S】市販のプレゼンソフトに満足できなくなったお話（画像処理編）」https://t.co/6Xx0QXra1D#NGK2020S
上記の動画の2:25～あたりのことがやりたかった発表です。
⇒スライドの中でリアルタイムにデモを実施
本投稿では、OpenCVからEelの部分の説明をしています。
※たいした内容ではありませんが、、、
ソースコード
|
Kazuhito00/opencv2eel-sample
opencv2eel_sampleはEel上でOpenCVの画像を表示するサンプルです。 |
特にひねりもなく、OpenCVで取得した画像をbase64にしてsrcに流し込んでいるだけですね。
opencv2eel.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import time
import base64
import eel
import cv2 as cv
def main():
cap = cv.VideoCapture(0)
# Eelフォルダ設定、および起動 ###############################################
eel.init('web')
eel.start(
'index.html',
mode='chrome',
cmdline_args=['--start-fullscreen'],
block=False)
while True:
start_time = time.time()
eel.sleep(0.01)
# カメラキャプチャ #####################################################
ret, frame = cap.read()
if not ret:
continue
# UI側へ転送(画像) #####################################################
_, imencode_image = cv.imencode('.jpg', frame)
base64_image = base64.b64encode(imencode_image)
eel.set_base64image("data:image/jpg;base64," + base64_image.decode("ascii"))
key = cv.waitKey(1)
if key == 27: # ESC
break
# UI側へ転送(処理時間) #################################################
elapsed_time = round((time.time() - start_time), 3)
eel.set_elapsedtime(elapsed_time)
if __name__ == '__main__':
main()
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/eel.js"></script>
<script>
eel.expose(set_elapsedtime);
function set_elapsedtime(elapsedtime) {
document.getElementById("elapsedtime").innerHTML = "elapsedtime:" + elapsedtime + "s";
}
eel.expose(set_base64image);
function set_base64image(base64image) {
document.getElementById("python_video").src = base64image;
}
</script>
</head>
<body>
<div id="elapsedtime">elapsedtime</div>
<img id="python_video" width="640" height="480" src="./image/sample.png">
</body>
</html>
参考
[Python] EelをつかってHTML/CSS/JavaScriptでGUIを構築
以上。