Python opencvで起動したwebカメラをhtmlに表示する方法

Question

Python opencvで起動したwebカメラをhtmlに表示する方法を探しておりますが上手くいっておりません。
どのような流れなのか何が必要なのか見当もついておりませんおりません。ご享受お願いいたします。
将来的にはweb上でカメラのフォーカスを変えたり、露出を変えたり、写真の撮影映像の撮影をしたいと考えております。
まずはその一歩でweb上でカメラの表示をしたいと考えております。よろしくお願いいたします。
環境
razuberi-pai4
nginx
fcgiwrap
pythom3.8
webcamera

＜webカメラ起動コード　python3.8＞
import cv2
def camerafront():
cap = cv2.VideoCapture(0) # 任意のカメラ番号に変更する

    while True:
        ret, frame = cap.read()
        cv2.imshow("camera", frame)

＜html＞
<div id="cameras">
<div class="camera_1">
<p><img id="camera1" src="ここにwebカメラ映像を表示したいです" height="600px" wight="570px"></p>
</div>
</div>

Answer 1

どのような流れなのか何が必要なのか

カメラはサーバー側にあり、それをクライアント側からカメラを制御する。カメラ映像はクライアント側に表示すると言うことですよね。

クライアント側は、ストリーミングで再生するか、WebSocketを使ってゴリゴリ書くかでしょうか。

https://richka.co/times/19616/

サーバー側はそれに合わせて、送り出す必要があるので、ストリーミングで再生したければ、ストリーミング送信するように実装するとか

参考
https://dev.classmethod.jp/articles/http-live-streaming/

ストリーミング配信用のソフトウェアを利用するのが簡単かと思います。
実装自体はGitHubにも転がっていたりすると思うので、ご興味があれば検索してみると良いかと。

クライアント側はストリーミング再生するのであれば、videoタグだけで良いですが、カメラ制御用のコマンドなどはJavaScriptで実装する必要があります。
WebSocketは全て自分で記述するイメージなので、自由度は高いです。

Comments

[nikinikiniki-ta]

ありがとうございます！