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

Question

我有一组摄像机，每个摄像机都有 URL 的 RTSP 格式。我创建了一个小脚本来从 camera_config JSON 文件中解析相机 URL，但现在我不确定如何将视频嵌入到 [=28= 上的网格布局中] 页。我写的脚本：

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_config 并让它动态更新。

感谢任何能提供帮助的人。 Flask 对我来说是个新手。

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

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

Flask/Python - How can I populate an HTML page with live footage from multiple IP cameras?

html

python

json

rtsp

flask