1. web直接播放摄像头的难点

现代浏览器（Chrome, Edge, Firefox, Safari）已彻底淘汰 NPAPI/ActiveX 插件。而相机的输出主要是RTSP或SDK，原生不支持页面播放，需要安装厂商插件，基于插件开发视频应用，通用性差，要完美解决视频Web无插件访问，需要使用流媒体进行转码，通过支持h5的Web播放器实现访问。

实现摄像头到web页面上无插件播放，我们先选择一款流媒体中转服务软件，负责转码和直播流的发布，可以选择MediaMTX、SRS、ZLMediaKit、RTMS等流媒体服务器，流媒体服务器的安装和部署这里详细叙述，由于RTMS部署和访问比较很简单，所以我选择RTMS流媒体服务器，下载地址：xxx/file，下载后进行安装，安装后通过浏览器可进入流媒体管理页面进行配置，管理页面默认用户名"admin"，密码"admin"，在页面的系统管理处登记摄像头，然后就可以进行访问了。

2. web直接播放摄像头的方法

当前web播放主要使用浏览器内置的mse或webrtc等技术进行播放；MSE（Media Source Extensions）是HTML5的一个强大API，它允许JavaScript动态构建媒体流，通过MSE，我们可以将视频内容分割成小片段，根据网络状况动态调整视频质量，实现自适应比特率流媒体，让直播视频几乎实时播放，MSE需要实现流的传输，然后将流输入MSE播放；而webrtc则包含了视频传输和播放，但进行SDP信令的交互；
目前多摄像头或监控设备的视频访问主流使用MSE实现视频的web无插件访问，大多数流媒体使用http或websocket输出flv流,web端则使用flv播放器播放视频，比较知名的flv播放器有flv.js,video.js等，rtms在支持flv流的输出，同时支持http和websocket取流，同时还输出了rtm流，rtm流传输效率更高更安全，但rtm流需要使用rtms-player进行播放，rtms-player播放器主文件hancplayer.js，实测播放效率远高与flv.js与video.js

下面以代码为例介绍flv.js与hancplayer.js的用法

flv.js播放flv流的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RTMS FLV 直播播放器</title>
    <style>
        video { width: 100%; max-width: 800px; background: #000; }
        body { font-family: sans-serif; padding: 20px; }
    </style>
</head>
<body>
    <h2>📺 HTTP-FLV 播放 (仅支持 H.264)</h2>
    <video id="videoElement" controls muted playsinline></video>
    <div id="status" style="margin-top:10px; color:#666;">初始化中...</div>

    <!-- 引入 flv.js -->
    <script src="./flv.min.js"></script>
    <script>
        const video = document.getElementById('videoElement');
        const status = document.getElementById('status');
        
        // 🔴 关键：构建 RTMS HTTP-FLV 协议地址
        const flvUrl = 'http://192.168.0.14:5555/play.flv?cmd=live&ip=192.168.0.228&port=80&user=admin&pass=admin12345&ftype=0&stream=0'; 

        if (flvjs.isSupported()) {
            const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: flvUrl,
                isLive: true,
                hasAudio: true,
                hasVideo: true
            }, {
                enableWorker: true,
                enableStashBuffer: false, // 关闭缓冲以降低延迟
                stashInitialSize: 128
            });

            flvPlayer.attachMediaElement(video);
            flvPlayer.load();

            flvPlayer.play()
                .then(() => status.textContent = '✅ 播放中... (延迟约 1-2s)')
                .catch(err => {
                    status.textContent = '❌ 自动播放失败，请点击播放按钮。';
                    console.error(err);
                });

            flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
                status.textContent = `❌ 错误: ${errType}`;
                console.error('播放错误:', errType, errDetail);
            });

        } else {
            status.textContent = '❌ 当前浏览器不支持 flv.js (MSE)。';
        }
    </script>
</body>
</html>

hancplayer.js播放rtm流的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RTMS HancPlayer 无插件演示</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
        .container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        canvas { border: 1px solid #ddd; background: #000; width: 100%; max-width: 800px; }
        .controls { margin-top: 15px; }
        button { padding: 10px 20px; cursor: pointer; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; }
        button.stop { background: #ff4d4f; }
        button:hover { opacity: 0.9; }
    </style>
</head>
<body>

<div class="container">
    <h2>🎥 H.265/H.264 Web 无插件播放 (WASM)</h2>
    <div>
        <canvas id="canvas" width="800" height="450"></canvas>
    </div>
    <div class="controls">
        <button id="btn-live">▶ 开始播放</button>
        <button id="btn-stop" class="stop">⏹ 停止播放</button>
    </div>
    <p style="color: #666; font-size: 12px; margin-top: 10px;">
        💡 提示：需确保 hancplayer.js 和 hancmedia.wasm 文件可通过 HTTP 访问。
    </p>
</div>

<!-- 引入播放器核心 JS (请根据实际路径修改) -->
<script src="./hancplayer.js"></script>

<script>
    let playerIndex = -1;
    const canvas = document.getElementById('canvas');

    // 启动播放
    document.getElementById('btn-live').addEventListener('click', function () {
        if (playerIndex !== -1) {
            alert('正在播放中，请先停止');
            return;
        }

        // 🔴 关键：构建 RTMS WS+PRO 协议地址
        // 格式: ws://<RTMS_IP>:5555/play.pro?ip=<相机IP>&port=<相机端口>&user=...&pass=...&ftype=...&chan=...&stream=...
        // ftype: 0=海康, 1=大华, 7=通用ONVIF (根据实际情况调整)
        const url = 'ws://192.168.0.14:5555/play.pro?ip=192.168.0.228&port=80&user=admin&pass=admin12345&ftype=7&chan=0&stream=1';
        
        console.log('正在连接:', url);
        
        // 调用 openplayer(url, 类型, canvas对象, 宽, 高)
        // 类型: 0=实时直播, 1=回放
        playerIndex = openplayer(url, 0, canvas, 800, 450);
        
        if (playerIndex === -1) {
            alert('播放启动失败，请检查控制台日志或 WASM 文件路径');
        } else {
            console.log('播放成功，ID:', playerIndex);
        }
    });

    // 停止播放
    document.getElementById('btn-stop').addEventListener('click', function () {
        if (playerIndex === -1) return;
        closeplayer(playerIndex);
        playerIndex = -1;
        console.log('播放已停止');
    });
</script>

</body>
</html>
  • 注意事项：
  • rtms-player基于 WebAssembly开发，所以rtms-player播放器需要部署在web后台且web服务器需要开放wasm组件访问权限（由于浏览器的安全限制，WebAssembly组件不能直接在本地文件上加载，这点和纯JS代码有本质区别），浏览器访问web服务器实现视频无插件播放。

3. 附件RTMS服务端部署 

3.1 下载与安装

最新安装包 RTMS.tgz。

通过网盘分享的文件：RTMS
链接: https://pan.baidu.com/s/15niRyrdlYOKNWU6nLkhn7w?pwd=hr6r 提取码: hr6r

# 1. 解压安装包
tar zxvf RTMS.tgz
cd RTMS

# 2. 赋予执行权限
chmod +x deploy_rtms.sh

# 3. 一键自动部署 (配置环境、Systemd 自启、网络优化)
sudo ./deploy_rtms.sh

3.2 设备接入配置

部署完成后，服务自动运行。

  1. 访问后台：浏览器打开 http://<服务器IP>
    • 默认账号：admin / 密码：admin
  2. 添加设备：
    • 点击“添加设备”，输入摄像头的 IP、端口、用户名、密码。
    • 系统会自动测试连接。
  3. 状态确认：确保设备状态显示为“在线”。

# 前端
Logo
AI硬件创业社区

智能硬件社区聚焦AI智能硬件技术生态，汇聚嵌入式AI、物联网硬件开发者，打造交流分享平台，同步全国赛事资讯、开展 OPC 核心人才招募，助力技术落地与开发者成长。

更多推荐

ST7302 显示模块调试与验证记录

本文档记录 ST7302 显示模块从 ATmega2560 平台迁移到 ESP32-S3 平台后的调试过程、硬件连接、软件配置、显示坐标映射、初始化参数以及最终验证程序。本次调试的主要目标不是完成完整 UI，而是首先确认以下底层链路能够稳定工作：最终测试结果：本次测试使用：4D Systems gen4-ESP32 S3 N16R8（arduino板子名字）主控为 ESP32-S3。同时使用过：Y

avatar AI硬件创业社区
cover

STM32F429的硬件I2C驱动程序

avatar AI硬件创业社区
cover

AI赋能天机学堂

avatar AI硬件创业社区