'init-project'
This commit is contained in:
tommylee
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -0,0 +1,420 @@
|
||||
|
||||
|
||||
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ FONT ]*/
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins-Regular;
|
||||
src: url('../fonts/poppins/Poppins-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins-Medium;
|
||||
src: url('../fonts/poppins/Poppins-Medium.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins-Bold;
|
||||
src: url('../fonts/poppins/Poppins-Bold.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins-SemiBold;
|
||||
src: url('../fonts/poppins/Poppins-SemiBold.ttf');
|
||||
}
|
||||
|
||||
.limiter {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
font-family: Poppins-Regular, sans-serif;
|
||||
}
|
||||
|
||||
.container-login100 {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.wrap-login100 {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
padding: 77px 55px 33px 55px;
|
||||
|
||||
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[ Form ]*/
|
||||
|
||||
.login100-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login100-form-title {
|
||||
display: block;
|
||||
font-family: Poppins-Bold;
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.login100-form-title i {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[ Input ]*/
|
||||
|
||||
.wrap-input100 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #adadad;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
|
||||
.input100 {
|
||||
font-family: Poppins-Regular;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 1.2;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: transparent;
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.input100::-webkit-input-placeholder { color: #adadad;}
|
||||
.input100:-moz-placeholder { color: #adadad;}
|
||||
.input100::-moz-placeholder { color: #adadad;}
|
||||
.input100:-ms-input-placeholder { color: #adadad;}
|
||||
|
||||
/*---------------------------------------------*/
|
||||
.focus-input100 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
color:transparent;
|
||||
}
|
||||
|
||||
.focus-input100::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
|
||||
background: #6a7dfe;
|
||||
background: -webkit-linear-gradient(left, #21d4fd, #b721ff);
|
||||
background: -o-linear-gradient(left, #21d4fd, #b721ff);
|
||||
background: -moz-linear-gradient(left, #21d4fd, #b721ff);
|
||||
background: linear-gradient(left, #21d4fd, #b721ff);
|
||||
}
|
||||
|
||||
.focus-input100::after {
|
||||
font-family: Poppins-Regular;
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
|
||||
content: attr(data-placeholder);
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0px;
|
||||
padding-left: 5px;
|
||||
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.input100:focus + .focus-input100::after {
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.input100:focus + .focus-input100::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.has-val.input100 + .focus-input100::after {
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.has-val.input100 + .focus-input100::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*---------------------------------------------*/
|
||||
.btn-show-pass {
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-right: 5px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.btn-show-pass:hover {
|
||||
color: #6a7dfe;
|
||||
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
|
||||
color: -o-linear-gradient(left, #21d4fd, #b721ff);
|
||||
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
|
||||
color: linear-gradient(left, #21d4fd, #b721ff);
|
||||
}
|
||||
|
||||
.btn-show-pass.active {
|
||||
color: #6a7dfe;
|
||||
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
|
||||
color: -o-linear-gradient(left, #21d4fd, #b721ff);
|
||||
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
|
||||
color: linear-gradient(left, #21d4fd, #b721ff);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[ Button ]*/
|
||||
.container-login100-form-btn {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
.wrap-login100-form-btn {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login100-form-bgbtn {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 300%;
|
||||
height: 100%;
|
||||
background: #a64bf4;
|
||||
background: -webkit-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
|
||||
background: -o-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
|
||||
background: -moz-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
|
||||
background: linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
|
||||
top: 0;
|
||||
left: -100%;
|
||||
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.login100-form-btn {
|
||||
font-family: Poppins-Medium;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.login100-form-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wrap-login100-form-btn:hover .login100-form-bgbtn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[ Responsive ]*/
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.wrap-login100 {
|
||||
padding: 77px 15px 33px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[ Alert validate ]*/
|
||||
|
||||
.validate-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.alert-validate::before {
|
||||
content: attr(data-validate);
|
||||
position: absolute;
|
||||
max-width: 70%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c80000;
|
||||
border-radius: 2px;
|
||||
padding: 4px 25px 4px 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: 0px;
|
||||
pointer-events: none;
|
||||
|
||||
font-family: Poppins-Regular;
|
||||
color: #c80000;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transition: opacity 0.4s;
|
||||
-o-transition: opacity 0.4s;
|
||||
-moz-transition: opacity 0.4s;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.alert-validate::after {
|
||||
content: "\f06a";
|
||||
font-family: FontAwesome;
|
||||
font-size: 16px;
|
||||
color: #c80000;
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.alert-validate:hover:before {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.alert-validate::before {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/** util **/
|
||||
.p-b-26 {padding-bottom: 26px;}
|
||||
.p-b-48 {padding-bottom: 48px;}
|
||||
.p-t-115 {padding-top: 115px;}
|
||||
|
||||
@keyframes login {
|
||||
from {width: 100%}
|
||||
to {width: 50px}
|
||||
}
|
||||
|
||||
.login-loading{
|
||||
width: 50px;
|
||||
animation-name: login;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
.login-loading > .login100-form-btn {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.login-loading-class{
|
||||
stroke: rgb(255, 255, 255) !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.login-loading-class > .el-loading-spinner .path {
|
||||
stroke: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**font**/
|
||||
/* .zmdi {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
|
||||
font-size: 14px;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.zmdi-font::before {
|
||||
content: '\f16a';
|
||||
}
|
||||
.login100-form-title i {
|
||||
font-size: 60px;
|
||||
} */
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,22 @@
|
||||
|
||||
window.baseUrl = ""
|
||||
|
||||
// map组件全局参数, 注释此内容可以关闭地图功能
|
||||
window.mapParam = {
|
||||
// 开启/关闭地图功能
|
||||
enable: true,
|
||||
// 坐标系 GCJ-02 WGS-84,
|
||||
coordinateSystem: "GCJ-02",
|
||||
// 地图瓦片地址
|
||||
tilesUrl: "http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
|
||||
// 瓦片大小
|
||||
tileSize: 256,
|
||||
// 默认层级
|
||||
zoom:10,
|
||||
// 默认地图中心点
|
||||
center:[116.41020, 39.915119],
|
||||
// 地图最大层级
|
||||
maxZoom:18,
|
||||
// 地图最小层级
|
||||
minZoom: 3
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Vendored
+97
@@ -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.
+637
@@ -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;
|
||||
/** 当前音频码率，单位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
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Reference in New Issue
Block a user