Flask/Python如何使用来自多个IP摄像头的实时视频填充HTML页面？

Question

我有一套摄像头，每个摄像头的URL都是RTSP格式的。我创建了一个小脚本来解析camera_config JSON文件中的摄像头URL，但现在我不知道如何将视频嵌入HTML页面上的网格布局中。我写的剧本：

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文件：

{
  "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页面（不完整）

{% 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是用于实时摄像机镜头的页面。我如何修改它以读取每个URL并将其作为网格输出到HTML页面？实际上，我必须在HTML文件中硬编码每个摄像头，但我希望它在调用HTML文件时自动生成。其目的是简单地用额外的摄像头更新cam_配置，并让其动态更新

感谢任何能帮忙的人。烧瓶对我来说是新的

Answer 1

您可以将cam数据直接传递到render_template中，并使用jinja for循环输出camStreams中每个对象的容器（或任何您想要的），例如：

你的看法：

@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)

在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 %}