远程回放示例 (异步 HTTP API)

本示例演示 终端远程录像回放：先 查询终端录像列表，再 异步打开回放 并用 FLV/HLS 播放。API 模式与 example-2-live 相同（HTTP + STOMP + 异步），但接口为 GET /strm/stored 与 POST /strm/replay/open。

项目	说明
示例页面	replay-example-2
示例代码	replay-example-2.zip
API 基址	https://wx.gratour.info:7011/v1
依赖库	axios、mpegts.js、hls.js、stomp-websocket
测试终端	模拟终端 8888000001

相关文档：编程基本流程 · 远程回放 · 打开远程录像回放

适合场景

• 播放 终端 SD 卡 / 硬盘 上已存储的历史录像（流式回放）
• 需要 FLV 或 HLS 两种客户端协议切换
• 与实时播放类似，采用 异步 + WebSocket 通知

录像 文件下载 到服务端见 终端录像上传和下载，与本示例不同。

与实时播放的差异

	实时（example-2）	远程回放（本示例）
打开接口	POST /strm/live/open	POST /strm/replay/open
前置步骤	无	GET /strm/stored 查询录像
终端指令	9101	9201
共享打开	实时支持多人观看	不支持，同通道 -21
回放控制	live/ctrl	replay/ctrl（暂停、快进、拖动）

整体流程

1. 终端上线
2. POST /login
3. STOMP 订阅 /user/{token}/queue/strm
4. GET /strm/stored              → 列出终端录像（时间范围、通道）
5. 用户选择一条录像
6. POST /strm/replay/open        → async=true，返回 reqId、playUrl
7. 等待 act=ready（或 ready=true）→ 创建播放器
8. 每 15 秒 POST /strm/keep_alive
9. 可选：POST /strm/replay/ctrl  → 暂停、快进、拖动
10. 停止：销毁播放器 → POST /strm/close

登录、WebSocket 连接与重连详见 example-2-live · 步骤 1–2，此处从查询录像开始。

步骤详解

步骤 1：查询终端远程录像

GET https://wx.gratour.info:7011/v1/strm/stored?simNo=8888000001&startTime=...&endTime=...&channel=1&mediaType=0&codeStream=1&storageType=0
X-Auth-Token: ...

axios.get(apiUrlPrefix() + 'strm/stored', {
    params: {
        simNo, startTime, endTime, channel,
        mediaType: 0, codeStream: 1, storageType: 0
    },
    headers: { 'X-Auth-Token': token }
}).then(resp => {
    const list = apiCheck(resp).data;
    // 渲染表格，用户点击「播放」
});

API：GET /strm/stored

返回每条录像含 startTime、endTime、channel、mediaType、codeStream、storageType 等，打开回放时原样传入。

步骤 2：打开远程回放（异步）

POST https://wx.gratour.info:7011/v1/strm/replay/open
Content-Type: application/json
X-Auth-Token: ...

{
  "simNo": "8888000001",
  "channel": 1,
  "mediaType": 0,
  "codeStream": 1,
  "storageType": 1,
  "mode": 0,
  "factor": 0,
  "startTime": "2020-03-01 11:08:47",
  "endTime": "2020-03-01 11:16:18",
  "proto": 0,
  "async": true
}

参数	说明
startTime / endTime	来自查询结果，格式 yyyy-MM-dd HH:mm:ss
mode	0 正常回放；快进时配合 factor
proto	0 FLV，1 HLS
async	建议 true

axios.post(apiUrlPrefix() + 'strm/replay/open', {
    simNo: item.simNo,
    channel: item.channel,
    mediaType: item.mediaType,
    codeStream: item.codeStream,
    storageType: item.storageType,
    mode: 0,
    factor: 0,
    startTime: item.startTime,
    endTime: item.endTime,
    proto: clientProto,
    async: true
}, { headers: { 'X-Auth-Token': token } })
.then(resp => {
    const data = apiCheck(resp).data[0];
    reqId = data.reqId;
    keepAliveTimer = setInterval(apiKeepAlive, 15000);
    if (data.ready) createPlayerAndLoad(data.playUrl, data.mediaTyp, clientProto);
});

步骤 3：等待 ready 并播放

StrmNotif 处理与 example-2-live 相同：act=ready 时调用 createPlayerAndLoad。

本示例封装了 PlayerWrapper，按 proto 选择 FLV 或 HLS 实现：

function createPlayerAndLoad(url, mediaTyp, proto) {
    switch (proto) {
        case 0:  // FLV
            player = new FlvPlayerWrapper(playerContainer, videoElement, mediaTyp, url);
            break;
        case 1:  // HLS
            player = hlsNativeSupport
                ? new HlsNativePlayer(...)
                : new HlsJsPlayerWrapper(...);
            break;
    }
    player.load();
}

详见示例 player.js。

步骤 4：回放控制（可选）

播放过程中可调用 POST /strm/replay/ctrl：

ctrl	作用
暂停 / 恢复	控制播放状态
快进	配合 factor（1/2/4/8 倍）
拖动	指定时间点

步骤 5：保活与停止

• 保活：POST /strm/keep_alive，{ reqIds: [reqId] }
• 停止：清除定时器 → 销毁播放器 → POST /strm/close

也可用 POST /strm/replay/ctrl（ctrl: 2）关闭回放请求。

与实时回放的区别提醒

• 远程回放 同一通道 不能 多会话同时打开；已有回放时再次 open 返回 -21
• 关闭的是 回放 reqId，不等于删除终端上的录像文件

检查清单

• 先 stored 查询，open 参数与选中行一致
• 登录后已订阅 STOMP，再 open
• async: true 且处理 ready / failed / closed
• 保活与 close 与实时示例一致

常见错误

现象	处理
查询为空	调整时间范围、通道；确认终端有录像
-21	同通道已有回放，先关闭
打开成功不播放	未处理 act=ready
回放 ctrl 无效	确认 reqId 有效且通道未被占用

下一步

目标	文档
实时异步 FLV	example-2-live
录像上传到服务端	av-upload
生命周期	strm-req-lifecycle