如何使用jQuery在HTML网页中直播指定RTSP地址的CCTV摄像头视频？

嘿，我来帮你搞定这个RTSP摄像头在网页上直播的问题！首先得明确核心点：浏览器原生完全不支持RTSP协议，直接在HTML里放RTSP地址肯定播不了，所以咱们得先把RTSP流转换成浏览器能识别的格式，比如HLS（HTTP直播流）或者WebSocket流，再结合jQuery做前端控制。下面给你两个实用的方案，你可以根据服务器情况选择：

方案一：FFmpeg转HLS流 + Video.js + jQuery #

这个方案成熟稳定，HLS是目前浏览器支持最广泛的直播格式，大部分现代浏览器都能直接解析。

步骤1：用FFmpeg把RTSP转成HLS流 #

首先在你的服务器上安装FFmpeg，然后运行下面的命令，把RTSP流转成HLS的播放列表和分片文件：

ffmpeg -i rtsp://admin:11111@103.75.35.102/streaming/channels/1 \
-c:v libx264 -c:a aac \
-f hls -hls_time 2 -hls_list_size 5 -hls_flags delete_segments \
./hls/stream.m3u8

参数说明：

• -i：指定输入的RTSP摄像头地址
• -c:v libx264/-c:a aac：把视频转成H.264编码、音频转成AAC编码，这是HLS的标准编码格式
• -hls_time 2：每个分片文件时长设为2秒
• -hls_list_size 5：播放列表只保留最近5个分片，避免文件堆积
• -hls_flags delete_segments：自动删除旧的分片文件

把生成的hls目录放到你的Web服务器（比如Nginx、Apache）根目录下，这样前端就能通过HTTP访问到/hls/stream.m3u8了。

步骤2：前端用Video.js+jQuery实现播放控制 #

Video.js是成熟的HTML5视频播放器，对HLS支持很好，我们用jQuery来绑定控制按钮的交互事件：

先在HTML里引入本地的Video.js资源和jQuery（建议下载到本地，避免外链依赖）：

<link href="video-js.css" rel="stylesheet">
<script src="video.min.js"></script>
<script src="jquery.min.js"></script>

然后写页面结构和jQuery代码：

<div id="live-player-container">
  <video id="cctv-live" class="video-js vjs-default-skin" controls preload="auto" width="800" height="450">
    <source src="/hls/stream.m3u8" type="application/x-mpegURL">
  </video>
  <div class="control-buttons">
    <button id="play-btn">开始直播</button>
    <button id="pause-btn">暂停直播</button>
  </div>
</div>

<script>
$(document).ready(function() {
  // 初始化Video.js播放器
  const livePlayer = videojs('cctv-live');

  // 绑定播放按钮事件
  $('#play-btn').on('click', function() {
    livePlayer.play();
    $(this).prop('disabled', true);
    $('#pause-btn').prop('disabled', false);
  });

  // 绑定暂停按钮事件
  $('#pause-btn').on('click', function() {
    livePlayer.pause();
    $(this).prop('disabled', true);
    $('#play-btn').prop('disabled', false);
  });

  // 监听播放状态
  livePlayer.on('play', function() {
    console.log('CCTV直播已开始');
  });

  livePlayer.on('error', function(err) {
    console.error('直播出错：', err);
    alert('直播连接失败，请检查RTSP地址和转码服务状态');
  });
});
</script>

方案二：WebSocket代理转RTSP + JSMpeg + jQuery #

如果你需要更低延迟（HLS一般有3-10秒延迟，WebSocket可做到1秒以内），可以用WebSocket把RTSP流转成浏览器能接收的流，再用JSMpeg播放器播放。

步骤1：部署WebSocket-RTSP代理服务器 #

用现成的Node.js工具websocket-rtsp-proxy，先安装依赖：

npm install websocket-rtsp-proxy -g

然后启动代理，指定你的RTSP地址和WebSocket端口：

ws-rtsp-proxy --rtsp rtsp://admin:11111@103.75.35.102/streaming/channels/1 --port 8080

步骤2：前端用JSMpeg+jQuery实现播放 #

JSMpeg是轻量的视频播放器，支持通过WebSocket接收视频流。先引入本地的JSMpeg和jQuery：

<script src="jquery.min.js"></script>
<script src="jsmpeg.min.js"></script>

然后写页面和jQuery代码：

<div id="ws-player-container">
  <canvas id="cctv-ws-canvas" width="800" height="450"></canvas>
  <button id="stop-btn">停止直播</button>
</div>

<script>
$(document).ready(function() {
  // 初始化JSMpeg播放器，连接WebSocket
  const canvas = document.getElementById('cctv-ws-canvas');
  const wsPlayer = new JSMpeg.Player('ws://localhost:8080', {
    canvas: canvas,
    autoplay: true,
    audio: false, // 摄像头无音频可关闭
    videoBufferSize: 256 * 1024 // 调整缓冲区平衡延迟和流畅度
  });

  // jQuery绑定停止按钮事件
  $('#stop-btn').on('click', function() {
    wsPlayer.stop();
    $(this).text('已停止');
  });

  // 监听卡顿状态
  wsPlayer.on('stalled', function() {
    console.warn('直播流卡顿，正在尝试重连');
  });
});
</script>

关键注意事项 #

• 跨域问题：如果前端页面和流媒体服务器（HLS/WebSocket）不在同一域名，需要在服务器上配置CORS允许跨域请求。
• 服务器性能：RTSP转码需要CPU资源，多摄像头同时转码建议用性能较好的服务器，或开启FFmpeg硬件加速。
• 网络连通性：确保转码服务器能访问到RTSP摄像头，检查防火墙、554端口（RTSP默认端口）是否开放。
• 权限验证：确认RTSP地址里的用户名和密码正确，部分摄像头需要手动开启RTSP访问权限。

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