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平台通道IDstreamtype码流类型,0=主码流,1=子码流starttime开始时间,格式yyyyMMddHHmmssendtime结束时间,格式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>
文档中心