Flask/Python - 如何使用来自多个 IP 摄像机的实时画面填充 HTML 页面？

Question

I have a set of cameras and the URL's for each in RTSP format. I have created a small script to parse the camera URL from the camera_config JSON file, but now I am not sure how to embed the videos into a grid layout on an HTML page. The script I wrote:

import json
from flask import flask


data = request.get_json()
file = open('cam_config.json',)
data = json.load(file)
for i in data['camStreams']:
    i = data['camUrl']

    

@app.route("/livecams")
def livecams():
    return render_template("live_cams.html", camUrl = i)

JSON File:

{
  "camDataDir":"/e/camData",
  "playback": {
    "playbackSpeed":"16.0"
  },
  "camStreams": [
    {
      "camName":"driveway",
      "camUrl":"rtsp://admin:gf2UYmfH2kZDyEU@192.168.1.107:554/Streaming/Channels/3",
      "camUrl4k":"rtsp://admin:gf2UYmfH2kZDyEU@192.168.1.107:554/Streaming/Channels/1",
      "camUrl720p":"rtsp://admin:gf2UYmfH2kZDyEU@192.168.1.107:554/Streaming/Channels/3",
      "camUrlMjpeg":"http://admin:gf2UYmfH2kZDyEU@192.168.1.107/ISAPI/Streaming/channels/102/httpPreview"
      }
    },
    {
      "camName": "backyard",
      "camUrl": "rtsp://admin:jA6CL3G7Nukj7ST@192.168.1.166/cam/realmonitor?channel=1&subtype=02",
      "camUrl4k": "rtsp://admin:jA6CL3G7Nukj7ST@192.168.1.166/cam/realmonitor?channel=1&subtype=01",
      "camUrl720p": "rtsp://admin:jA6CL3G7Nukj7ST@192.168.1.166/cam/realmonitor?channel=1&subtype=02",
      "camUrlMjpeg": "http://admin:jA6CL3G7Nukj7ST@192.168.1.166/cgi-bin/mjpg/video.cgi?channel=0&subtype=1"
      }
    }
  ]
}

HTML page (incomplete)

{% extends "layout.html" %}

{% block content %}
  <h1>Live Cams</h1>
  <div class="grid"
  <div class="container mt-3 mb-3">
    <img src="{{ camUrl }}" alt="Cam 1" width="640" height="360">
  </div>


{% endblock content %}

{% block script %}

{% endblock script %}

live_cams.html is the page for the live cam footage. How would I go about modifying it to read each URL and output onto the HTML page as a grid?As it is, I would have to hard code each individual camera in the HTML file but I want it to autopopulate when the HTML file is called. The intention is to simply update the cam_config with additional cameras and let it update dynamically.

Appreciate anyone who can help. Flask is new to me.

Answer 1

You can pass the cam data directly into your render_template and use a jinja for loop to output a container (or whatever you wish) per object in your camStreams , eg:

Your view:

@app.route("/livecams")
def livecams():
    # Having this in the view means it will reload the config with each page refresh
    file = open('cam_config.json',)
    data = json.load(file)

    return render_template("live_cams.html", cameras=data)

In your html:

{% for camera in cameras %}
<div class="container mt-3 mb-3">
  <img src="{{ camera.camUrl }}" alt="{{camera.camName}}" width="640" height="360">
</div>
{% endfor %}