Q&A
index.htmlでカメラのライブ映像を表示させて、 capture ボタンが押されたら、 image.htmlに移動して
2つのボタン(retake photo または、 use photo) をクリックしたいです。
しかし、image.html で2つのボタンが表示されません。
アドバイスをいただけないでしょうか?
#urls.py
python
1from django.contrib.staticfiles.urls import staticfiles_urlpatterns 2from django.conf.urls.static import static 3from django.urls import path 4 5from . import views 6 7urlpatterns = [ 8 path('', views.IndexView.as_view()), 9 path('video_feed', views.video_feed_view(), name="video_feed"), 10 path('image_feed',views.image_feed_view(), name='image_feed'), 11] 12urlpatterns += staticfiles_urlpatterns() 13
#index.html
html
1{% block content %} 2<p class="border" style="padding:10px;">Take a photo 3 <a class="btn btn-outline-info" href="/image_feed" role="button">CAPTURE</a> 4</p> 5 6<div> 7 <div id="image_area"> 8 <img src="/video_feed" width="810" height="540"/> 9 </div> 10</div> 11 12{% endblock %}
#image.html
html
1{% block content %} 2 3<p class="border" style="padding:10px;">Use this photo 4 <a class="btn btn-outline-info" href="/send" role="button">Select</a> 5</p> 6 7<p class="border" style="padding:10px;">Take an another photo 8 <a class="btn btn-outline-info" href="/video_feed" role="button">Take an another photo</a> 9</p> 10 11<div> 12 <div id="image_area"> 13 <img src="/image_feed" width="810" height="540"/> 14 </div> 15</div> 16 17{% endblock %} 18
#views.py
python
1import cv2 2from django.http import StreamingHttpResponse 3from django.shortcuts import render 4from django.views import View 5 6 7# ストリーミング画像・映像を表示するview 8class IndexView(View): 9 def get(self, request): 10 return render(request, 'index.html', {}) 11 12# ストリーミング画像を定期的に返却するview 13def video_feed_view(): 14 return lambda _: StreamingHttpResponse(generate_frame(), content_type='multipart/x-mixed-replace; boundary=frame') 15 16# # フレーム生成・返却する処理 17def generate_frame(): 18 capture = cv2.VideoCapture(0) # USBカメラから 19 20 while True: 21 if not capture.isOpened(): 22 print("Capture is not opened.") 23 break 24 # カメラからフレーム画像を取得 25 ret, frame = capture.read() 26 if not ret: 27 print("Failed to read frame.") 28 break 29 # フレーム画像バイナリに変換 30 ret, jpeg = cv2.imencode('.jpg', frame) 31 byte_frame = jpeg.tobytes() 32 # フレーム画像のバイナリデータをユーザーに送付する 33 yield (b'--frame\r\n' 34 b'Content-Type: image/jpeg\r\n\r\n' + byte_frame + b'\r\n\r\n') 35 capture.release() 36 37 38#一枚の切り取られた画像を画面に表示させて、ユーザーに この画像を使うか取り直すかの選択をさせる。 39def image_feed_view(): 40 return lambda _: StreamingHttpResponse(generate_one_frame(), content_type='multipart/x-mixed-replace; boundary=frame') 41 42#by myself with japanese link 43def generate_one_frame(): 44 45 capture = cv2.VideoCapture(0) 46 count=0 47 while True: 48 count=count+1 49 if count>=10: 50 break 51 if not capture.isOpened(): 52 print("Capture is not opened.") 53 break 54 # カメラからフレーム画像を取得 55 ret, frame = capture.read() 56 if not ret: 57 print("Failed to read frame.") 58 break 59 # フレーム画像バイナリに変換 60 ret, jpeg = cv2.imencode('.jpg', frame) 61 byte_frame = jpeg.tobytes() 62 # フレーム画像のバイナリデータをユーザーに送付する 63 yield (b'--frame\r\n' 64 b'Content-Type: image/jpeg\r\n\r\n' + byte_frame + b'\r\n\r\n') 65 capture.release() 66
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。