Skip to content
目录

SDK播放库 ​

播放库暂时使用第三方的EasyPlayer库,后续替换为自研版本。EasyPlayer库在 nodenvr3/wwwroot/easyplayer 目录中,请将该目录拷贝到自己的web服务器根目录中,然后通过 <script> 标签导入到html页面中。以下是EasyPlayer的类型声明文件,仅供参考。

typescript
/**
 * EasyPlayerPro 构造函数配置项
 */
interface EasyPlayerProOptions {
    /** 播放器挂载容器(必需),支持 HTMLElement 或 CSS 选择器字符串 */
    container: HTMLElement | string;

    /** 是否为直播模式,默认 true */
    isLive?: boolean;

    /** 缓存时长(秒),默认 0.2 */
    bufferTime?: number;

    /** 是否包含音频流,默认 true */
    hasAudio?: boolean;

    /** 是否包含视频流,默认 true */
    hasVideo?: boolean;

    /**
     * 自适应模式:true=缩放(保持宽高比适应容器),false=拉伸(填满容器)
     * 默认 false(拉伸)
     */
    isResize?: boolean;

    /**
     * 解码 Worker JS 文件路径
     * 例:"easyplayer/decoder-pro-simd.js"
     */
    decoder?: string;

    /**
     * 音频解码 Worker JS 文件路径
     * 例:"easyplayer/decoder-pro-audio.js"
     */
    decoderAudio?: string;

    /**
     * 硬解码 Worker JS 文件路径
     * 例:"easyplayer/decoder-pro-hard.js"
     */
    decoderHard?: string;

    /**
     * SIMD 解码 Worker JS 文件路径
     */
    decoderSimd?: string;

    /**
     * SIMD 多线程解码 Worker JS 文件路径
     */
    decoderSimdMt?: string;

    /** 控制栏总开关,默认 false。为 true 时渲染完整控制栏 UI */
    hasControl?: boolean;

    /**
     * 控制栏按钮配置
     * 注意:属性名是 operateBtns(不是 btns)
     */
    operateBtns?: OperateBtns;

    /** 显示码率信息,默认 false */
    showBandwidth?: boolean;

    /** 显示性能监控面板,默认 false */
    showPerformance?: boolean;

    /** 控制栏自动隐藏,默认 false */
    controlAutoHide?: boolean;

    /** 控制栏自动隐藏延迟时间(秒),默认 5 */
    controlAutoHideDelayTime?: number;

    /** 控制栏尺寸,默认 'normal' */
    controlSize?: 'small' | 'normal' | 'large';

    /** 背景图片 URL */
    background?: string;

    /** 海报图片 URL */
    poster?: string;

    /** 旋转角度,0/90/180/270 */
    rotate?: 0 | 90 | 180 | 270;

    /** 调试模式,默认 false */
    debug?: boolean;

    /** 调试级别 */
    debugLevel?: 'info' | 'warn' | 'error';

    /** 超时时间(秒),默认 10 */
    timeout?: number;

    /** 加载超时时间(秒),默认 10 */
    loadingTimeout?: number;

    /** 心跳超时时间(秒),默认 10 */
    heartTimeout?: number;

    /** 视频缓冲时间(毫秒),默认 1000 */
    videoBuffer?: number;

    /** 音频缓冲时间(毫秒),默认 1000 */
    audioBuffer?: number;

    /** 网络延迟时间(毫秒),默认 10000 */
    networkDelay?: number;

    /** 是否静音,默认 true */
    muted?: boolean;

    /** 播放音量 0~1 */
    volume?: number;

    /** 播放速率,默认 1 */
    playbackRate?: number;

    /** 是否显示加载图标,默认 true */
    loadingIcon?: boolean;

    /** 加载提示文字 */
    loadingText?: string;

    /** 宽高比 */
    aspectRatio?: string;

    /** 媒体源类型 */
    playType?: 'webcast' | 'vod' | 'live';

    /** 使用 MSE 解码 */
    useMSE?: boolean;

    /** 使用 WCS(WebCodecs)解码 */
    useWCS?: boolean;

    /** 使用 WASM 解码 */
    useWASM?: boolean;

    /** 使用 SIMD 解码 */
    useSIMD?: boolean;

    /** 使用多线程解码 */
    useMThreading?: boolean;

    /** WebGPU 渲染 */
    useWebGPU?: boolean;

    /** 屏幕常亮,默认 true */
    keepScreenOn?: boolean;

    /** 加载失败后是否自动重试,默认 true */
    loadingTimeoutReplay?: boolean;

    /** 最大重试次数,默认 3 */
    loadingTimeoutReplayTimes?: number;

    /** 流错误后是否自动重播,默认 true */
    streamErrorReplay?: boolean;
    streamEndReplay?: boolean;
    websocket1006ErrorReplay?: boolean;
    networkDisconnectReplay?: boolean;

    /** 是否支持双击全屏,默认 false */
    supportDblclickFullscreen?: boolean;
}

/**
 * 控制栏按钮配置
 */
interface OperateBtns {
    /** 全屏按钮 */
    fullscreen?: boolean;
    /** 截图按钮 */
    screenshot?: boolean;
    /** 播放/暂停按钮 */
    play?: boolean;
    /** 静音按钮 */
    audio?: boolean;
    /** 录制按钮 */
    record?: boolean;
    /** PTZ 云台按钮 */
    ptz?: boolean;
    /** 画质切换按钮 */
    quality?: boolean;
    /** 缩放按钮 */
    zoom?: boolean;
    /** 关闭按钮 */
    close?: boolean;
    /** 拉伸/缩放按钮 */
    scale?: boolean;
    /** 性能监控按钮 */
    performance?: boolean;
    /** 日志保存按钮 */
    logSave?: boolean;
    /** 人脸检测按钮 */
    aiFace?: boolean;
    /** 物品检测按钮 */
    aiObject?: boolean;
    /** 区域遮挡检测按钮 */
    aiOcclusion?: boolean;
}

/**
 * 播放事件回调
 */
type EventCallback = (...args: unknown[]) => void;

/**
 * EasyPlayerPro 播放器类
 */
declare class EasyPlayerPro {
    constructor(options?: EasyPlayerProOptions);

    /**
     * 开始播放
     * @param url 直播流地址(ws:// 或 http:// 格式的 .flv 地址)
     */
    play(url: string): void;

    /** 销毁播放器,释放资源 */
    destroy(): void;
    /**
     * 播放事件监听
     * @param event 事件名
     * @param callback 回调函数
     */
    on(event: string, callback: EventCallback): void;

    /**
     * 移除事件监听
     * @param event 事件名
     * @param callback 回调函数
     */
    off(event: string, callback?: EventCallback): void;
}

使用步骤 ​

1、创建 EasyPlayerPro 播放器对象;

2、调用 play 方法播放一个 flv 地址;

3、调用 destroy 方法销毁播放器对象;

NodeNVR3通道流地址格式 ​

实时预览地址 ws//:{ip}:{port}/live/{channel_id}.flv?streamtype={streamtype}

录像回放地址 ws//:{ip}:{port}/vod/{channel_id}.flv?starttime={starttime}&endtime={endtime}

  • ip 流媒体IP地址

  • port 流媒体端口号

  • channel_id 平台通道ID

  • streamtype 码流类型,0=主码流,1=子码流

  • starttime 开始时间,格式yyyyMMddHHmmss

  • endtime 结束时间,格式yyyyMMddHHmmss

示例 ​

html
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <title>EasyPlayer.js示例</title>
    <script src="easyplayer/easyplayer-pro.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        #container {
            width: 100%;
            height: 100%;
            background: #000;
        }
    </style>
</head>

<body oncontextmenu="return false;">
    <div id="container"></div>
    <script>
        var outerContainer = document.getElementById("container");
        var innerContainer = document.createElement('div');
        innerContainer.style.cssText = 'width: 100%; height: 100%;';
        outerContainer.appendChild(innerContainer);//这里使用两层容器嵌套,避免多次创建播放器对象时报错
        var player = new EasyPlayerPro({
            container: innerContainer,                 // 播放器挂载容器(必需)
            isLive: true,               // 直播模式(默认 true)
            bufferTime: 0.2,            // 缓存时长(秒)
            hasAudio: true,             // 是否包含音频流
            isResize: true,            // 自适应,true=缩放,false=拉伸    
            decoder: "easyplayer/decoder-pro-simd.js",
            decoderAudio: "easyplayer/decoder-pro-audio.js",
            decoderHard: "easyplayer/decoder-pro-hard.js",

            // ===== 控制栏总开关(关键参数)=====
            // hasControl 默认为 false:此时构造函数走"裸 <video>"分支,
            // 仅创建一个无 controls 的 video 元素,不渲染 EasyPlayerPro 自定义控制栏 UI。
            // 必须显式设为 true,才会构建完整的播放器控制栏(含按钮、进度条、音量等)。
            hasControl: true,

            // ===== 控制栏按钮配置 =====
            // 注意:属性名必须是 operateBtns(不是 btns),否则配置被忽略,所有按钮默认 false 不显示。
            // 合法键:fullscreen/screenshot/play/audio/record/ptz/quality/zoom/close/scale/performance/logSave/aiFace/aiObject/aiOcclusion
            operateBtns: {
                audio: true,            // 静音/取消静音按钮
                record: true,           // 录制按钮
                scale: true,            // 拉伸/缩放按钮(原 stretch 应为 scale)
                screenshot: true,       // 截图按钮
                fullscreen: true,       // 全屏按钮
            },

            // ===== 带宽显示开关 =====
            // 注意:属性名必须是 showBandwidth(不是 isBand),否则被忽略。
            // 开启后在画面右上角显示当前码率信息。
            showBandwidth: true,

            // ===== 控制栏自动隐藏 =====
            // controlAutoHide: true 时,鼠标静止 controlAutoHideDelayTime 秒后自动隐藏控制栏。
            // 这里保持默认 false,始终显示控制栏便于调试。
            // controlAutoHide: false,
            // controlAutoHideDelayTime: 5,

            loadingTimeoutReplay: true,
            loadingTimeoutReplayTimes: 10,
            streamErrorReplay: true,
            streamEndReplay: true,
            websocket1006ErrorReplay: true,
        });
        player.on('videoInfo', data => console.log('videoInfo:', data));
        player.on('audioInfo', data => console.log('audioInfo:', data));
        player.on('kBps', data => console.log('kBps:', data));
        player.play('ws://192.168.0.2:9527/live/44011401001320000001.flv?streamtype=0');
        //销毁播放器并移除内层容器
        //player.destroy();
        //innerContainer.remove();
    </script>
</body>

</html>

技术支持:13352865103(柯工,微信同号)