如何用Python将图片集推流至WebRTC实现网页视频播放？

核心思路 #

WebRTC需要信令服务器完成端到端协商（SDP交换、ICE候选收集），FFmpeg本身支持推流到WebRTC接收端，可通过两种方案实现：直接对接客户端，或借助媒体服务器中转。

方案一：FFmpeg直接推流到WebRTC客户端（无媒体服务器） #

1. 搭建简易信令服务（Python示例） #

用WebSocket转发SDP和ICE信息：

import asyncio
import websockets

connected_clients = set()

async def handle_client(websocket):
    connected_clients.add(websocket)
    try:
        async for message in websocket:
            for client in connected_clients:
                if client != websocket:
                    await client.send(message)
    finally:
        connected_clients.remove(websocket)

start_server = websockets.serve(handle_client, "0.0.0.0", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

2. 网页接收端实现 #

通过信令获取FFmpeg的SDP，建立WebRTC连接：

<!DOCTYPE html>
<html>
<body>
    <video id="remoteVideo" autoplay playsinline></video>
    <script>
        const ws = new WebSocket('ws://localhost:8765');
        const pc = new RTCPeerConnection({
            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
        });
        const video = document.getElementById('remoteVideo');

        pc.ontrack = (e) => {
            video.srcObject = e.streams[0];
        };

        ws.onmessage = async (event) => {
            const data = JSON.parse(event.data);
            if (data.type === 'offer') {
                await pc.setRemoteDescription(new RTCSessionDescription(data));
                const answer = await pc.createAnswer();
                await pc.setLocalDescription(answer);
                ws.send(JSON.stringify(answer));
            } else if (data.type === 'ice') {
                await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
            }
        };

        pc.onicecandidate = (e) => {
            if (e.candidate) {
                ws.send(JSON.stringify({ type: 'ice', candidate: e.candidate }));
            }
        };
    </script>
</body>
</html>

3. FFmpeg推流命令 #

先生成Offer并通过信令发送给网页，获取Answer后执行推流：

# 生成Offer SDP文件
ffmpeg -f lavfi -i anullsrc -f rawvideo -r 10 -pix_fmt yuv420p -s 640x480 -i /path/to/your/image_%04d.jpg \
    -c:v libx264 -c:a opus -f webrtc -sdp_file offer.sdp ice_server="stun:stun.l.google.com:19302"

# 用获取到的answer.sdp推流
ffmpeg -f lavfi -i anullsrc -f rawvideo -r 10 -pix_fmt yuv420p -s 640x480 -i /path/to/your/image_%04d.jpg \
    -c:v libx264 -c:a opus -f webrtc -i answer.sdp ice_server="stun:stun.l.google.com:19302"

说明：/path/to/your/image_%04d.jpg为连续命名的图片序列，-r 10是帧率，可按需调整。

方案二：借助媒体服务器（生产环境推荐） #

以SRS为例，先推RTMP到服务器，再转WebRTC分发：

1. 配置并启动SRS #

修改SRS配置文件，开启RTMP转WebRTC：

listen              1935;
rtc_server {
    enabled on;
    listen 8000;
    candidate 你的服务器公网IP/域名;
}
vhost __defaultVhost__ {
    rtc {
        enabled on;
        rtmp_to_rtc on;
    }
}

2. FFmpeg推RTMP到SRS #

ffmpeg -f rawvideo -r 10 -pix_fmt yuv420p -s 640x480 -i /path/to/your/image_%04d.jpg \
    -c:v libx264 -f flv rtmp://你的服务器IP/live/stream

3. 网页播放WebRTC流 #

直接通过SRS的WebRTC播放地址webrtc://你的服务器IP/live/stream播放，无需自行处理复杂信令。

关键注意事项 #

• ICE服务器：NAT环境下必须配置STUN/TURN，公共STUN可使用stun:stun.l.google.com:19302，生产环境建议自建TURN。
• 编码要求：WebRTC要求视频用H.264（Baseline/Main profile），音频用Opus，推流时需指定对应编码器。
• 图片序列：确保图片命名连续（如image_0001.jpg到image_0100.jpg），FFmpeg才能正确读取。

内容的提问来源于stack exchange，提问作者BruceXu