跳到主要内容
版本：4.0

实时播放示例 (WebSocket API)

v4 新应用推荐。 本示例使用 Vue 3 + TypeScript + strm-js 的 StrmWsApi，在 单条 WebSocket 连接 上完成登录、打开实时流、接收通知与释放请求，无需 HTTP + STOMP 双连接。

项目说明
示例页面ws-example-1-live
示例代码ws-example-live-1.zip
WS 端点wss://wx.gratour.info:7211/ws2
依赖strm-js、Vue 3、TypeScript、Vite
测试终端模拟终端 8888000001 / 8888000002

相关文档：HTTP 与 WebSocket API 选型 · WebSocket API 概述 · StrmWsApi

适合场景​

  • 新开发 的 Web / 移动端应用（v4.0+）
  • 希望 一条连接 搞定 API + 通知
  • 需要 自动重连、心跳、保活（StrmWsApi 内置）
  • 使用 TypeScript，希望类型与常量由 strm-js 提供

维护 legacy HTTP+STOMP 客户端请参阅 example-2-live。

与 HTTP API 示例的差异​

HTTP（example-2）WebSocket API（本示例）
连接REST + STOMP 两条单 WebSocket
客户端库axios + stomp-websocketstrm-js
登录POST /loginStrmWsApi.login()
打开POST /strm/live/openStrmWsApi.liveOpen()
通知STOMP /queue/strmaddStrmNotifListener
保活手动 keep_alive库内自动处理
关闭POST /strm/closereleaseStrmReq()

整体流程​

live-sequence.png

1. 终端上线（演示站模拟终端即可）
2. new StrmWsApi(config) + addStrmNotifListener
3. StrmWsApi.login(user, password)
4. StrmWsApi.liveOpen(params)     → reqId, playUrl, ready
5. ready=false → 等 ACT__strmReady 通知
6. PlayerWrapper.load(playUrl)    → FLV 播放
7. releaseStrmReq(reqId) + 销毁播放器

准备工作​

终端指向 wx.gratour.info:7510，或在 演示站 使用模拟终端 8888000001。

term-online.png

安装依赖：

npm install -S strm-js

步骤详解​

步骤 1：创建 StrmWsApi 并登录​

const config = new StrmWsApiConfig();
config.wsApiUrl = 'wss://wx.gratour.info:7211/ws2';

strmWsApi = new StrmWsApi(config);
strmWsApi.addStrmNotifListener(onStrmNotif);

strmWsApi.login('admin', 'admin')
    .then((result: GnssLoginResult) => {
        loggedIn.value = true;
    });

顺序： 先 addStrmNotifListener，再 login，再 liveOpen，避免错过通知。

步骤 2：异步打开实时音视频​

const params = new GnssOpenLiveParams();
params.simNo = '8888000001';
params.channel = 1;
params.dataType = StrmConsts.DATA_TYPE__AV;   // 音视频
params.codeStream = StrmConsts.CODE_STRM__SUB;
params.async = true;
params.proto = StrmConsts.PROTO__FLV;

strmWsApi.liveOpen(params)
    .then((reply: ApiReply<GnssOpenStrmResult>) => {
        openStrmResult = reply.data![0];
        reqId.value = openStrmResult.reqId;

        if (openStrmResult.ready && !player) {
            createPlayerAndLoad(openStrmResult);
        }
    });
字段说明
async建议 true；多数情况 ready=false
protoPROTO__FLV 或 HLS 常量
readytrue 可立即播放；否则等通知

步骤 3：处理媒体状态通知​

function onStrmNotif(strmNotif: StrmNotif) {
    switch (strmNotif.act) {
        case StrmNotif.ACT__strmReady:
            if (strmNotif.simNo === simNo.value
                && strmNotif.chan === channel.value
                && !player) {
                createPlayerAndLoad(strmNotif);
            }
            break;
        case StrmNotif.ACT__cmdFailed:
            errLog('指令失败');
            break;
        case StrmNotif.ACT__strmClosed:
            stop();
            break;
    }
}

通知语义与 HTTP 版 StrmNotif 一致。

步骤 4：播放（PlayerWrapper）​

strm-js 提供 PlayerWrapper，封装 FLV/HLS 播放器：

function createPlayerAndLoad(n: GnssOpenStrmResult | StrmNotif) {
    player = PlayerWrapper.createPlayer(
        playerContainer,           // 实现 PlayerContainer 回调
        videoElmtRef.value!,
        StrmConsts.PROTO__FLV,
        n.mediaTyp!,
        n.playUrl!
    );
    player.load();
}

PlayerContainer 需提供 onPlayerError、onPlaying、onClose 等回调，见示例源码。

步骤 5：停止​

function stop() {
    player?.stop();
    player = null;

    if (strmWsApi && reqId.value) {
        strmWsApi.releaseStrmReq(reqId.value);
        reqId.value = undefined;
    }
}

StrmWsApi 会在连接存活期间 自动保活，一般无需手动调用 keep_alive。

检查清单​

  • wsApiUrl 指向 /ws2 端点（非 STOMP /ws）
  • 监听器在 liveOpen 之前注册
  • 按 simNo + channel 过滤通知，避免误播其它路
  • 停止时先停播放器再 releaseStrmReq

常见错误​

现象处理
打开成功不播放未处理 ACT__strmReady
连接频繁断开检查网络；StrmWsApi 会自动重连
混用 HTTP tokenWS API 独立登录，勿与 STOMP 混用

下一步​

目标文档
HTTP 异步对比example-2-live
API 选型http-vs-ws-api
StrmWsApi 方法列表StrmWsApi-basic
远程回放 WSws-replay-open