如何在reactjs中使用for循環發送數據以獲取flask中的請求

Question

我已經在燒瓶渲染 index.html 中實現了多個網絡攝像頭流。 我想使用反應框架做同樣的事情，但不知道如何去做。 我嘗試在 App.js 中使用如下所示的 for 循環，但它似乎不起作用，我無法找到正確的方法。

這是 index.html：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Multiple Live Streaming</title>
</head>
<body>
<div class="container">
    <div class="row">

        <div class="col-lg-7">
            <h3 class="mt-5">Multiple Live Streaming</h3>
            {%for i in range(0,2)%}
                <img src="{{ url_for('stream', id=i) }}" width="50%">
            {%endfor%}
        </div>


    </div>
</div>
</body>
</html>

這是燒瓶中的 app.py：

from flask import Flask, Response
import cv2
import threading
app = Flask(__name__)

lock = threading.Lock()

@app.route('/stream/<string:id>',methods = ['GET'])
def stream(id):
      return Response(generate(id), mimetype = "multipart/x-mixed-replace; boundary=frame")
   

def find_camera(id):
    cameras = [0, 1]
    return cameras[int(id)]

def generate(camera_id):

   global lock
   cam = find_camera(camera_id)
   vc = cv2.VideoCapture(cam)
   
   if vc.isOpened():
      rval, frame = vc.read()
   else:
      rval = False

   
   while rval:
      # wait until the lock is acquired
      with lock:
        
         rval, frame = vc.read()
         
         if frame is None:
            continue

         (flag, encodedImage) = cv2.imencode(".jpg", frame)

         # ensure the frame was successfully encoded
         if not flag:
            continue

      
      yield(b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + bytearray(encodedImage) + b'\r\n')
   
   vc.release()

if __name__ == '__main__':
   host = "127.0.0.1"
   port = 8000
   debug = False
   options = None
   app.run(host, port, debug, options)

這是 app.js，我想在 index.html 中實現相同的實現：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {%for i in range(0,2)%}
          <img src={'/stream/{i}'} className="App-logo" alt="logo" />

      </header>
    </div>
  );
}

export default App;

任何幫助，將不勝感激。

Answer 1

你可以試試這個

import React from 'react';
import './App.css';

function App() {

  const imageArray = []
  for( let i= 0;i < numberOfSream ;i ++ ) imageArray.push( <img src={'/stream/{id}'} className="App-logo" alt="logo" /> )

  return (
    <div className="App">
      <header className="App-header">
        
          {  imageArray }

      </header>
    </div>
  );
}

export default App;

如何在reactjs中使用for循環發送數據以獲取flask中的請求

問題描述

1 個解決方案

解決方案1
0 2020-09-20 17:48:30

如何在reactjs中使用for循環發送數據以獲取flask中的請求

問題描述

1 個解決方案

解決方案1 0 2020-09-20 17:48:30

解決方案1
0 2020-09-20 17:48:30