ฉันจะส่งผ่านตัวแปรจากขวด) o HTML โดยไม่มีเทมเพลตการเรนเดอร์ได้อย่างไร

ฉันยังใหม่กับการใช้ Flask และฉันเพิ่งพยายามส่งตัวแปรไปยังหน้าเว็บ ฉันรู้ว่าตัวแปร pass ในเมธอด render_template เป็นอย่างไร

แต่ตอนนี้ฉันกำลังลองใช้แอปสตรีมมิ่งแบบเรียลไทม์ โดยใช้วิธีการที่แตกต่างกัน เช่น .responses และ allowances

รหัสขวดสำหรับการสตรีมเว็บแคมมีดังต่อไปนี้

@app.route('/')
def index():
    return render_template('index.html')

def get_frame():
    video=cv2.VideoCapture(0) #this makes a web cam object

while True:
    ret, frame = video.read()
    imgencode=cv2.imencode('.jpg',im)[1]
    stringData=imgencode.tostring()
    yield (b'--frame\r\n'
        b'Content-Type: text/plain\r\n\r\n'+stringData+b'\r\n')

del(video)

@app.route('/calc')
def calc():
return Response(get_frame(),mimetype='multipart/x-mixed-replace; boundary=frame')


if __name__ == '__main__':
app.run(host='localhost', debug=True, threaded=True)

และเทมเพลตก็คือ

 <html>
 <head>
 <title>Video Streaming Demonstration</title>
 </head>
 <body>
 <h1>Video Streaming Demonstration</h1>
 <img src="{{ url_for('calc') }}">
 </body>
 </html>

ตอนนี้ฉันต้องการเพิ่มป้ายกำกับบนเทมเพลตของฉันเช่น <label>{{ value }}</label>>

ฉันได้คำนวณค่าตัวแปรจากขวดทดลองแล้วและสามารถพิมพ์บนคอนโซลได้ แต่ตอนนี้ฉันต้องส่งค่านั้นไปยังป้ายกำกับบนเทมเพลตเดียวกันกับที่กำลังสตรีมวิดีโอ กรุณาช่วย


person Shahansha C    schedule 17.02.2020    source แหล่งที่มา
comment
รอสักครู่แล้วคุณต้องการส่งตัวแปรหลังจากโหลดเพจแล้วหรือยัง?   -  person DontBe3Greedy    schedule 17.02.2020
comment
ใช่ ฉันต้องส่งตัวแปรหลังจากโหลดเพจแล้ว โดยพยายามสร้างการตรวจจับวัตถุแบบเรียลไทม์จากเว็บแคม ดังนั้นฉันต้องการพิมพ์คลาสอ็อบเจ็กต์บนป้ายกำกับพร้อมกับการสตรีมวิดีโอ   -  person Shahansha C    schedule 17.02.2020
comment
หลังจากโหลดเพจแล้ว คุณจะต้องใช้จาวาสคริปต์เพื่ออัปเดตเพจ จาวาสคริปต์จะสื่อสารกับเซิร์ฟเวอร์เป็นระยะเพื่ออัปเดตเพจ   -  person scotty3785    schedule 17.02.2020
comment
จากนั้นต้องใช้จาวาสคริปต์และอาแจ็กซ์ สร้างโพสต์ ajax ไปยังเส้นทาง จากนั้นส่งข้อมูลไปที่ javascript ajax จากนั้นใช้ javascript เพื่ออัปเดตค่า ฉันช่วยคุณได้ภายในสิบนาที กำลังกิน rn   -  person DontBe3Greedy    schedule 17.02.2020
comment
ขออภัยถ้าฉันถามคำถามโง่ ๆ หน้า html กำลังอัปเดตแหล่งที่มาของเฟรมรูปภาพสำหรับแสดงวิดีโออย่างต่อเนื่องใช่ไหม? โดยไม่มีสคริปต์ใด ๆ จะอัพเดตแหล่งที่มาของรูปภาพหรือไม่ แล้วเราจะใช้วิธีนั้นไม่ได้เหรอ?   -  person Shahansha C    schedule 17.02.2020
comment
คุณสามารถใช้สิ่งนี้เพื่อมันได้ w3schools.com/html/html5_video.asp   -  person DontBe3Greedy    schedule 17.02.2020
comment
ฉันไม่แน่ใจว่าไซต์อย่าง youtube ทำอย่างไร คุณสามารถตรวจสอบหน้าของพวกเขาเพื่อดูว่าเป็นของเรา   -  person DontBe3Greedy    schedule 17.02.2020
comment
ฉันต้องใช้เว็บแคมสำหรับการสตรีมวิดีโอแบบเรียลไทม์ :( โค้ดด้านบนใช้สำหรับวิดีโอ   -  person Shahansha C    schedule 17.02.2020
comment
ดูเหมือนว่าคุณกำลังพยายามทำสิ่งเดียวกัน ที่นี่ ดังนั้นอาจจะติดตามไปพร้อมกับเขา   -  person Nullman    schedule 17.02.2020
comment
ฉันสามารถสตรีมวิดีโอบนหน้าเว็บได้ ฉันทำตามลิงค์ด้านบนเพื่อสิ่งนั้น ด้านบนมีแหล่งรูปภาพเพียงแหล่งเดียวบนเว็บ ฉันต้องการเพิ่มป้ายกำกับ ฉันสามารถคำนวณค่าบนคอนโซลจากแอปขวดได้ แต่ฉันต้องการส่งค่านั้นไปยังแท็กป้ายกำกับบนหน้าเทมเพลต   -  person Shahansha C    schedule 17.02.2020
comment
เพิ่มป้ายกำกับให้กับวิดีโอใช่ไหม? หรือไปที่หน้าเว็บ? คุณวางลิงก์ของเพจได้ไหม และวงกลมฉลาก   -  person DontBe3Greedy    schedule 17.02.2020
comment
ไม่ ไม่ใช่กับวิดีโอ ไปยังหน้าเว็บที่กำลังแสดงสตรีมวิดีโอ {‹html› ‹head› ‹title›การสาธิตการสตรีมวิดีโอ‹/title›‹br› ‹/head›‹br› ‹body›‹br› ‹h1›การสาธิตการสตรีมวิดีโอ‹/h1› ‹img src={{ url_for ('calc') }}› ‹/body› ‹/html› } ที่นี่มีเพียงแหล่งรูปภาพบนเพจเท่านั้น ฉันต้องเพิ่มป้ายกำกับด้วยแท็ก ‹label› ของ html ของป้ายกำกับที่แสดงต้องเป็นค่าสตริงที่ ฉันผ่านจากโปรแกรมขวด (เหมือนกับการให้คุณค่ากับ img src ข้างต้น) ขออภัยสำหรับภาษาอังกฤษที่ไม่ดีของฉัน :(   -  person Shahansha C    schedule 17.02.2020
comment
ใช่แล้ว ใช้อาแจ็กซ์เลย flask.palletsprojects.com/en/1.1.x/รูปแบบ/jquery   -  person DontBe3Greedy    schedule 17.02.2020


คำตอบ (1)


FLASK APP.py

#This route accepts request against the url http://domain_name/change_label
#You could add the argument, method=["POST"],<br>So the route only accepts post request against that url.
@app.route("/change_label")
def change_label():
    #Return the text you want the label to be
    return "New Label"

JAVASCRIPT_FILE

function change_label(){
//Create xhttp object
var xhttp = new XMLHttpRequest();
//Listen for the response of your xhttp object
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //If the request is 200 aka succesfull, set the text of the label to the response text of the xhttp request
    document.getElementById("Id of the label").innerHTML =
    this.responseText;
  }
};
//Open a post request with the xhttp object. 
xhttp.open("POST", "http://domain/change_label", true);
// Send the post request
xhttp.send();
}

ไฟล์ HTML

 <html>
 <head>
 <title>Video Streaming Demonstration</title>
 <script src="link_to_javascript"></script>
 </head>
 <body>
 <h1>Video Streaming Demonstration</h1>
 <img src="{{ url_for('calc') }}">
 </body>
 </html>

ขออภัยถ้ามันเข้าใจยาก ฉันอธิบายได้แย่มาก สมองของฉันไม่ได้เชื่อมต่อตามปกติ

person DontBe3Greedy    schedule 17.02.2020
comment
ผลงานแรกที่ดี คำตอบของคุณสามารถปรับปรุงได้โดยการเพิ่มข้อความอธิบาย - person scotty3785; 17.02.2020
comment
@ DontBe3Greedy ฉันขอโทษที่ฉันมีความรู้ไม่เพียงพอเกี่ยวกับเรื่องนี้ ฉันยังมีปัญหาในการอธิบายคำถามของฉัน จริง ๆ แล้วฉันได้รับวิธีแก้ปัญหาเมื่อเราแสดงภาพเดียวบนเว็บด้วยความช่วยเหลือของโค้ด { return render_template(index3.html, user_imagesrc = full_filename ,user_labelsrc=userlabel)} แต่สิ่งนี้ใช้ไม่ได้เมื่อฉันสตรีมเว็บแคมบนหน้า html แทนที่จะแสดงภาพเดียวด้วยวิธีใดก็ตาม ขอบคุณสำหรับการสนับสนุนของคุณ ฉันจะพยายามทำความเข้าใจ - person Shahansha C; 17.02.2020
comment
อย่าส่งคืนเทมเพลต เพียงเพิ่มโค้ดจาวาสคริปต์แล้วเรียกเมื่อใดก็ตามที่คุณต้องการอัปเดตเพจ - person DontBe3Greedy; 17.02.2020
comment
@ DontBe3Greedy ฉันจะวางแท็กป้ายกำกับในไฟล์ html ที่ไหน - person Shahansha C; 17.02.2020
comment
ใช่แล้ว ใส่แท็กป้ายกำกับในตำแหน่งที่คุณต้องการในไฟล์ html ให้รหัสมัน - person DontBe3Greedy; 17.02.2020
comment
ป้ายกำกับไม่โหลด :( - person Shahansha C; 18.02.2020
comment
@ DontBe3Greedy สวัสดี ขอบคุณมาก มันโหลดเมื่อ POST ถูกเปลี่ยนเป็น GET ในไฟล์สคริปต์ แต่ฉันใช้ปุ่มสำหรับการเรียกใช้ฟังก์ชัน ฉันต้องเปลี่ยนค่าของป้ายกำกับแบบไดนามิกโดยไม่มีเหตุการณ์การคลิกใด ๆ ดังนั้นฉันจะเรียกใช้ฟังก์ชันที่ไหน มีกิจกรรมสำหรับป้ายกำกับเพื่อจุดประสงค์นี้หรือไม่? - person Shahansha C; 18.02.2020
comment
ตกลงในที่สุดก็เข้าใจแล้ว :) ฉันใช้ window.setInterval(change_label, 1000); สำหรับการเรียกใช้ฟังก์ชันอย่างต่อเนื่อง แต่เบราว์เซอร์ช้าลงในการสตรีม :( อาจเกิดจากการเข้าถึงเนื้อหาฟังก์ชันหลายอย่างจากขวด ขอบคุณมากสำหรับความช่วยเหลือของคุณ - person Shahansha C; 18.02.2020