目次
2. フラスコを使用してウェブページを開き、ビデオを送信します
2.1 Raspberry Pi ターミナルのデスクトップで、新しい flask フォルダーを作成します。
2.2 flask フォルダーに新しいテンプレート フォルダーと app.py ファイルを作成します
2.3 テンプレートフォルダーに新しいindex.htmlファイルを作成します。
2.4 フラスコを使用してコードを実行し、監視ビデオをアップロードする
3. ajax フォームを使用してキーストロークをシミュレートし、フラスコからラズベリーパイにデータを転送します。
1.フラスコライブラリをインストールする
sudo install apt-get flask2. フラスコを使用してウェブページを開き、ビデオを送信します
2.1 Raspberry Pi ターミナルのデスクトップで、新しい flask フォルダーを作成します。
mkdir flask2.2 flask フォルダーに新しいテンプレート フォルダーと app.py ファイルを作成します
mkdir template
touch app.py
2.3 テンプレートフォルダーに新しいindex.htmlファイルを作成します。
touch index.html 
作成後、コマンド ls を入力して現在のフォルダーの内容を表示し、cd + フォルダー名を入力して次のフォルダーに移動できます。
2.4 フラスコを使用してコードを実行し、監視ビデオをアップロードする
2 つのファイルを編集する必要があります。1 つは、index.html で、もう 1 つは、app.py です。
最初のindex.htmlは単にWebページを記述するだけで、コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>HHH</title>
</head>
<body>
<div class="header" id="demo">
<div class="title"><h2>CTRL</h2></div>
<form action="/video" method="post" enctype="multipart/form-data">
<img src="{
{videourl}}">
<br>
</form>
</div>
</body>
</html>flask に付属のビデオ ストリーミング Motion JPEG であるビデオ エンコーディングを取得する簡単な操作です。
2 番目は app.py ファイルです
コードは以下のように表示されます:
# coding: utf-8
from flask import Flask,render_template,Response,request,url_for
import cv2
import numpy as np
import time
import os
app = Flask(__name__)
@app.route('/video', methods=['GET', 'POST'])
def videoshow():
return render_template('index.html',videourl=url_for('video_feed'))
@app.route('/video_feed',methods=['GET', 'POST'])
def video_feed():
return Response(gen(),mimetype='multipart/x-mixed-replace; boundary=frame')
def gen():
cap = cv2.VideoCapture(0)
cap.set(3,600)
cap.set(4,480)
cap.set(5,40)
while True:
ret, img = cap.read()
ret, jpeg = cv2.imencode('.jpg',img) # 对图像进行编码输出 jpeg
yield(b'--frame\r\n'+b'Content-Type: image/jpeg\r\n\r\n' + jpeg.tobytes() + b'\r\n\r\n')
if __name__ == '__main__':
app.run(host='192.168.137.99', port=5008, debug=True)簡単に説明すると、
@app.route('A',methods=['B']) このフォームはルーティングであり、Web ページのアドレスから Web ページにジャンプしたり、Web ページのアドレスからジャンプしたりする、フラスコと Raspberry Pi 間の対話型ツールと考えることができます。 Webページ 機能へジャンプするデータです。
A は Web ページ アドレスのサフィックス、B は GET または POST リクエストです。Web ページがビデオを取得すると GET リクエストとなり、フォームが押されると POST リクエストになります (Raspberry Pi は Web ページ ボタンを受け取ります)データ）
(1) ラズベリーパイターミナルフラスコフォルダーに python3 app.py と入力してコードを実行します
python3 app.py図に示すように、Web ページのアドレスを取得するために戻ります: http://192.168.137.100:5008/
(2) Webページを開き、http://192.168.137.100:5008/videoと入力します。
ビデオは前の A、つまりルートの名前です
(3) 入力後、監視中のWebページをリアルタイムに取得できます。
これだけでビデオ監視機能が完了します。
コードを実行するプロセスについて簡単に説明します
app.run は現在の IP アドレスとポートを実行します → 最初のルートのビデオを実行し、Web ページのindex.html を返します → videourl を実行し、ビデオをエンコードして送信するための関数 gen() を返します。
3. ajax フォームを使用してキーストロークをシミュレートし、フラスコからラズベリーパイにデータを転送します。
ajax はどのような問題を解決するために使用されますか?
フォームが押されると、現在のページのビデオが消えるか、エンコード エラーにより監視ビデオが正常に再生できなくなります。または、現在のページが繰り返し更新されてカメラが再度開かれ、次のようなエラーが報告されます。カメラはすでに占有されています。Ajax は、カメラ監視ビデオを更新せずに、フォーム ページのみを更新できます。
以下は私のフルバージョンのindex.htmlとapp.pyコードです。
パソコンに保存するのを忘れてしまいました。研究室にいないので、今度作ります。