Flask Streaming mp4 视频在 Windows 上完美运行，但在手机上不行，无法弄清楚

Question

我正在尝试创建小型烧瓶应用程序，它可以从我的监控摄像头传输 mp4。 我使用这个 mp4 链接 (https://www.w3schools.com/html/movie.mp4) 进行测试，因为它完美运行并在每个平台上播放。 由于某种原因，当我在我的应用程序中重新传输它时，它在 Window (Chrome) 中完美运行，但在 iPhone (Chrome 和 Safari) 中不起作用，在 Android (Chrome) 中不起作用

这是我的 Flask 后端：

# Dictionary containing camera names and corresponding MP4 stream URLs
camera_mp4_streams = {
    "Camera 1": "https://www.w3schools.com/html/movie.mp4",
}
@app.route('/video_feed/<camera>')
@login_required
def video_feed(camera):
    mp4_stream_url = camera_mp4_streams.get(camera)
    if mp4_stream_url:
        headers = {
            'Accept-Ranges': 'bytes'  # Enable byte-range requests
        }
        response = requests.get(mp4_stream_url, headers=headers, stream=True)
        return Response(
            response.iter_content(chunk_size=4096),
            mimetype='video/mp4',
            headers={
                'Content-Type': 'video/mp4',  # Specify video MIME type
                'Accept-Ranges': 'bytes'  # Confirm byte-range requests
            }
        )
    else:
        return "Camera not found", 404

这是我的 HTML 相关代码：

<div class="container">
    <!-- Flask loop for cameras -->
    {% for camera, mp4_stream_url in cameras.items() %}
    <div class="camera-card">
        <div class="camera-title">{{ camera }}</div>
        <video class="camera-stream" autoplay muted controls>
            <source src="{{ url_for('video_feed', camera=camera) }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    </div>
    {% endfor %}
</div>

我很确定我的烧瓶后端有问题，但我不知道问题出在哪里

有什么帮助吗？

谢谢！

Answer 1

在我看来，某些浏览器需要

Content-Length

标头的规范。

@app.route('/video_feed/<camera>')
def video_feed(camera):
    mp4_stream_url = camera_mp4_streams.get(camera)
    if mp4_stream_url:
        headers = {
            'Accept-Ranges': 'bytes'  # Enable byte-range requests
        }
        response = requests.get(mp4_stream_url, headers=headers, stream=True)
        return Response(
            response.iter_content(chunk_size=4096), 
            mimetype='video/mp4',
            headers={
                'Content-Type': 'video/mp4',  # Specify video MIME type
                'Content-Length': response.headers['Content-length'], # <- !!!
                'Accept-Ranges': 'bytes'  # Confirm byte-range requests
            }
        )
    abort(404, 'Camera not found')