python flask を用いてWeb上でアップロードした動画を表示する方法

前提・実現したいこと

pythonのみでWebにして動画をアップロードしてもらいその動画を加工してかえす（表示も）サイトを作りたいです。

発生している問題・エラーメッセージ

まず加工せずにそのまま受けとった動画を表示したいのですが動画が表示されないのと何があっているかすらわかりません


### 該当のソースコード
from flask import Flask, render_template, request
import flask


# HTTPサーバーを起動
app = flask.Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'GET':
        return render_template('index.html')
    if request.method == 'POST':

        return render_template('index.html')


@app.route('/send', methods=['POST'])
def video_view():
    video_file = request.files['img_file']

    return render_template('index.html',video1=video_file)


def main():
    # app.debug = True
    app.run(host='localhost', port=8080)


if __name__ == '__main__':
    main()

```python
index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>自動モザイクアプリ</h1> <h2>動画をアップロードしてね</h2> <form method="post" action="/send" enctype="multipart/form-data"> <input type="file" accept="video/*" name="img_file" id="img_file"> <input type="submit" value="送信"> </form> <p></p> <video src='{{ url_for(video1)}}', type="video/mp4", loop="loop"></video> </body> </html>

試したこと

補足情報（FW/ツールのバージョンなど）

動画以外のhtmlは表示されてます。

行動規範の内容に同意します

回答1件

何があっているかすらわかりません

ということなので、最初のエラーと指針だけ記載します。

最初のエラー

実行後、ブラウザで[locahost:5000]を表示した場合、エラーになっている部分は以下の部分です。

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'GET':
        return render_template('index.html')    # ← ここ
    if request.method == 'POST':

        return render_template('index.html')
        {

index.htmlには[video1]という変数が必要ですが、このrender_templateでは変数が指定されていないので表示するものが無くエラーになっています。

? index.htmlで使っているvideo要素にtype属性というのは無いようですが、参考にしたサイトあたりでは指定されているのですか？

指針

やりたいことはなんとなくわかるのですが、実装されていません。
以下の指針で作り直してください。

upload_file()で呼び出しているindex.htmlを変数無しに変更するか、video1が指定されていない状態でも処理できるように変更する。
video_view()で、POSTされたファイルを受け取り、保存する処理を追加する。(現状はファイルを受け取って何もしないでHTMLを表示しようとしているだけです。)
video_view()で保存されたファイルを表示する処理を追加する。(video1=video_fileで渡しているつもりかもしれませんが、渡せていないので、[2]で保存した後、保存先のパスをvideo1に渡して表示するようにしましょう)

上記が難しければ・・・

videoがある前提で、表示するコードを書いて、表示してみる。
ファイルをアップロードする処理を書いてみる。
アップロードされたファイルを保存する処理を書いてみる。
保存されたファイルのURLを取得してみる。
取得したURLをブラウザに反映してみる。

というような感じで実装すればやりたいことができるはずです。

2019/10/29 11:04追加

なんでcv2とかが出てきたのかわからないのですが、どこか参考にしているサイトがありますか？
サイトがあるならURLを提示いただけませんか？

1, 3がわからないとのことですが、その下の1-5も試すことができませんか？
これができなければお手上げなのですが・・・。
とりあえずhtmlとmp4あたりのvideoファイルを同じ場所に置いて、ブラウザで表示できるか試してみましょう。

投稿2019/10/28 07:12

編集2019/10/29 02:11

FiroProchainezo

総合スコア2421

kkk02

2019/10/28 13:55

回答ありがとうございます！１と３がどうすればいいかわかりません???? ２はvideo_view()の中に下記のようなものを書いたのですがあっているでしょうか。 @app.route('/send', methods=['POST']) def video_view(): video_file = request.files['img_file'] frame_rate = 24.0 size = (640, 480) fmt = cv2.VideoWriter_fourcc('m', 'p', '4', 'v') writer = cv2.VideoWriter('video_pro.mp4', fmt, frame_rate, size) ret, frame = video_file.read() writer.write(frame) writer.release() return render_template('index.html')

kkk02

2019/10/29 07:46

cv2に関してはこの後動画を編集するためimportしています。サイトは様々なサイトをサーフィンしていろいろ交えたため覚えていません???? とりあえず既存の動画を同じファイルにおいてパス指定しましたが表示もできませんでした。