StrmWsApi 类

使用 WebSocket API 与服务端交互的入口类，主要给 StrmWsApi 对象提供 WebSocket API 端点 URL。

属性

属性名	数据类型	说明
loggedIn	boolean	是否已经登录
username	string?	登录时使用的用户名
loginResult	GnssLoginResult?	登录返回的结果。登录成功后被设置

基本用法

StrmWsApi 所有与服务端进行交互的方法都是异步方法，返回一个Promise。如果应答的结构是ApiReply<T>，会检查错误码，如果发生错误，则抛出异常（除了 releaseStrmReq() 方法及其系列变形）。

构造 StrmWsApi 对象，添加事件处理回调函数，并登录：

import {StrmWsApiConfig, StrmWsApi} from "strm-js";

  // 连接配置
const config = new StrmWsApiConfig();
config.wsApiUrl = wsUrl.value; // wsApiUrl 是必要参数

// 创建 StrmWsApi 对象
strmWsApi = new StrmWsApi(config);

// 添加 媒体状态变更通知 监听器
strmWsApi.addStrmNotifListener(onStrmNotif);

// 登录
infoLog(`尝试登录到: ${config.wsApiUrl}`);
strmWsApi.login(username, password)
    .then(
        // login API 登录成功后，返回 GnssLoginResult 对象
        (_: GnssLoginResult) => {
            console.debug('登录成功');
        }
    )
    .catch((err) => {
        console.error('登录时遇到错误：' + err.toString());
        alert(err.toString());
    });

简单的媒体状态变更通知，可以只处理 StrmNotif.ACT__strmReady 通知。当收到此通知时，开始创建播放器并播放：

import {StrmNotif} from "strm-js";

/**
 * 收到 流媒体状态通知 时的处理
 * @param {StrmNotif} strmNotif 通知
 */
function onStrmNotif(strmNotif: StrmNotif) {
    switch (strmNotif.act) {
        case StrmNotif.ACT__strmReady:
            // 收到 `流已经准备好` 的通知，检查是否我们关注的终端号和通道号
            if (strmNotif.simNo === simNo.value && strmNotif.chan === channel.value) {
                console.debug(`流已经准备好：${strmNotif.simNo}/${strmNotif.chan}`);

                // 如果播放器尚未创建，则创建播放器并播放
                if (!player) {
                    createPlayerAndLoad(strmNotif);
                }
            }
            break;

        case StrmNotif.ACT__cmdSent:
            console.debug(`指令已经下发到：${strmNotif.simNo}/${strmNotif.chan}`);
            break;

        case StrmNotif.ACT__cmdFailed:
            console.debug(`指令失败：${strmNotif.simNo}/${strmNotif.chan}`);
            break;
    }
}

调用API，如打开实时音视频播放：

import {GnssOpenLiveParams, GnssOpenStrmResult} from "strm-js";

  // 准备参数
const params = new GnssOpenLiveParams();
params.simNo = simNo.value;                       // 终端识别号
params.channel = channel.value;                   // 通道号
params.dataType = selectedDataType.value;         // 数据类型
params.codeStream = selectedCodeStrm.value;       // 码流代码
params.async = true;                              // 采用异步方式
params.proto = StrmConsts.PROTO__FLV;             // 使用 FLV 格式

// 调用打开实时音视频接口
console.debug('尝试打开实时音视频：strm/liveOpen');
strmWsApi.liveOpen(params)
    .then(
        // liveOpen 接口成功后，返回结果
        (reply: ApiReply<GnssOpenStrmResult>) => {
            openStrmResult = reply.data![0];

            // 得到请求ID(reqId)后，保存起来，后续关闭通道时要用到
            reqId = openStrmResult.reqId;

            console.debug(`流已经创建，请求ID=${reqId}`);

            // 此时还不一定能直接播放，要检查返回结果的 `ready` 属性。
            // 如果`ready` == true（流已经准备好），且播放器尚未创建，则创建播放器并播放
            if (openStrmResult.ready && !player) {
                console.debug(`流已经准备好：${params.simNo}/${params.channel}`)
                createPlayerAndLoad(openStrmResult); // 创建播放器并播放
            }
        }
    )
    .catch((err: any) => {
        const msg = `打开实时音视频播放时遇到错误：${err.toString()}`;
        console.error(msg);        
    });

关闭媒体流：

/**
 * 销毁播放器并释放流请求
 */
function stop() {
    // 关闭、销毁播放器
    if (player) {
        player.stop();
        player = null;
    }

    // 释放流请求
    if (strmWsApi && strmWsApi.loggedIn && reqId) {
        strmWsApi.releaseStrmReq(reqId);
        reqId = undefined;
    }

    console.debug('媒体流已经关闭');
}

播放器的用法

库中包含一个抽象的播放器封装，可支持FLV，HLS两种格式。使用时，首先要定义一个回调处理对象，这个回调处理对象继承 PlayerContainer 接口，提供几个相关的回调方法，供播放器封装在相应的情况下调用。

/**
 * 播放器回调接口
 */
const playerContainer = new PlayerContainer(
                // id() 方法，播放器的ID，如一个页面内有多个时，用此ID区分。主要用于调试。
                () => 'test',

                // isOpenRequested() 回调方法，返回是否正在请求打开流媒体或已经打开流媒体，以下用本地缓存的openStrmResult对象是否为空来作为返回结果
                () => !!openStrmResult,

                // onPlayerError() 回调方法，当 PlayerWrapper 发生错误时，此方法被 PlayerWrapper 调用。实现类通常在此方法中在UI上提示用户。
                (err: string) => {
                   console.error(`播放时遇到错误：${err.toString()}`);
                },

                // onPlaying() 回调方法，当开始播放时，此方法被 PlayerWrapper 调用。
                () => {
                   console.debug('开始播放');
                },

                // onClose() 回调方法，当播放正常或异常结束时，此方法 PlayerWrapper 调用。实现类通常在此方法中做一些清理工作。
                () => {
                    console.debug('播放器已经关闭');
                }
        );

然后创建播放器对象可以直接根据需要，new某一个播放器封装类（FlvPlayerWrapper, HlsJsPlayerWrapper, HlsNativePlayer），

import {FlvPlayerWrapper, StrmConsts} from 'strm-js';

const player = new FlvPlayerWrapper(
    playerContainer,
    videoElmt,
    StrmConsts.PROTO__FLV,
    openStrmResult.playUrl);

也可以使用 PlayerWrapper.create() 方法来创建：

import {PlayerWrapper, StrmConsts} from 'strm-js';
import {FlvPlayerWrapper} from "./player";

const player = PlayerWrapper.createPlayer(
    playerContainer,
    videoElmt,
    StrmConsts.PROTO__FLV,
    mediaNotif.mediaTyp!,
    openStrmResult.playUrl);   

加载流媒体时，只需要调用load()方法即可：

player.load();