fajiao
2 years ago
9 changed files with 1026 additions and 2 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,637 @@ |
|||||
|
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 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
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() |
||||
|
*/ |
||||
|
play(url?: string): 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; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 监听 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; |
||||
|
/** 当前音频码率,单位bit */ |
||||
|
abps: number; |
||||
|
/** 当前视频码率,单位bit */ |
||||
|
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
@ -0,0 +1,150 @@ |
|||||
|
{ |
||||
|
"info": { |
||||
|
"_postman_id": "d779445d-f686-437c-a607-4b4ab98ee76b", |
||||
|
"name": "Monibuca", |
||||
|
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json", |
||||
|
"_exporter_id": "20749978" |
||||
|
}, |
||||
|
"item": [ |
||||
|
{ |
||||
|
"name": "/", |
||||
|
"request": { |
||||
|
"method": "GET", |
||||
|
"header": [], |
||||
|
"url": { |
||||
|
"raw": "{{URL}}/", |
||||
|
"host": [ |
||||
|
"{{URL}}" |
||||
|
], |
||||
|
"path": [ |
||||
|
"" |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
"response": [] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "/rtsp/api/list", |
||||
|
"request": { |
||||
|
"method": "GET", |
||||
|
"header": [], |
||||
|
"url": { |
||||
|
"raw": "{{URL}}/rtsp/api/list", |
||||
|
"host": [ |
||||
|
"{{URL}}" |
||||
|
], |
||||
|
"path": [ |
||||
|
"rtsp", |
||||
|
"api", |
||||
|
"list" |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
"response": [] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "/rtsp/api/pull", |
||||
|
"request": { |
||||
|
"method": "GET", |
||||
|
"header": [], |
||||
|
"url": { |
||||
|
"raw": "{{URL}}/rtsp/api/pull?target=rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast%26profile=Profile_1&streamPath=live/test", |
||||
|
"host": [ |
||||
|
"{{URL}}" |
||||
|
], |
||||
|
"path": [ |
||||
|
"rtsp", |
||||
|
"api", |
||||
|
"pull" |
||||
|
], |
||||
|
"query": [ |
||||
|
{ |
||||
|
"key": "target", |
||||
|
"value": "rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast%26profile=Profile_1" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "streamPath", |
||||
|
"value": "live/test" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
"response": [] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "/api/stream", |
||||
|
"request": { |
||||
|
"method": "GET", |
||||
|
"header": [], |
||||
|
"url": { |
||||
|
"raw": "{{URL}}/api/stream?streamPath=live/test", |
||||
|
"host": [ |
||||
|
"{{URL}}" |
||||
|
], |
||||
|
"path": [ |
||||
|
"api", |
||||
|
"stream" |
||||
|
], |
||||
|
"query": [ |
||||
|
{ |
||||
|
"key": "streamPath", |
||||
|
"value": "live/test" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
"response": [] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "/api/closestream", |
||||
|
"request": { |
||||
|
"method": "GET", |
||||
|
"header": [], |
||||
|
"url": { |
||||
|
"raw": "{{URL}}/api/closestream?streamPath=live/test", |
||||
|
"host": [ |
||||
|
"{{URL}}" |
||||
|
], |
||||
|
"path": [ |
||||
|
"api", |
||||
|
"closestream" |
||||
|
], |
||||
|
"query": [ |
||||
|
{ |
||||
|
"key": "streamPath", |
||||
|
"value": "live/test" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
"response": [] |
||||
|
} |
||||
|
], |
||||
|
"event": [ |
||||
|
{ |
||||
|
"listen": "prerequest", |
||||
|
"script": { |
||||
|
"type": "text/javascript", |
||||
|
"exec": [ |
||||
|
"" |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"listen": "test", |
||||
|
"script": { |
||||
|
"type": "text/javascript", |
||||
|
"exec": [ |
||||
|
"" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"variable": [ |
||||
|
{ |
||||
|
"key": "URL", |
||||
|
"value": "127.0.0.1:8080", |
||||
|
"type": "string" |
||||
|
} |
||||
|
] |
||||
|
} |
@ -0,0 +1,65 @@ |
|||||
|
# Monibuca - 流媒体服务器 |
||||
|
|
||||
|
## 简介 |
||||
|
|
||||
|
开源Go语言流媒体服务器开发框架,https://m7s.live/。 |
||||
|
|
||||
|
## 下载 |
||||
|
|
||||
|
首页导航栏下载栏选择相应版本下载。([windows](https://m7s.live/bin/m7s_windows_amd64.tar.gz)) |
||||
|
|
||||
|
## 使用 |
||||
|
|
||||
|
### api |
||||
|
|
||||
|
形如 http://127.0.0.0.1:8080 or http://192.168.1.119:8080 |
||||
|
|
||||
|
### 推拉流地址格式 |
||||
|
|
||||
|
首页最下方,推拉地址生成处,参考推拉流协议格式。一种协议拉流,即可多种协议取流。 |
||||
|
|
||||
|
具体参考 [rtsp 推拉地址形式](https://m7s.live/guide/plugins/rtsp.html#%E6%8E%A8%E6%8B%89%E5%9C%B0%E5%9D%80%E5%BD%A2%E5%BC%8F)。 |
||||
|
|
||||
|
### 具体推拉流流程(rtsp 拉流,其它协议取流) |
||||
|
|
||||
|
``` |
||||
|
# Step1: rtsp 拉流,参考 https://m7s.live/guide/plugins/rtsp.html#api |
||||
|
# 从远程拉取rtsp到m7s中:http://127.0.0.1:8080/rtsp/api/pull?target=[RTSP地址]&streamPath=[流标识] |
||||
|
# [RTSP地址] : rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1,可以从 cis 服务中的 onvif api 获取:"api/onvif/getStreamUrl" |
||||
|
# [流标识] : "live/test"->"appName/streamName" |
||||
|
|
||||
|
# Step2: 判断是否拉流成功 |
||||
|
# Step1 之后,服务器仅仅返回 ok,无法判断是否拉流。可以通过获取流信息中的 Tracks 是否为空进行判断。服务器经过一段时间检测可能会自动注销无法拉流的流,所以返回的流信息可能为空,要同时判断返回信息是否为空和 Tracks 是否为空。 |
||||
|
# http://127.0.0.1:8080/api/stream?streamPath=live/test |
||||
|
|
||||
|
# Step3: 其它协议取流,参考推拉流地址格式,https://m7s.live/ |
||||
|
# 注意协议格式、ip、端口、appName、streamName |
||||
|
# rtsp : rtsp://127.0.0.1/live/test |
||||
|
# hls : http://127.0.0.1:8080/hls/live/test.m3u8 |
||||
|
# hdl : http://localhost:8080/hdl/live/test.flv |
||||
|
# ws-flv : ws://localhost:8080/jessica/live/test.flv |
||||
|
# ws-raw : ws://localhost:8080/jessica/live/test |
||||
|
|
||||
|
# Step4: 使用 Jessibuca 进行播放 |
||||
|
# 经过短暂测试,使用 ws-flv 播放延时低,不卡顿。hls、hdl 效果一般。 |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
# Jessibuca - 流媒体播放器 |
||||
|
|
||||
|
## 简介 |
||||
|
|
||||
|
纯H5直播流播放器,https://jessibuca.com/ |
||||
|
|
||||
|
## 下载 |
||||
|
|
||||
|
点击首页导航栏 DEMO 跳转页面,下滑到最新源码点击下载。([源码](https://jessibuca.com/dist.zip)) |
||||
|
|
||||
|
## 使用 |
||||
|
|
||||
|
解压缩包,在该文件夹根目录启动,进入 demo.html 页面,输入播放地址并播放即可查看效果,代码参考下载源码中 dist/demo.html |
||||
|
|
||||
|
### api |
||||
|
|
||||
|
https://jessibuca.com/api.html |
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue