<!-- 以下のようにタグでスライドを定義します -->
<!-- Pythonと関係ないので詳しくはググってください -->
<article id="webslides">
    <!-- Slide 01 -->
    <section>
        <h1>Slide 01</h1>
    </section>
    <!-- Slide 02 -->
    <section>
        <h1>Slide 02</h1>
    </section>
    <!-- Slide 03 -->
    <section>
        <h1>Slide 03</h1>
    </section>
</article">
                        

import cv2 as cv

cap = cv.VideoCapture(0)

while True:
    # カメラキャプチャ
    ret, frame = cap.read()
                        

import eel

# EeLフォルダ設定、および起動
eel.init('webslides')
eel.start(
    'index.html',
    mode='chrome',
    cmdline_args=['--start-fullscreen'],
    block=False)
                        

py：
# UI側へ渡す
_, imencode_image = cv.imencode('.jpg', draw_image)
base64_image = base64.b64encode(imencode_image)

eel.set_base64image("data:image/jpg;base64," + base64_image.decode("ascii"))
                        

html：
<!-- eel.expose()にてPython側からJavaScript関数を呼べるようにする -->
eel.expose(set_base64image);
function set_base64image(base64image) {
    document.getElementById("python_video").src = base64image;
}
                        

import eel
import cv2 as cv
import base64

cap = cv.VideoCapture(0)

# EeLフォルダ設定、および起動
eel.init('webslides')
eel.start('index.html', mode='chrome', block=False)

while True:
    eel.sleep(0.01)

    # カメラキャプチャ
    ret, frame = cap.read()
    if not ret:
        continue

    # UI側へ渡す
    _, imencode_image = cv.imencode('.jpg', draw_image)
    base64_image = base64.b64encode(imencode_image)
    
    eel.set_base64image("data:image/jpg;base64," + base64_image.decode("ascii"))