网页播放 4 路 RTSP 摄像头（零配置、一键运行）

最精简、最稳定、纯免费的实现，只需要 2 步：

下载一个小工具（转 RTSP 为网页可播放流）
用我给的 HTML 页面直接播放 4 路画面

核心原理

网页不能直接播放 RTSP ，必须用MediaMTX（免费开源、绿色免安装、1MB 大小）把 RTSP 转成 WebSocket 流，网页就能无插件播放。

第一步：下载 RTSP 转流工具（必装）

下载 MediaMTX （Windows/Linux/mac 都支持）👉 下载地址：https://github.com/bluenviron/mediamtx/releases/download/v1.8.5/mediamtx_v1.8.5_windows_amd64.zip

使用方法

解压压缩包，直接双击运行 mediamtx.exe
保持窗口打开不要关（后台转流用）
这个工具会自动把 RTSP 流转成网页可播放的 WS 流

第二步：4 路 RTSP 摄像头网页（完整可直接用）

新建一个文本文件，复制下面代码，保存为 camera.html，双击打开就能用

html

预览

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>4路RTSP摄像头监控</title>
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        body {background: #000;padding: 5px;}
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            width: 100vw;
            height: 98vh;
        }
        .video-box {
            position: relative;
            border: 2px solid #222;
            background: #000;
        }
        .video-box canvas {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .title {
            position: absolute;
            top: 5px;left: 5px;
            color: #fff;background: rgba(0,0,0,0.7);
            padding: 3px 8px;font-size: 14px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="video-box"><div class="title">通道1</div><canvas id="v1"></canvas></div>
        <div class="video-box"><div class="title">通道2</div><canvas id="v2"></canvas></div>
        <div class="video-box"><div class="title">通道3</div><canvas id="v3"></canvas></div>
        <div class="video-box"><div class="title">通道4</div><canvas id="v4"></canvas></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jsmpeg@1.0.0/dist/jsmpeg.min.js"></script>
    <script>
        // ===================== 只需要修改这里的4个RTSP地址 =====================
        const rtspList = [
            "rtsp://admin:123456@192.168.1.100:554/stream1",
            "rtsp://admin:123456@192.168.1.101:554/stream1",
            "rtsp://admin:123456@192.168.1.102:554/stream1",
            "rtsp://admin:123456@192.168.1.103:554/stream1"
        ];

        // 自动播放4路视频
        window.onload = () => {
            rtspList.forEach((rtsp, index) => {
                new JSMpeg.Player(`ws://127.0.0.1:8889/${index}`, {
                    canvas: document.getElementById(`v${index+1}`),
                    autoplay: true,
                    loop: true
                });
            });
        };
    </script>
</body>
</html>

第三步：修改你的摄像头 RTSP 地址

把代码里的 rtspList 换成你真实的 RTSP 地址，格式：

plaintext

复制代码

rtsp://账号:密码@摄像头IP:554/流地址

常见摄像头 RTSP 格式（直接复制改 IP 即可）

海康：rtsp://admin:密码@192.168.1.100:554/Streaming/Channels/101
大华：rtsp://admin:密码@192.168.1.100:554/cam/realmonitor?channel=1&subtype=0
通用：rtsp://admin:密码@192.168.1.100:554/stream1

最终效果

✅ 4 路摄像头同时播放✅ 2x2 网格铺满屏幕✅ 低延迟、无插件、纯网页✅ 电脑 / 手机都能打开✅ 黑色监控界面、简洁专业

总结

运行 mediamtx.exe（保持开启）
打开 camera.html
修改 RTSP 地址 → 直接播放

全程5 分钟搞定，不需要安装任何环境、不用写后端！