添加播放器
This commit is contained in:
孙小云
parent
d7436e0229
commit
8e064cb01a
|
|
@ -7,6 +7,12 @@
|
|||
<title>ThingsBoard WebSocket Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 视频播放器库 -->
|
||||
<script type="text/javascript" src="/static/js/jessibuca/jessibuca.js"></script>
|
||||
<script type="text/javascript" src="/static/js/ZLMRTCClient.js"></script>
|
||||
<script type="text/javascript" src="/static/js/h265web/h265webjs-v20221106.js"></script>
|
||||
<script type="text/javascript" src="/static/js/h265web/missile.js"></script>
|
||||
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
"name": "thingsboard-html-demo",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"flv.js": "^1.6.2",
|
||||
"hls.js": "^1.6.15",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0"
|
||||
|
|
@ -2978,6 +2980,12 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.21.5",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.21.5.tgz",
|
||||
|
|
@ -3458,6 +3466,16 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/flv.js": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
|
||||
"integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"es6-promise": "^4.2.8",
|
||||
"webworkify-webpack": "^2.1.5"
|
||||
}
|
||||
},
|
||||
"node_modules/foreground-child": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
|
||||
|
|
@ -3749,6 +3767,12 @@
|
|||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hls.js": {
|
||||
"version": "1.6.15",
|
||||
"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.6.15.tgz",
|
||||
"integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/html-encoding-sniffer": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
|
||||
|
|
@ -6009,6 +6033,12 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/webworkify-webpack": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
|
||||
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/whatwg-encoding": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"flv.js": "^1.6.2",
|
||||
"hls.js": "^1.6.15",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,97 @@
|
|||
export interface Web265JsExtraConfig {
|
||||
moovStartFlag?: boolean
|
||||
rawFps?: number
|
||||
autoCrop?: boolean
|
||||
core?: 0 | 1
|
||||
coreProbePart?: number
|
||||
ignoreAudio?: 0 | 1
|
||||
probeSize?: number
|
||||
}
|
||||
|
||||
export interface Web265JsConfig {
|
||||
/**
|
||||
*The type of the file to be played, do not fill in the automatic identification
|
||||
*/
|
||||
type?: 'mp4' | 'hls' | 'ts' | 'raw265' | 'flv'
|
||||
/**
|
||||
* playback window dom id value
|
||||
*/
|
||||
player: string
|
||||
/**
|
||||
* the video window width size
|
||||
*/
|
||||
width: number
|
||||
/**
|
||||
* the video window height size
|
||||
*/
|
||||
height: number
|
||||
/**
|
||||
* player token value
|
||||
*/
|
||||
token: string
|
||||
extInfo?: Web265JsExtraConfig
|
||||
}
|
||||
|
||||
export interface Web265JsMediaInfo {
|
||||
audioNone: boolean
|
||||
durationMs: number
|
||||
fps: number
|
||||
sampleRate: number
|
||||
size: {
|
||||
height: number
|
||||
width: number
|
||||
}
|
||||
videoCodec: 0 | 1
|
||||
isHEVC: boolean
|
||||
videoType: Web265JsConfig['type']
|
||||
}
|
||||
|
||||
interface New265WebJs {
|
||||
onSeekFinish(): void
|
||||
onRender(
|
||||
width: number,
|
||||
height: number,
|
||||
imageBufferY: typeof Uint8Array,
|
||||
imageBufferB: typeof Uint8Array,
|
||||
imageBufferR: typeof Uint8Array
|
||||
): void
|
||||
onLoadFinish(): void
|
||||
onPlayTime(videoPTS: number): void
|
||||
onPlayFinish(): void
|
||||
onCacheProcess(cPts: number): void
|
||||
onReadyShowDone(): void
|
||||
onLoadCache(): void
|
||||
onLoadCacheFinshed(): void
|
||||
onOpenFullScreen(): void
|
||||
onCloseFullScreen(): void
|
||||
do(): void
|
||||
pause(): void
|
||||
isPlaying(): boolean
|
||||
setRenderScreen(state: boolean): void
|
||||
seek(pts: number): void
|
||||
setVoice(volume: number): void
|
||||
mediaInfo(): Web265JsMediaInfo
|
||||
fullScreen(): void
|
||||
closeFullScreen(): void
|
||||
playNextFrame(): void
|
||||
snapshot(): void
|
||||
release(): void
|
||||
setPlaybackRate(rate: number): void
|
||||
getPlaybackRate(): number
|
||||
}
|
||||
|
||||
declare type new265webJsFn = (
|
||||
url: string,
|
||||
config: Web265JsConfig
|
||||
) => New265WebJs
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
new265webjs: new265webJsFn
|
||||
}
|
||||
}
|
||||
|
||||
export default class H265webjsModule {
|
||||
static createPlayer: (url: string, config: Web265JsConfig) => New265WebJs
|
||||
static clear(): void
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/*********************************************************
|
||||
* LICENSE: LICENSE-Free_CN.MD
|
||||
*
|
||||
* Author: Numberwolf - ChangYanlong
|
||||
* QQ: 531365872
|
||||
* QQ Group:925466059
|
||||
* Wechat: numberwolf11
|
||||
* Discord: numberwolf#8694
|
||||
* E-Mail: porschegt23@foxmail.com
|
||||
* Github: https://github.com/numberwolf/h265web.js
|
||||
*
|
||||
* 作者: 小老虎(Numberwolf)(常炎隆)
|
||||
* QQ: 531365872
|
||||
* QQ群: 531365872
|
||||
* 微信: numberwolf11
|
||||
* Discord: numberwolf#8694
|
||||
* 邮箱: porschegt23@foxmail.com
|
||||
* 博客: https://www.jianshu.com/u/9c09c1e00fd1
|
||||
* Github: https://github.com/numberwolf/h265web.js
|
||||
*
|
||||
**********************************************************/
|
||||
require('./h265webjs-v20221106');
|
||||
export default class h265webjs {
|
||||
static createPlayer(videoURL, config) {
|
||||
return window.new265webjs(videoURL, config);
|
||||
}
|
||||
|
||||
static clear() {
|
||||
global.STATICE_MEM_playerCount = -1;
|
||||
global.STATICE_MEM_playerIndexPtr = 0;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1,683 @@
|
|||
declare namespace Jessibuca {
|
||||
|
||||
/** 超时信息 */
|
||||
enum TIMEOUT {
|
||||
/** 当play()的时候，如果没有数据返回 */
|
||||
loadingTimeout = 'loadingTimeout',
|
||||
/** 当播放过程中，如果超过timeout之后没有数据渲染 */
|
||||
delayTimeout = 'delayTimeout',
|
||||
}
|
||||
|
||||
/** 错误信息 */
|
||||
enum ERROR {
|
||||
/** 播放错误，url 为空的时候，调用 play 方法 */
|
||||
playError = 'playError',
|
||||
/** http 请求失败 */
|
||||
fetchError = 'fetchError',
|
||||
/** websocket 请求失败 */
|
||||
websocketError = 'websocketError',
|
||||
/** webcodecs 解码 h265 失败 */
|
||||
webcodecsH265NotSupport = 'webcodecsH265NotSupport',
|
||||
/** mediaSource 解码 h265 失败 */
|
||||
mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
|
||||
/** wasm 解码失败 */
|
||||
wasmDecodeError = 'wasmDecodeError',
|
||||
}
|
||||
|
||||
interface Config {
|
||||
/**
|
||||
* 播放器容器
|
||||
* * 若为 string ，则底层调用的是 document.getElementById('id')
|
||||
* */
|
||||
container: HTMLElement | string;
|
||||
/**
|
||||
* 设置最大缓冲时长，单位秒，播放器会自动消除延迟
|
||||
*/
|
||||
videoBuffer?: number;
|
||||
/**
|
||||
* worker地址
|
||||
* * 默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
|
||||
decoder?: string;
|
||||
/**
|
||||
* 是否不使用离屏模式（提升渲染能力）
|
||||
*/
|
||||
forceNoOffscreen?: boolean;
|
||||
/**
|
||||
* 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
|
||||
*/
|
||||
hiddenAutoPause?: boolean;
|
||||
/**
|
||||
* 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
|
||||
*/
|
||||
hasAudio?: boolean;
|
||||
/**
|
||||
* 设置旋转角度，只支持，0(默认)，180，270 三个值
|
||||
*/
|
||||
rotate?: boolean;
|
||||
/**
|
||||
* 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
|
||||
* 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
|
||||
*/
|
||||
isResize?: boolean;
|
||||
/**
|
||||
* 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
|
||||
*/
|
||||
isFullResize?: boolean;
|
||||
/**
|
||||
* 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
|
||||
*/
|
||||
isFlv?: boolean;
|
||||
/**
|
||||
* 是否开启控制台调试打
|
||||
*/
|
||||
debug?: boolean;
|
||||
/**
|
||||
* 1. 设置超时时长, 单位秒
|
||||
* 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
|
||||
*/
|
||||
timeout?: number;
|
||||
/**
|
||||
* 1. 设置超时时长, 单位秒
|
||||
* 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
|
||||
*/
|
||||
heartTimeout?: number;
|
||||
/**
|
||||
* 1. 设置超时时长, 单位秒
|
||||
* 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
|
||||
*/
|
||||
loadingTimeout?: number;
|
||||
/**
|
||||
* 是否支持屏幕的双击事件，触发全屏，取消全屏事件
|
||||
*/
|
||||
supportDblclickFullscreen?: boolean;
|
||||
/**
|
||||
* 是否显示网
|
||||
*/
|
||||
showBandwidth?: boolean;
|
||||
/**
|
||||
* 配置操作按钮
|
||||
*/
|
||||
operateBtns?: {
|
||||
/** 是否显示全屏按钮 */
|
||||
fullscreen?: boolean;
|
||||
/** 是否显示截图按钮 */
|
||||
screenshot?: boolean;
|
||||
/** 是否显示播放暂停按钮 */
|
||||
play?: boolean;
|
||||
/** 是否显示声音按钮 */
|
||||
audio?: boolean;
|
||||
/** 是否显示录制按 */
|
||||
record?: boolean;
|
||||
};
|
||||
/**
|
||||
* 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
|
||||
*/
|
||||
keepScreenOn?: boolean;
|
||||
/**
|
||||
* 是否开启声音，默认是关闭声音播放的
|
||||
*/
|
||||
isNotMute?: boolean;
|
||||
/**
|
||||
* 加载过程中文案
|
||||
*/
|
||||
loadingText?: string;
|
||||
/**
|
||||
* 背景图片
|
||||
*/
|
||||
background?: string;
|
||||
/**
|
||||
* 是否开启MediaSource硬解码
|
||||
* * 视频编码只支持H.264视频（Safari on iOS不支持）
|
||||
* * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
|
||||
*/
|
||||
useMSE?: boolean;
|
||||
/**
|
||||
* 是否开启Webcodecs硬解码
|
||||
* * 视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
|
||||
* * 支持 forceNoOffscreen 为 false （开启离屏渲染)
|
||||
* */
|
||||
useWCS?: boolean;
|
||||
/**
|
||||
* 是否开启键盘快捷键
|
||||
* 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
|
||||
*/
|
||||
hotKey?: boolean;
|
||||
/**
|
||||
* 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
|
||||
* 设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
|
||||
*/
|
||||
autoWasm?: boolean;
|
||||
/**
|
||||
* heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
|
||||
*/
|
||||
heartTimeoutReplay?: boolean,
|
||||
/**
|
||||
* heartTimeoutReplay 从试次数，超过之后，不再自动播放
|
||||
*/
|
||||
heartTimeoutReplayTimes?: number,
|
||||
/**
|
||||
* loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
|
||||
*/
|
||||
loadingTimeoutReplay?: boolean,
|
||||
/**
|
||||
* heartTimeoutReplay 从试次数，超过之后，不再自动播放
|
||||
*/
|
||||
loadingTimeoutReplayTimes?: number
|
||||
/**
|
||||
* wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
|
||||
*/
|
||||
wasmDecodeErrorReplay?: boolean,
|
||||
/**
|
||||
* https://github.com/langhuihui/jessibuca/issues/152 解决方案
|
||||
* 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
|
||||
*/
|
||||
openWebglAlignment?: boolean,
|
||||
|
||||
/**
|
||||
* webcodecs硬解码是否通过video标签渲染
|
||||
*/
|
||||
wcsUseVideoRender?: boolean,
|
||||
|
||||
/**
|
||||
* 底部控制台是否自动隐藏
|
||||
*/
|
||||
controlAutoHide?: boolean,
|
||||
|
||||
/**
|
||||
* 录制的视频格式
|
||||
*/
|
||||
recordType?: 'webm' | 'mp4',
|
||||
|
||||
/**
|
||||
* 是否使用web全屏(旋转90度)（只会在移动端生效）。
|
||||
*/
|
||||
useWebFullScreen?: boolean,
|
||||
|
||||
/**
|
||||
* 是否自动使用系统全屏
|
||||
*/
|
||||
autoUseSystemFullScreen?: boolean,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
declare class Jessibuca {
|
||||
|
||||
constructor(config?: Jessibuca.Config);
|
||||
|
||||
/**
|
||||
* 是否开启控制台调试打印
|
||||
@example
|
||||
// 开启
|
||||
jessibuca.setDebug(true)
|
||||
// 关闭
|
||||
jessibuca.setDebug(false)
|
||||
*/
|
||||
setDebug(flag: boolean): void;
|
||||
|
||||
/**
|
||||
* 静音
|
||||
@example
|
||||
jessibuca.mute()
|
||||
*/
|
||||
mute(): void;
|
||||
|
||||
/**
|
||||
* 取消静音
|
||||
@example
|
||||
jessibuca.cancelMute()
|
||||
*/
|
||||
cancelMute(): void;
|
||||
|
||||
/**
|
||||
* 留给上层用户操作来触发音频恢复的方法。
|
||||
*
|
||||
* iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
|
||||
*
|
||||
* https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
|
||||
*/
|
||||
audioResume(): void;
|
||||
|
||||
/**
|
||||
*
|
||||
* 设置超时时长, 单位秒
|
||||
* 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
|
||||
|
||||
@example
|
||||
jessibuca.setTimeout(10)
|
||||
|
||||
jessibuca.on('timeout',function(){
|
||||
//
|
||||
});
|
||||
*/
|
||||
setTimeout(): void;
|
||||
|
||||
/**
|
||||
* @param mode
|
||||
* 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 `isResize` 为false
|
||||
*
|
||||
* 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
|
||||
*
|
||||
* 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
|
||||
@example
|
||||
jessibuca.setScaleMode(0)
|
||||
|
||||
jessibuca.setScaleMode(1)
|
||||
|
||||
jessibuca.setScaleMode(2)
|
||||
*/
|
||||
setScaleMode(mode: number): void;
|
||||
|
||||
/**
|
||||
* 暂停播放
|
||||
*
|
||||
* 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
|
||||
@example
|
||||
jessibuca.pause().then(()=>{
|
||||
console.log('pause success')
|
||||
|
||||
jessibuca.play().then(()=>{
|
||||
|
||||
}).catch((e)=>{
|
||||
|
||||
})
|
||||
|
||||
}).catch((e)=>{
|
||||
console.log('pause error',e);
|
||||
})
|
||||
*/
|
||||
pause(): Promise<void>;
|
||||
|
||||
/**
|
||||
* 关闭视频,不释放底层资源
|
||||
@example
|
||||
jessibuca.close();
|
||||
*/
|
||||
close(): void;
|
||||
|
||||
/**
|
||||
* 关闭视频，释放底层资源
|
||||
@example
|
||||
jessibuca.destroy()
|
||||
*/
|
||||
destroy(): void;
|
||||
|
||||
/**
|
||||
* 清理画布为黑色背景
|
||||
@example
|
||||
jessibuca.clearView()
|
||||
*/
|
||||
clearView(): void;
|
||||
|
||||
/**
|
||||
* 播放视频
|
||||
@example
|
||||
|
||||
jessibuca.play('url').then(()=>{
|
||||
console.log('play success')
|
||||
}).catch((e)=>{
|
||||
console.log('play error',e)
|
||||
})
|
||||
// 添加请求头
|
||||
jessibuca.play('url',{headers:{'Authorization':'test111'}}).then(()=>{
|
||||
console.log('play success')
|
||||
}).catch((e)=>{
|
||||
console.log('play error',e)
|
||||
})
|
||||
*/
|
||||
play(url?: string, options?: {
|
||||
headers: Object
|
||||
}): Promise<void>;
|
||||
|
||||
/**
|
||||
* 重新调整视图大小
|
||||
*/
|
||||
resize(): void;
|
||||
|
||||
/**
|
||||
* 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
|
||||
*
|
||||
* 等同于 `videoBuffer` 参数。
|
||||
*
|
||||
@example
|
||||
// 设置 200ms 缓冲
|
||||
jessibuca.setBufferTime(0.2)
|
||||
*/
|
||||
setBufferTime(time: number): void;
|
||||
|
||||
/**
|
||||
* 设置旋转角度，只支持，0(默认) ，180，270 三个值。
|
||||
*
|
||||
* > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。 *
|
||||
@example
|
||||
jessibuca.setRotate(0)
|
||||
|
||||
jessibuca.setRotate(90)
|
||||
|
||||
jessibuca.setRotate(270)
|
||||
*/
|
||||
setRotate(deg: number): void;
|
||||
|
||||
/**
|
||||
*
|
||||
* 设置音量大小，取值0 — 1
|
||||
*
|
||||
* > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
|
||||
* @param volume 当为0时，完全无声;当为1时，最大音量，默认值
|
||||
@example
|
||||
jessibuca.setVolume(0.2)
|
||||
|
||||
jessibuca.setVolume(0)
|
||||
|
||||
jessibuca.setVolume(1)
|
||||
*/
|
||||
setVolume(volume: number): void;
|
||||
|
||||
/**
|
||||
* 返回是否加载完毕
|
||||
@example
|
||||
var result = jessibuca.hasLoaded()
|
||||
console.log(result) // true
|
||||
*/
|
||||
hasLoaded(): boolean;
|
||||
|
||||
/**
|
||||
* 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
|
||||
* H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
|
||||
* 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
|
||||
@example
|
||||
jessibuca.setKeepScreenOn()
|
||||
*/
|
||||
setKeepScreenOn(): boolean;
|
||||
|
||||
/**
|
||||
* 全屏(取消全屏)播放视频
|
||||
@example
|
||||
jessibuca.setFullscreen(true)
|
||||
//
|
||||
jessibuca.setFullscreen(false)
|
||||
*/
|
||||
setFullscreen(flag: boolean): void;
|
||||
|
||||
/**
|
||||
*
|
||||
* 截图，调用后弹出下载框保存截图
|
||||
* @param filename 可选参数, 保存的文件名, 默认 `时间戳`
|
||||
* @param format 可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
|
||||
* @param quality 可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
|
||||
* @param type 可选参数, 可选download或者base64或者blob，默认`download`
|
||||
|
||||
@example
|
||||
|
||||
jessibuca.screenshot("test","png",0.5)
|
||||
|
||||
const base64 = jessibuca.screenshot("test","png",0.5,'base64')
|
||||
|
||||
const fileBlob = jessibuca.screenshot("test",'blob')
|
||||
*/
|
||||
screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
|
||||
|
||||
/**
|
||||
* 开始录制。
|
||||
* @param fileName 可选，默认时间戳
|
||||
* @param fileType 可选，默认webm，支持webm 和mp4 格式
|
||||
|
||||
@example
|
||||
jessibuca.startRecord('xxx','webm')
|
||||
*/
|
||||
startRecord(fileName: string, fileType: string): void;
|
||||
|
||||
/**
|
||||
* 暂停录制并下载。
|
||||
@example
|
||||
jessibuca.stopRecordAndSave()
|
||||
*/
|
||||
stopRecordAndSave(): void;
|
||||
|
||||
/**
|
||||
* 返回是否正在播放中状态。
|
||||
@example
|
||||
var result = jessibuca.isPlaying()
|
||||
console.log(result) // true
|
||||
*/
|
||||
isPlaying(): boolean;
|
||||
|
||||
/**
|
||||
* 返回是否静音。
|
||||
@example
|
||||
var result = jessibuca.isMute()
|
||||
console.log(result) // true
|
||||
*/
|
||||
isMute(): boolean;
|
||||
|
||||
/**
|
||||
* 返回是否正在录制。
|
||||
@example
|
||||
var result = jessibuca.isRecording()
|
||||
console.log(result) // true
|
||||
*/
|
||||
isRecording(): boolean;
|
||||
|
||||
/**
|
||||
* 切换底部控制条 隐藏/显示
|
||||
* @param isShow
|
||||
*
|
||||
* @example
|
||||
* jessibuca.toggleControlBar(true) // 显示
|
||||
* jessibuca.toggleControlBar(false) // 隐藏
|
||||
* jessibuca.toggleControlBar() // 切换 隐藏/显示
|
||||
*/
|
||||
toggleControlBar(isShow:boolean): void;
|
||||
|
||||
/**
|
||||
* 获取底部控制条是否显示
|
||||
*/
|
||||
getControlBarShow(): boolean;
|
||||
|
||||
/**
|
||||
* 监听 jessibuca 初始化事件
|
||||
* @example
|
||||
* jessibuca.on("load",function(){console.log('load')})
|
||||
*/
|
||||
on(event: 'load', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 视频播放持续时间，单位ms
|
||||
* @example
|
||||
* jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
|
||||
*/
|
||||
on(event: 'timeUpdate', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 当解析出视频信息时回调，2个回调参数
|
||||
* @example
|
||||
* jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
|
||||
*/
|
||||
on(event: 'videoInfo', callback: (data: {
|
||||
/** 视频宽 */
|
||||
width: number;
|
||||
/** 视频高 */
|
||||
height: number;
|
||||
}) => void): void;
|
||||
|
||||
/**
|
||||
* 当解析出音频信息时回调，2个回调参数
|
||||
* @example
|
||||
* jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
|
||||
*/
|
||||
on(event: 'audioInfo', callback: (data: {
|
||||
/** 声频通道 */
|
||||
numOfChannels: number;
|
||||
/** 采样率 */
|
||||
sampleRate: number;
|
||||
}) => void): void;
|
||||
|
||||
/**
|
||||
* 信息，包含错误信息
|
||||
* @example
|
||||
* jessibuca.on("log",function(data){console.log('data:',data)})
|
||||
*/
|
||||
on(event: 'log', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 错误信息
|
||||
* @example
|
||||
* jessibuca.on("error",function(error){
|
||||
if(error === Jessibuca.ERROR.fetchError){
|
||||
//
|
||||
}
|
||||
else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
|
||||
//
|
||||
}
|
||||
console.log('error:',error)
|
||||
})
|
||||
*/
|
||||
on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
|
||||
|
||||
/**
|
||||
* 当前网速， 单位KB 每秒1次,
|
||||
* @example
|
||||
* jessibuca.on("kBps",function(data){console.log('kBps:',data)})
|
||||
*/
|
||||
on(event: 'kBps', callback: (value: number) => void): void;
|
||||
|
||||
/**
|
||||
* 渲染开始
|
||||
* @example
|
||||
* jessibuca.on("start",function(){console.log('start render')})
|
||||
*/
|
||||
on(event: 'start', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 当设定的超时时间内无数据返回,则回调
|
||||
* @example
|
||||
* jessibuca.on("timeout",function(error){console.log('timeout:',error)})
|
||||
*/
|
||||
on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
|
||||
|
||||
/**
|
||||
* 当play()的时候，如果没有数据返回，则回调
|
||||
* @example
|
||||
* jessibuca.on("loadingTimeout",function(){console.log('timeout')})
|
||||
*/
|
||||
on(event: 'loadingTimeout', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
|
||||
* @example
|
||||
* jessibuca.on("delayTimeout",function(){console.log('timeout')})
|
||||
*/
|
||||
on(event: 'delayTimeout', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 当前是否全屏
|
||||
* @example
|
||||
* jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
|
||||
*/
|
||||
on(event: 'fullscreen', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 触发播放事件
|
||||
* @example
|
||||
* jessibuca.on("play",function(flag){console.log('play')})
|
||||
*/
|
||||
on(event: 'play', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 触发暂停事件
|
||||
* @example
|
||||
* jessibuca.on("pause",function(flag){console.log('pause')})
|
||||
*/
|
||||
on(event: 'pause', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 触发声音事件，返回boolean值
|
||||
* @example
|
||||
* jessibuca.on("mute",function(flag){console.log('is mute',flag)})
|
||||
*/
|
||||
on(event: 'mute', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 流状态统计，流开始播放后回调，每秒1次。
|
||||
* @example
|
||||
* jessibuca.on("stats",function(s){console.log("stats is",s)})
|
||||
*/
|
||||
on(event: 'stats', callback: (stats: {
|
||||
/** 当前缓冲区时长，单位毫秒 */
|
||||
buf: number;
|
||||
/** 当前视频帧率 */
|
||||
fps: number;
|
||||
/** 当前音频码率，单位byte */
|
||||
abps: number;
|
||||
/** 当前视频码率，单位byte */
|
||||
vbps: number;
|
||||
/** 当前视频帧pts，单位毫秒 */
|
||||
ts: number;
|
||||
}) => void): void;
|
||||
|
||||
/**
|
||||
* 渲染性能统计，流开始播放后回调，每秒1次。
|
||||
* @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
|
||||
* @example
|
||||
* jessibuca.on("performance",function(performance){console.log("performance is",performance)})
|
||||
*/
|
||||
on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
|
||||
|
||||
/**
|
||||
* 录制开始的事件
|
||||
|
||||
* @example
|
||||
* jessibuca.on("recordStart",function(){console.log("record start")})
|
||||
*/
|
||||
on(event: 'recordStart', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 录制结束的事件
|
||||
|
||||
* @example
|
||||
* jessibuca.on("recordEnd",function(){console.log("record end")})
|
||||
*/
|
||||
on(event: 'recordEnd', callback: () => void): void;
|
||||
|
||||
/**
|
||||
* 录制的时候，返回的录制时长，1s一次
|
||||
|
||||
* @example
|
||||
* jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
|
||||
*/
|
||||
on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
|
||||
|
||||
/**
|
||||
* 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
|
||||
* @param event
|
||||
* @param callback
|
||||
*/
|
||||
on(event: 'playToRenderTimes', callback: (times: {
|
||||
playInitStart: number, // 1 初始化
|
||||
playStart: number, // 2 初始化
|
||||
streamStart: number, // 3 网络请求
|
||||
streamResponse: number, // 4 网络请求
|
||||
demuxStart: number, // 5 解封装
|
||||
decodeStart: number, // 6 解码
|
||||
videoStart: number, // 7 渲染
|
||||
playTimestamp: number,// playStart- playInitStart
|
||||
streamTimestamp: number,// streamStart - playStart
|
||||
streamResponseTimestamp: number,// streamResponse - streamStart
|
||||
demuxTimestamp: number, // demuxStart - streamResponse
|
||||
decodeTimestamp: number, // decodeStart - demuxStart
|
||||
videoTimestamp: number,// videoStart - decodeStart
|
||||
allTimestamp: number // videoStart - playInitStart
|
||||
}) => void): void
|
||||
|
||||
/**
|
||||
* 监听方法
|
||||
*
|
||||
@example
|
||||
|
||||
jessibuca.on("load",function(){console.log('load')})
|
||||
*/
|
||||
on(event: string, callback: Function): void;
|
||||
|
||||
}
|
||||
|
||||
export default Jessibuca;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
import Hls from 'hls.js'
|
||||
import flvjs from 'flv.js'
|
||||
|
||||
const GATEWAY_URL = 'http://127.0.0.1:8080'
|
||||
const GATEWAY_URL = 'http://localhost:8080'
|
||||
|
||||
// getPushList 接口参数
|
||||
const pushPage = ref(1)
|
||||
|
|
@ -80,7 +82,380 @@ const getPushStart = async () => {
|
|||
startLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
// 播放测试 - FLV和HLS
|
||||
const flvUrl = ref('http://localhost:8080/zlm/live/prod.live.flv?originTypeStr=rtmp_push&audioCodec=AAC&videoCodec=H264')
|
||||
const hlsUrl = ref('http://localhost:8080/zlm/live/prod/hls.m3u8?originTypeStr=rtmp_push&audioCodec=AAC&videoCodec=H264')
|
||||
const testFlvError = ref('')
|
||||
const testHlsError = ref('')
|
||||
|
||||
// FLV 播放器
|
||||
let flvPlayer: any = null
|
||||
const flvVideoRef = ref<HTMLVideoElement | null>(null)
|
||||
const isFlvPlaying = ref(false)
|
||||
|
||||
const playFlv = () => {
|
||||
testFlvError.value = ''
|
||||
|
||||
if (!flvVideoRef.value) {
|
||||
testFlvError.value = '视频元素未找到'
|
||||
return
|
||||
}
|
||||
|
||||
if (flvPlayer) {
|
||||
flvPlayer.destroy()
|
||||
flvPlayer = null
|
||||
}
|
||||
|
||||
if (flvjs.isSupported()) {
|
||||
try {
|
||||
flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: flvUrl.value,
|
||||
isLive: true,
|
||||
hasAudio: true,
|
||||
hasVideo: true,
|
||||
withCredentials: true
|
||||
})
|
||||
|
||||
flvPlayer.attachMediaElement(flvVideoRef.value)
|
||||
flvPlayer.load()
|
||||
flvPlayer.play()
|
||||
isFlvPlaying.value = true
|
||||
|
||||
flvPlayer.on(flvjs.Events.ERROR, (errorType: string, errorDetail: string) => {
|
||||
testFlvError.value = `播放错误: ${errorType} - ${errorDetail}`
|
||||
isFlvPlaying.value = false
|
||||
})
|
||||
} catch (error) {
|
||||
testFlvError.value = error instanceof Error ? error.message : '播放FLV失败'
|
||||
isFlvPlaying.value = false
|
||||
}
|
||||
} else {
|
||||
testFlvError.value = '当前浏览器不支持 FLV 播放'
|
||||
}
|
||||
}
|
||||
|
||||
const stopFlv = () => {
|
||||
if (flvPlayer) {
|
||||
flvPlayer.pause()
|
||||
flvPlayer.unload()
|
||||
flvPlayer.detachMediaElement()
|
||||
flvPlayer.destroy()
|
||||
flvPlayer = null
|
||||
isFlvPlaying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// HLS 播放器
|
||||
let hlsPlayer: Hls | null = null
|
||||
const hlsVideoRef = ref<HTMLVideoElement | null>(null)
|
||||
const isHlsPlaying = ref(false)
|
||||
|
||||
const playHls = () => {
|
||||
testHlsError.value = ''
|
||||
|
||||
if (!hlsVideoRef.value) {
|
||||
testHlsError.value = '视频元素未找到'
|
||||
return
|
||||
}
|
||||
|
||||
if (hlsPlayer) {
|
||||
hlsPlayer.destroy()
|
||||
hlsPlayer = null
|
||||
}
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
try {
|
||||
hlsPlayer = new Hls({
|
||||
xhrSetup: (xhr) => {
|
||||
xhr.withCredentials = true
|
||||
}
|
||||
})
|
||||
|
||||
hlsPlayer.loadSource(hlsUrl.value)
|
||||
hlsPlayer.attachMedia(hlsVideoRef.value)
|
||||
|
||||
hlsPlayer.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
hlsVideoRef.value?.play()
|
||||
isHlsPlaying.value = true
|
||||
})
|
||||
|
||||
hlsPlayer.on(Hls.Events.ERROR, (event, data) => {
|
||||
if (data.fatal) {
|
||||
testHlsError.value = `播放错误: ${data.type} - ${data.details}`
|
||||
isHlsPlaying.value = false
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
testHlsError.value = error instanceof Error ? error.message : '播放HLS失败'
|
||||
isHlsPlaying.value = false
|
||||
}
|
||||
} else if (hlsVideoRef.value.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
// Safari 原生支持 HLS
|
||||
hlsVideoRef.value.src = hlsUrl.value
|
||||
hlsVideoRef.value.play()
|
||||
isHlsPlaying.value = true
|
||||
} else {
|
||||
testHlsError.value = '当前浏览器不支持 HLS 播放'
|
||||
}
|
||||
}
|
||||
|
||||
const stopHls = () => {
|
||||
if (hlsPlayer) {
|
||||
hlsPlayer.destroy()
|
||||
hlsPlayer = null
|
||||
}
|
||||
if (hlsVideoRef.value) {
|
||||
hlsVideoRef.value.pause()
|
||||
hlsVideoRef.value.src = ''
|
||||
}
|
||||
isHlsPlaying.value = false
|
||||
}
|
||||
|
||||
// WebRTC 播放器
|
||||
let webrtcPlayer: any = null
|
||||
const webrtcVideoRef = ref<HTMLVideoElement | null>(null)
|
||||
const isWebrtcPlaying = ref(false)
|
||||
const webrtcUrl = ref('http://localhost:8080/zlm/index/api/webrtc?app=live&stream=prod&type=play&originTypeStr=rtmp_push&audioCodec=AAC&videoCodec=H264')
|
||||
const testWebrtcError = ref('')
|
||||
|
||||
const playWebrtc = () => {
|
||||
testWebrtcError.value = ''
|
||||
|
||||
if (!webrtcVideoRef.value) {
|
||||
testWebrtcError.value = '视频元素未找到'
|
||||
return
|
||||
}
|
||||
|
||||
if (webrtcPlayer) {
|
||||
webrtcPlayer.close()
|
||||
webrtcPlayer = null
|
||||
}
|
||||
|
||||
try {
|
||||
// @ts-ignore
|
||||
webrtcPlayer = new window.ZLMRTCClient.Endpoint({
|
||||
element: webrtcVideoRef.value,
|
||||
debug: true,
|
||||
zlmsdpUrl: webrtcUrl.value,
|
||||
simulecast: false,
|
||||
useCamera: false,
|
||||
audioEnable: true,
|
||||
videoEnable: true,
|
||||
recvOnly: true,
|
||||
usedatachannel: false
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, () => {
|
||||
testWebrtcError.value = 'ICE 协商出错'
|
||||
isWebrtcPlaying.value = false
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e: any) => {
|
||||
console.log('WebRTC 播放成功', e.streams)
|
||||
isWebrtcPlaying.value = true
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e: any) => {
|
||||
testWebrtcError.value = `offer anwser 交换失败: ${e.msg || ''}`
|
||||
isWebrtcPlaying.value = false
|
||||
})
|
||||
} catch (error) {
|
||||
testWebrtcError.value = error instanceof Error ? error.message : '播放WebRTC失败'
|
||||
isWebrtcPlaying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const stopWebrtc = () => {
|
||||
if (webrtcPlayer) {
|
||||
webrtcPlayer.close()
|
||||
webrtcPlayer = null
|
||||
}
|
||||
isWebrtcPlaying.value = false
|
||||
}
|
||||
|
||||
// Jessibuca 播放器
|
||||
let jessibucaPlayer: any = null
|
||||
const jessibucaContainerRef = ref<HTMLDivElement | null>(null)
|
||||
const isJessibucaPlaying = ref(false)
|
||||
const jessibucaUrl = ref('http://localhost:8080/zlm/live/prod.live.flv?originTypeStr=rtmp_push&audioCodec=AAC&videoCodec=H264')
|
||||
const testJessibucaError = ref('')
|
||||
const jessibucaKBps = ref(0)
|
||||
|
||||
const playJessibuca = () => {
|
||||
testJessibucaError.value = ''
|
||||
|
||||
if (!jessibucaContainerRef.value) {
|
||||
testJessibucaError.value = '容器元素未找到'
|
||||
return
|
||||
}
|
||||
|
||||
if (jessibucaPlayer) {
|
||||
jessibucaPlayer.destroy()
|
||||
jessibucaPlayer = null
|
||||
}
|
||||
|
||||
try {
|
||||
// @ts-ignore
|
||||
jessibucaPlayer = new window.Jessibuca({
|
||||
container: jessibucaContainerRef.value,
|
||||
videoBuffer: 0,
|
||||
isResize: false,
|
||||
useMSE: true,
|
||||
useWCS: false,
|
||||
text: '',
|
||||
controlAutoHide: false,
|
||||
debug: true,
|
||||
hotKey: true,
|
||||
// @ts-ignore
|
||||
decoder: '/static/js/jessibuca/decoder.js',
|
||||
timeout: 10,
|
||||
recordType: 'mp4',
|
||||
isFlv: false,
|
||||
forceNoOffscreen: true,
|
||||
hasAudio: true,
|
||||
heartTimeout: 5,
|
||||
heartTimeoutReplay: true,
|
||||
heartTimeoutReplayTimes: 3,
|
||||
hiddenAutoPause: false,
|
||||
isNotMute: true,
|
||||
keepScreenOn: true,
|
||||
loadingText: '请稍等, 视频加载中......',
|
||||
loadingTimeout: 10,
|
||||
loadingTimeoutReplay: true,
|
||||
loadingTimeoutReplayTimes: 3,
|
||||
operateBtns: {
|
||||
fullscreen: false,
|
||||
screenshot: false,
|
||||
play: false,
|
||||
audio: false,
|
||||
recorder: false
|
||||
},
|
||||
showBandwidth: false,
|
||||
supportDblclickFullscreen: false,
|
||||
useWebFullSreen: true,
|
||||
wasmDecodeErrorReplay: true
|
||||
})
|
||||
|
||||
jessibucaPlayer.on('play', () => {
|
||||
isJessibucaPlaying.value = true
|
||||
})
|
||||
|
||||
jessibucaPlayer.on('pause', () => {
|
||||
isJessibucaPlaying.value = false
|
||||
})
|
||||
|
||||
jessibucaPlayer.on('kBps', (kBps: number) => {
|
||||
jessibucaKBps.value = Math.round(kBps)
|
||||
})
|
||||
|
||||
jessibucaPlayer.on('error', (error: any) => {
|
||||
console.error('Jessibuca error:', error)
|
||||
testJessibucaError.value = '播放错误: ' + (error.message || error)
|
||||
isJessibucaPlaying.value = false
|
||||
})
|
||||
|
||||
jessibucaPlayer.on('timeout', () => {
|
||||
testJessibucaError.value = '播放超时'
|
||||
isJessibucaPlaying.value = false
|
||||
})
|
||||
|
||||
jessibucaPlayer.play(jessibucaUrl.value)
|
||||
} catch (error) {
|
||||
testJessibucaError.value = error instanceof Error ? error.message : '播放Jessibuca失败'
|
||||
isJessibucaPlaying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const stopJessibuca = () => {
|
||||
if (jessibucaPlayer) {
|
||||
jessibucaPlayer.pause()
|
||||
jessibucaPlayer.destroy()
|
||||
jessibucaPlayer = null
|
||||
}
|
||||
isJessibucaPlaying.value = false
|
||||
}
|
||||
|
||||
// H265Web 播放器
|
||||
let h265webPlayer: any = null
|
||||
const isH265webPlaying = ref(false)
|
||||
const h265webUrl = ref('http://localhost:8080/zlm/live/prod.live.flv?originTypeStr=rtmp_push&audioCodec=AAC&videoCodec=H264')
|
||||
const testH265webError = ref('')
|
||||
const h265webLoading = ref(false)
|
||||
const h265webPlayerId = 'h265webPlayerContainer'
|
||||
|
||||
const playH265web = () => {
|
||||
testH265webError.value = ''
|
||||
h265webLoading.value = true
|
||||
|
||||
const container = document.getElementById(h265webPlayerId)
|
||||
if (!container) {
|
||||
testH265webError.value = '容器元素未找到'
|
||||
h265webLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (h265webPlayer) {
|
||||
h265webPlayer.release()
|
||||
h265webPlayer = null
|
||||
}
|
||||
|
||||
try {
|
||||
const width = container.clientWidth || 640
|
||||
const height = container.clientHeight || 360
|
||||
|
||||
// @ts-ignore
|
||||
h265webPlayer = new window.new265webjs(h265webUrl.value, {
|
||||
player: h265webPlayerId, // 传递 ID 字符串,不是 DOM 元素
|
||||
width: width,
|
||||
height: height,
|
||||
token: 'base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1',
|
||||
extInfo: {
|
||||
coreProbePart: 0.4,
|
||||
probeSize: 8192,
|
||||
ignoreAudio: 0
|
||||
}
|
||||
})
|
||||
|
||||
h265webPlayer.onReadyShowDone = () => {
|
||||
const result = h265webPlayer.play()
|
||||
isH265webPlaying.value = result
|
||||
h265webLoading.value = false
|
||||
}
|
||||
|
||||
h265webPlayer.onLoadFinish = () => {
|
||||
console.log('H265Web 加载完成')
|
||||
}
|
||||
|
||||
h265webPlayer.do()
|
||||
} catch (error) {
|
||||
testH265webError.value = error instanceof Error ? error.message : '播放H265Web失败'
|
||||
isH265webPlaying.value = false
|
||||
h265webLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const stopH265web = () => {
|
||||
if (h265webPlayer) {
|
||||
h265webPlayer.release()
|
||||
h265webPlayer = null
|
||||
}
|
||||
isH265webPlaying.value = false
|
||||
h265webLoading.value = false
|
||||
}
|
||||
|
||||
// 组件卸载时清理播放器
|
||||
onUnmounted(() => {
|
||||
stopFlv()
|
||||
stopHls()
|
||||
stopWebrtc()
|
||||
stopJessibuca()
|
||||
stopH265web()
|
||||
})</script>
|
||||
|
||||
<template>
|
||||
<div class="wvp-container">
|
||||
|
|
@ -249,6 +624,205 @@ const getPushStart = async () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-section">
|
||||
<h3>3. 播放地址测试 (FLV & HLS)</h3>
|
||||
<div class="api-description">
|
||||
<p>测试通过网关访问ZLM流媒体服务器的播放地址</p>
|
||||
<p>这些地址可以直接在播放器中使用</p>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h4>HTTP-FLV 播放器</h4>
|
||||
<div class="form-group">
|
||||
<label>FLV 播放地址:</label>
|
||||
<input
|
||||
v-model="flvUrl"
|
||||
type="text"
|
||||
placeholder="http://localhost:8080/zlm/live/prod.live.flv"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button @click="playFlv" :disabled="isFlvPlaying">
|
||||
{{ isFlvPlaying ? '播放中...' : '开始播放' }}
|
||||
</button>
|
||||
<button @click="stopFlv" :disabled="!isFlvPlaying" class="stop-button">
|
||||
停止播放
|
||||
</button>
|
||||
<a :href="flvUrl" target="_blank" class="link-button secondary">
|
||||
在新窗口打开
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video
|
||||
ref="flvVideoRef"
|
||||
controls
|
||||
muted
|
||||
class="video-player"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div v-if="testFlvError" class="error">
|
||||
错误: {{ testFlvError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h4>HLS (M3U8) 播放器</h4>
|
||||
<div class="form-group">
|
||||
<label>HLS 播放地址:</label>
|
||||
<input
|
||||
v-model="hlsUrl"
|
||||
type="text"
|
||||
placeholder="http://localhost:8080/zlm/live/prod/hls.m3u8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button @click="playHls" :disabled="isHlsPlaying">
|
||||
{{ isHlsPlaying ? '播放中...' : '开始播放' }}
|
||||
</button>
|
||||
<button @click="stopHls" :disabled="!isHlsPlaying" class="stop-button">
|
||||
停止播放
|
||||
</button>
|
||||
<a :href="hlsUrl" target="_blank" class="link-button secondary">
|
||||
在新窗口打开
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video
|
||||
ref="hlsVideoRef"
|
||||
controls
|
||||
muted
|
||||
class="video-player"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div v-if="testHlsError" class="error">
|
||||
错误: {{ testHlsError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h4>WebRTC 播放器 (低延迟)</h4>
|
||||
<div class="form-group">
|
||||
<label>WebRTC 播放地址:</label>
|
||||
<input
|
||||
v-model="webrtcUrl"
|
||||
type="text"
|
||||
placeholder="http://localhost:8080/zlm/index/api/webrtc?app=live&stream=prod&type=play"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button @click="playWebrtc" :disabled="isWebrtcPlaying">
|
||||
{{ isWebrtcPlaying ? '播放中...' : '开始播放' }}
|
||||
</button>
|
||||
<button @click="stopWebrtc" :disabled="!isWebrtcPlaying" class="stop-button">
|
||||
停止播放
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video
|
||||
ref="webrtcVideoRef"
|
||||
controls
|
||||
autoplay
|
||||
muted
|
||||
class="video-player"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div v-if="testWebrtcError" class="error">
|
||||
错误: {{ testWebrtcError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h4>Jessibuca 播放器 (多功能)</h4>
|
||||
<div class="form-group">
|
||||
<label>Jessibuca 播放地址:</label>
|
||||
<input
|
||||
v-model="jessibucaUrl"
|
||||
type="text"
|
||||
placeholder="http://localhost:8080/zlm/live/prod.live.flv"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button @click="playJessibuca" :disabled="isJessibucaPlaying">
|
||||
{{ isJessibucaPlaying ? '播放中...' : '开始播放' }}
|
||||
</button>
|
||||
<button @click="stopJessibuca" :disabled="!isJessibucaPlaying" class="stop-button">
|
||||
停止播放
|
||||
</button>
|
||||
<span v-if="isJessibucaPlaying" class="info-text">码率: {{ jessibucaKBps }} kb/s</span>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<div
|
||||
ref="jessibucaContainerRef"
|
||||
class="video-player"
|
||||
style="position: relative; min-height: 360px; height: 500px;"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div v-if="testJessibucaError" class="error">
|
||||
错误: {{ testJessibucaError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h4>H265Web 播放器 (H.265 编码)</h4>
|
||||
<div class="form-group">
|
||||
<label>H265Web 播放地址:</label>
|
||||
<input
|
||||
v-model="h265webUrl"
|
||||
type="text"
|
||||
placeholder="http://localhost:8080/zlm/live/prod.live.flv"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button @click="playH265web" :disabled="isH265webPlaying || h265webLoading">
|
||||
{{ h265webLoading ? '加载中...' : (isH265webPlaying ? '播放中...' : '开始播放') }}
|
||||
</button>
|
||||
<button @click="stopH265web" :disabled="!isH265webPlaying && !h265webLoading" class="stop-button">
|
||||
停止播放
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<div
|
||||
id="h265webPlayerContainer"
|
||||
class="video-player"
|
||||
style="position: relative; min-height: 360px;"
|
||||
>
|
||||
<div v-if="h265webLoading" class="play-loading">
|
||||
<i class="el-icon-loading" />
|
||||
视频加载中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="testH265webError" class="error">
|
||||
错误: {{ testH265webError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<h4>播放器说明:</h4>
|
||||
<p><strong>FLV (flv.js):</strong> 使用 flv.js 库播放 FLV 流，兼容性好</p>
|
||||
<p><strong>HLS (hls.js):</strong> 使用 hls.js 库播放 M3U8 流，适合点播</p>
|
||||
<p><strong>WebRTC:</strong> 超低延迟 (< 500ms)，适合实时监控，需要 HTTPS 或 localhost</p>
|
||||
<p><strong>Jessibuca:</strong> 功能强大的多格式播放器，支持 FLV/HLS/WebSocket-FLV，有心跳重连</p>
|
||||
<p><strong>H265Web:</strong> 支持 H.265/HEVC 编码，高清低码率，需要 token 授权</p>
|
||||
<p><strong>注意:</strong> 确保推流正在进行，否则播放地址会返回404错误</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -457,4 +1031,120 @@ button:disabled {
|
|||
font-size: 12px;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.test-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.test-section h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #2196f3;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.success {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #e3f2fd;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #2196f3;
|
||||
}
|
||||
|
||||
.info-box h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-button:hover {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
|
||||
.link-button.secondary {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.link-button.secondary:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.stop-button {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
.stop-button:hover:not(:disabled) {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
margin-top: 20px;
|
||||
background-color: #000;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
display: block;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #2196f3;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.play-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 360px;
|
||||
color: rgb(255, 255, 255);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.play-loading i {
|
||||
margin-right: 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue