@jxstjh/jhvideo
Version:
HTML5 jhvideo base on MPEG2-TS Stream Player
1,218 lines • 108 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import mpegts from "./mpegts.js";
import Features from "./core/features.js";
import httpClient from "./core/httpClient";
import nipplejs from "./utils/nipplejs";
import { getJoysticPositionFlag } from "./utils/ptzController";
import { Observable, fromEvent, interval, timer, Subject } from "rxjs";
import { debounceTime, concatAll, distinct, takeUntil, startWith, distinctUntilChanged, filter, take, raceWith, throttleTime, map, } from "rxjs/operators";
import { exitFullScreen, filterAisleIdChart, getNowDate, guid, openFullscreen } from "./utils/utils.js";
import { createDefaultStreamOpt, Direction, JPEvent, PlayerMode, StyleSize, } from "./model/playerModel";
import { EventEmitter } from "events";
import PlayerEvents from "./player/player-events.js";
import { createErrorDom, createLoaderDom2, creatHeaderToolBar, creatFooterToolBar, createSeekDom, createZoomDom, getDirection, createSettingMenuDom, createMobileWindowDom, creatMobileFooterToolBar, creatJoystickToolBar, creatMobileSilderToolBar, createRectangleDom, createDrawTipBtnDom, } from "./utils/controlDom";
import { ERRORMSG } from "./utils/codemsg";
import { ContextMenu } from "./utils/context.js";
import { formatTimeClock } from "./utils/date";
import Browser from "./utils/browser.js";
import { serverName } from "./globalClient";
import * as Hammer from "hammerjs";
import { rectDraw } from "./utils/draw";
import TalkCtrl from "./utils/talk";
import { getSeekableBlob } from './utils/utils';
import audioCtrl from "./utils/audioCtrl/index";
import vodPlayer from "./utils/vod/index";
var preventsDefault = function (event) {
event.preventDefault();
event.stopPropagation();
return event;
};
var JPlayerMediaRecorder = /** @class */ (function () {
function JPlayerMediaRecorder(mediaElement, time) {
var _this = this;
this.mediaElement = mediaElement;
this.$stop = new Subject();
var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options = { mimeType: 'video/webm;codecs=vp9' };
}
else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options = { mimeType: 'video/webm;codecs=vp8' };
}
else {
options = { mimeType: 'video/webm' }; // 默认选项
}
var emitter = this.emitter = new EventEmitter();
this.recorder = new MediaRecorder(Browser.name === 'firefox' ? mediaElement.mozCaptureStream() : mediaElement.captureStream(), options);
var _chunk = [];
var handleDataAvailable = function (event) {
if (event.data.size > 0) {
_chunk.push(event.data);
}
else {
// ...
}
};
this.recorder.ondataavailable = handleDataAvailable;
this.recorder.onstop = function () {
emitter.emit("complishe", _chunk);
};
this.recorder.onerror = function (event) {
console.error("录制错误: ", event.error);
};
if (time) {
this.timer$ = timer(time * 1000).pipe(take(1));
this.subscriptiontimer = this.$stop
.asObservable()
.pipe(raceWith(this.timer$))
.subscribe(function () {
_this.recorder.stop();
});
}
}
JPlayerMediaRecorder.prototype.on = function (event, listener) {
this.emitter.addListener(event, listener);
};
JPlayerMediaRecorder.prototype.off = function (event, listener) {
this.emitter.removeListener(event, listener);
};
JPlayerMediaRecorder.prototype.start = function () {
try {
this.recorder.start();
}
catch (e) {
if (e.name === 'NotSupportedError') {
console.warn('MediaRecorder 无法启动：没有可用的音频或视频轨道。');
}
else {
console.error('An error occurred: ', e);
}
}
};
JPlayerMediaRecorder.prototype.stop = function () {
this.recorder.stop();
// this.$stop.next(null);
};
JPlayerMediaRecorder.prototype.destroy = function () {
// destroy MediaRecorder
this.recorder = null;
this.subscriptiontimer.unsubscribe();
this.subscriptiontimer = null;
this.timer$ = null;
this.emitter.removeAllListeners();
this.emitter = null;
};
return JPlayerMediaRecorder;
}());
export { JPlayerMediaRecorder };
var JPlayer = /** @class */ (function () {
// 登陆信息、播放器容器
function JPlayer(globalClient, el, playerMode) {
var _this = this;
this.el = el;
this.playerMode = playerMode;
this._currentTime = 0; // mpegts实例
this.osdTimeId = null; // OSD时间
this.videoRatio = {
w: null,
h: null,
};
this.playerOnCanPlay = false; // mpegts实例
this._playing = false; // 是否在播放中
this._ptzing = false; // 是否在云台控制
this._ptzLoad = false; // 是否在云台控制
this._zooming = false; // 是否在数码放大
this._drawing = false; // 是否在绘制矩形中
this._setting = false; // 设置菜单是否打开
this._seeking = false; // 是否在跳转中
this._ptzSpeed = 10; // 云台控制灵敏度
this._offsetObj = {
x: 0,
y: 0,
}; // 偏移对象
this._ponitDragClick = {
clientX: 0,
offsetX: 0,
};
this._zoomStartPonit = {
// 数码放大起始位置
clientX: 0,
clientY: 0,
offsetX: 0,
offsetY: 0,
};
this._zoomEndPonit = {
// 数码放大末尾位置
clientX: 0,
clientY: 0,
offsetX: 0,
offsetY: 0,
};
this._loading = true;
this._recording = false; // 录制状态
this._retryTime = 0; // 出错后重试
this._maxRetryTime = 3; // 最大重连次数
this._timer = interval(1000); // 定时器
this._isMouseUp = true; //
this.subscriptionWrapList$ = [];
this.subscriptionToolbarList$ = [];
this.$ptzSubject = new Subject();
// private _dataPickerShow = false;
this._liveFlow = {
action: 0,
command: "",
};
this._OSDTime = {
value: 0,
timestampFlag: 0
};
this.zoomScale = 0.25; // 数码放大的容器缩放尺寸
this._sequence = -1; // 数码放大的容器缩放尺寸
this._passageRepeat = 0;
this.fullScreenHandler = function (e) {
var _this = this;
var that = this;
this.el.style.fontSize =
this.wrapperel.clientWidth >= 800 ? "16px" : "14px";
setTimeout(function () {
var isMobile = _this.playerMode === PlayerMode.MOBILE;
if (_this.wrapperel.clientWidth === window.innerWidth &&
_this.wrapperel.clientHeight === window.innerHeight) {
_this.isFullScreen = true;
isMobile && that.initNipple();
}
else {
_this.isFullScreen = false;
isMobile && that.destroyNipple();
}
// this.fixPickerTime();
}, 160);
}.bind(this);
this.setMCPosition = function (e) {
var _a = _this, wrapperel = _a.wrapperel, _offsetObj = _a._offsetObj;
var mc = wrapperel.querySelector(".mock-cursor");
var ox = (_offsetObj && _offsetObj.x) || 0;
var oy = (_offsetObj && _offsetObj.y) || 0;
if (mc) {
mc.style.left = e.offsetX + ox + "px";
mc.style.top = e.offsetY + oy + "px";
}
return e;
};
this.getPtzPosition = function (e) {
var headerToolbar = _this.el.querySelector(".header");
var footerToolbar = _this.el.querySelector(".footer");
var headerCH = headerToolbar ? headerToolbar.clientHeight : 0;
var footerCH = footerToolbar ? footerToolbar.clientHeight : 0;
var H = _this.videoWrapperEl.clientHeight;
var W = _this.videoWrapperEl.clientWidth;
var y = e.offsetX <= W * 0.3333
? 0
: e.offsetX > W * 0.3333 && e.offsetX < W * 0.66666
? 1
: 2;
var x = e.offsetY <= H * 0.3333
? 0
: e.offsetY > H * 0.3333 && e.offsetY < H * 0.66666
? 1
: 2;
return [x, y];
};
/**
* 3 2 1
* 4 * 0
* 5 6 7
*
*/
this.getPtzPositionFlag = function (_a) {
var x = _a[0], y = _a[1];
switch (x) {
case 0:
return y === 0 ? 3 : y === 1 ? 2 : 1;
case 1:
return y === 0 ? 4 : y === 1 ? -99 : 0;
case 2:
return y === 0 ? 5 : y === 1 ? 6 : 7;
default:
return -99;
}
};
this.appendMockCursor = function (e) {
var wrapperel = _this.wrapperel;
var has = wrapperel.querySelector(".mock-cursor");
if (!has) {
var m = document.createElement("div");
m.className = "mock-cursor";
wrapperel.appendChild(m);
}
return e;
};
this.showToolbars = function () {
if (!_this._drawing) {
var videoBox = _this.el.querySelector("." + _this.prefixName + "-video-box");
videoBox.classList.add("show-tools");
}
};
this.hideToolbars = function () {
// const isMobile = this.playerMode === PlayerMode.MOBILE;
var videoBox = _this.el.querySelector("." + _this.prefixName + "-video-box");
videoBox.classList.remove("show-tools");
// if (this._drawing) {
// videoBox.classList.remove("show-tools");
// } else {
// (!this.isFullScreen || isMobile) &&
// videoBox.classList.remove("show-tools");
// }
};
this.showSettingMenu = function () {
var videoBox = _this.el.querySelector("." + _this.prefixName + "-video-box");
videoBox.classList.add("show-setting");
};
this.hideSettingMenu = function () {
var videoBox = _this.el.querySelector("." + _this.prefixName + "-video-box");
videoBox.classList.remove("show-setting");
};
this.checkEleSize = function () {
if (_this.isFullScreen) {
return StyleSize.LG;
}
var _a = _this.vel.clientWidth, clientWidth = _a === void 0 ? 0 : _a;
if (clientWidth >= 0 && clientWidth < 300) {
_this.styleSize = StyleSize.XS;
return StyleSize.XS;
}
else if (clientWidth >= 300 && clientWidth < 600) {
_this.styleSize = StyleSize.SM;
return StyleSize.SM;
}
else if (clientWidth >= 600 && clientWidth < 800) {
_this.styleSize = StyleSize.MD;
return StyleSize.MD;
}
else if (clientWidth >= 800) {
_this.styleSize = StyleSize.LG;
return StyleSize.LG;
}
};
this.addPtzClass = function (flag) {
var el = _this.wrapperel;
var cls = [
"top",
"top-right",
"right",
"right-down",
"down",
"down-left",
"left",
"left-top",
];
var replaceWithCls = function (newCls) {
var _a;
(_a = el.classList).remove.apply(_a, cls.filter(function (v) { return v !== newCls; }));
el.classList.add(newCls);
};
switch (flag) {
case 2:
replaceWithCls("top");
return;
case 1:
replaceWithCls("top-right");
return;
case 0:
replaceWithCls("right");
return;
case 7:
replaceWithCls("right-down");
return;
case 6:
replaceWithCls("down");
return;
case 5:
replaceWithCls("down-left");
return;
case 4:
replaceWithCls("left");
return;
case 3:
replaceWithCls("left-top");
return;
case -99:
_this.clearPtzClass();
return;
default:
return;
}
};
this.clearPtzClass = function () {
var _a;
var el = _this.wrapperel;
var cls = [
"top",
"top-right",
"right",
"right-down",
"down",
"down-left",
"left",
"left-top",
];
(_a = el.classList).remove.apply(_a, cls);
};
// 更新进度条
this.updateProcess = function (e) {
var _a = _this, vel = _a.vel, playerType = _a.playerType;
if (playerType === "webgl") {
var offsetTime = _this.playerIns._wasmPlayer.currentTime * 1e3;
_this.offsetTime = offsetTime;
}
else {
var offsetTime = vel.currentTime * 1e3;
_this.offsetTime = offsetTime;
}
};
// 移动端模式下更新TimeLine
this.updateTimeLine = function () {
var _a = _this, vel = _a.vel, playerType = _a.playerType, _begintime = _a._begintime;
var offsetTime;
if (playerType === "webgl") {
offsetTime = _this.playerIns._wasmPlayer.currentTime * 1e3;
}
else {
offsetTime = vel.currentTime * 1e3;
}
if (_this.timelineIns) {
_this.timelineIns.set_time_to_middle(_begintime + offsetTime);
}
};
// getOffetTime
this.getOffetTime = function (e) {
var isPoint = e.target.classList.contains("offset-point");
var totalTime = _this._endtime - _this._begintime;
var oX = isPoint ? e.offsetX + e.target.offsetLeft : e.offsetX;
var eleWidth = _this.wrapperel.clientWidth;
return (e.offsetX / eleWidth) * totalTime;
};
// getOffetClientTime
this.getOffetClientTime = function (e) {
var clientX = e.clientX;
var _a = _this._ponitDragClick, originx = _a.clientX, offsetX = _a.offsetX;
var eleWidth = _this.wrapperel.clientWidth;
var totalTime = _this._endtime - _this._begintime;
var obsx = clientX - originx;
var newOffsetX = offsetX + obsx;
if (newOffsetX <= 0) {
newOffsetX = 0;
}
if (newOffsetX >= eleWidth) {
newOffsetX = eleWidth;
}
var offsetTime = (newOffsetX / eleWidth) * totalTime;
return offsetTime;
};
// getOffetX
this.getOffetX = function (e) {
var isPoint = e.target.classList.contains("offset-point");
return isPoint ? e.offsetX + e.target.offsetLeft : e.offsetX;
};
this.features = Features.getFeatureList();
this.playerMode = playerMode;
this.prefixName = "JPlayer";
this.globalClient = globalClient;
this.el.style.fontSize = el.clientWidth >= 800 ? "16px" : "14px";
// 初始化容器dom
this.emitter = new EventEmitter();
this.initDom();
setTimeout(function () {
_this.emitter.emit(JPEvent.CREATED);
}, 0);
}
Object.defineProperty(JPlayer, "version", {
get: function () {
return __VERSION__;
},
enumerable: false,
configurable: true
});
JPlayer.isSupported = function () {
return Features.supportMSEH264Playback();
};
Object.defineProperty(JPlayer.prototype, "sequence", {
set: function (params) {
var _a, _b;
this._sequence++;
var cmdBody = __assign(__assign({}, params), { sequence: this._sequence });
if ((_b = (_a = this.playerIns) === null || _a === void 0 ? void 0 : _a._transmuxer) === null || _b === void 0 ? void 0 : _b._controller) {
this.playerIns._transmuxer._controller._ioctl._loader._ws.send(JSON.stringify(cmdBody));
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "mediaInfo", {
get: function () {
return this.playerIns ? this.playerIns.mediaInfo : null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "loading", {
get: function () {
return this._loading;
},
set: function (v) {
this._loading = !!v;
var wrapper = this.el.querySelector("." + this.prefixName + "-wrapper");
if (wrapper) {
if (v) {
wrapper.classList.add("loading");
}
else {
wrapper.classList.remove("loading");
}
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "playerType", {
get: function () {
return this.playerIns && this.playerIns._wasmPlayer ? "webgl" : "video";
},
set: function (type) {
var wrapper = this.el.querySelector("." + this.prefixName + "-wrapper");
if (type === "webgl") {
wrapper.classList.add("webgl");
}
else {
wrapper.classList.remove("webgl");
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "styleSize", {
set: function (size) {
var wrapper = this.el.querySelector("." + this.prefixName + "-wrapper");
if (wrapper) {
wrapper.classList.remove(StyleSize.LG, StyleSize.MD, StyleSize.SM, StyleSize.XS);
wrapper.classList.add(size);
this._size = size;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "size", {
get: function () {
return this._size;
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "seeking", {
get: function () {
return this._seeking;
},
set: function (v) {
this._seeking = !!v;
var wrapper = this.el.querySelector("." + this.prefixName + "-wrapper");
if (wrapper) {
if (v) {
wrapper.classList.add("seeking");
}
else {
wrapper.classList.remove("seeking");
}
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "recording", {
get: function () {
return this._recording;
},
set: function (v) {
this._recording = !!v;
var record = this.el.querySelector(".record");
if (v) {
record && record.classList.add("recording");
}
else {
record && record.classList.remove("recording");
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "messageError", {
set: function (err) {
// 判断err为字符串类型
if (typeof err === "string") {
// 创建一个错误提示框，显示4秒删除
var div_1 = document.createElement('div');
div_1.className = this.prefixName + '-message-error';
div_1.innerHTML = "<h5><i>\u00D7</i><span>".concat(err, "</span></h5>");
this.wrapperel.appendChild(div_1);
setTimeout(function () {
try {
var parent_1 = div_1.parentNode;
parent_1 && (parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.removeChild(div_1));
}
catch (err) {
console.log(err);
}
}, 4000);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "loadingTxt", {
set: function (txt) {
var loaderText = this.el.querySelector(".loader-text");
loaderText && (loaderText.innerHTML = txt);
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "error", {
set: function (v) {
var _this = this;
var prefixName = this.prefixName;
var wrapper = this.el.querySelector("." + prefixName + "-wrapper");
if (wrapper) {
if (v) {
this.loading = false;
wrapper.classList.add("error");
var explainText = this.el.querySelector(".error-explain-text");
// 播放错误
if (v === 'MediaMSEError') {
var passage_1 = this.streamOpt.passage;
if (this._passageRepeat === 0) {
this.switchStream(passage_1 === '0' ? 1 : 0);
this._passageRepeat = 1;
return;
}
explainText.innerHTML = '播放错误';
var span_1 = document.createElement('span');
span_1.className = 'error-switch-stream';
span_1.innerHTML = passage_1 === '1' ? '切换主码流' : '切换辅码流';
explainText.appendChild(span_1);
span_1.addEventListener('click', function () {
_this.switchStream(passage_1 === '0' ? 1 : 0, span_1);
_this._passageRepeat = 0;
});
return;
}
// 错误建议
var str = '|-|-|';
var text = v.indexOf(str) > -1 ? v.split(str) : [v];
explainText && (explainText.innerHTML = text[0]);
var propose = this.el.querySelector(".error-propose");
propose.style.display = 'none';
if (text.length > 1) {
propose.style.display = 'block';
var proposeText = this.el.querySelector(".error-propose-text");
proposeText && (proposeText.innerHTML = text[1] || '无');
}
}
else {
wrapper.classList.remove("error");
}
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "isFullScreen", {
get: function () {
return this._isFullScreen;
},
set: function (v) {
if (v) {
this.wrapperel.classList.add("fullscreen");
}
else {
this.wrapperel.classList.remove("fullscreen");
}
this._isFullScreen = v;
var _a = this.videoRatio, w = _a.w, h = _a.h;
if (!w && !h) {
this.setFillRatio();
}
else if (w < 18 && h < 18) {
this.videoWrapperEl.style.width = "100%";
this.videoWrapperEl.style.height = "100%";
this.videoWrapperEl.style.transform = "none";
this._offsetObj = null;
this.ratioAdjust(w, h);
}
else {
this.resetRatio();
}
this.checkEleSize();
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "speed", {
get: function () {
if (this.playing && this.playerIns) {
var s = (this.playerIns.statisticsInfo &&
this.playerIns.statisticsInfo.speed) ||
0;
return Math.floor(s) + "kb/s";
}
else {
return "0kb/s";
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "durationT", {
get: function () {
if (this.playerIns && this.streamOpt.streamtype === "vod") {
return this._endtime - this._begintime;
}
else {
return 0;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "playing", {
get: function () {
return this._playing;
},
set: function (v) {
var playBtn = this.el.querySelector(".".concat(this.prefixName, "-play-button"));
this._playing = v;
if (v) {
playBtn && playBtn.classList.add("playing");
this.sequence = { cmd: 'resume' };
}
else {
playBtn && playBtn.classList.remove("playing");
this.sequence = { cmd: 'pause' };
}
var wrapper = this.el.querySelector("." + this.prefixName + "-wrapper");
if (wrapper) {
v ? wrapper.classList.remove("pause") : wrapper.classList.add("pause");
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "ptzing", {
get: function () {
return this._ptzing;
},
set: function (v) {
var _a;
var wrapper = this.el.querySelector("." + this.prefixName + "-wrapper");
var ptzBtn = this.el.querySelector(".ptz");
this._ptzing = v;
if (v) {
this.zooming = false;
ptzBtn && ptzBtn.classList.add("actived");
wrapper.classList.add("ptzing");
}
else {
var el = this.wrapperel;
var cls = [
"top",
"top-right",
"right",
"right-down",
"down",
"down-left",
"left",
"left-top",
];
(_a = el.classList).remove.apply(_a, cls);
ptzBtn && ptzBtn.classList.remove("actived");
wrapper.classList.remove("ptzing");
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "setting", {
get: function () {
return this._setting;
},
set: function (v) {
var prefixName = this.prefixName;
var wrapper = this.el.querySelector("." + prefixName + "-wrapper");
if (wrapper) {
if (v) {
this.showSettingMenu();
}
else {
this.hideSettingMenu();
}
}
this._setting = Boolean(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "zooming", {
get: function () {
return this._zooming;
},
set: function (v) {
var prefixName = this.prefixName;
var wrapper = this.el.querySelector("." + prefixName + "-wrapper");
var zoomBtn = this.el.querySelector(".zoom");
this._zooming = v;
if (wrapper) {
if (v) {
this.ptzing = false;
this.toogleCanvasVide(true);
wrapper.classList.add("zooming");
zoomBtn && zoomBtn.classList.add("actived");
}
else {
this.toogleCanvasVide(false);
wrapper.classList.remove("zooming");
zoomBtn && zoomBtn.classList.remove("actived");
}
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "streamSpeed", {
// 获取倍数
get: function () {
return this._vodPlayer._streamSpeed;
},
// 设置倍数
set: function (v) {
this._vodPlayer.setStreamSpeed(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "offsetTime", {
set: function (v) {
this._offsetTime = v;
this.updateProcessBarView(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(JPlayer.prototype, "isMobile", {
get: function () {
return this.playerMode === PlayerMode.MOBILE;
},
enumerable: false,
configurable: true
});
JPlayer.prototype.initHammer = function () {
if (this._rootHammertime) {
this._rootHammertime.destroy();
}
var wrapperel = this.videoWrapperEl;
var mc = new Hammer.Manager(wrapperel, {});
var singleTap = new Hammer.Tap({ event: "singletap" });
var doubleTap = new Hammer.Tap({
event: "doubletap",
taps: 2,
interval: 500,
});
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure(doubleTap);
mc.add([doubleTap, singleTap]);
var pinch = new Hammer.Pinch();
mc.add(pinch);
this._rootHammertime = mc;
};
JPlayer.prototype.on = function (event, listener) {
this.emitter.addListener(event, listener);
};
JPlayer.prototype.init = function (stream) {
return __awaiter(this, void 0, void 0, function () {
var _a, url, headers, res, error_1, _b, error_2, _err, code, error_3;
var _this = this;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
if (!JPlayer.isSupported()) {
if (Browser.platform === "iphone") {
this.error =
"抱歉!移动端播放器暂不支持iphone平台!请移步至pc或者使用其它安卓设备观看.";
}
else {
this.error = "浏览器版本不支持视频播放!请尝试使用系统自带浏览器尝试!";
}
}
stream = __assign(__assign({}, createDefaultStreamOpt()), stream);
this.streamOpt = stream;
this.loading = true;
this.initContextMenu(stream);
_c.label = 1;
case 1:
_c.trys.push([1, 4, , 5]);
if (!(stream.streamtype === "vod")) return [3 /*break*/, 3];
_a = this.requestInfo(serverName + "/hik-stream/back-stream"), url = _a.url, headers = _a.headers;
this._vodPlayer = new vodPlayer(stream, this.size, this.el, { url: url, headers: headers });
this.loading = true;
this.loadingTxt = "正在查询录像";
return [4 /*yield*/, this._vodPlayer.queryRecord(__assign({}, this.streamOpt), false)];
case 2:
res = _c.sent();
this.playUrl = res.url;
// 时间请求重置播放器
this._vodPlayer.on('vod-refresh', function (_a) {
var dataTime = _a.dataTime, vod = _a.vod;
_this.streamOpt.dateTime = dataTime;
_this.streamOpt.vod = vod;
_this.refresh(__assign({}, _this.streamOpt));
});
// 设置跳转与倍数
this._vodPlayer.on('vod-send', function (cmdBody) {
var _a;
_this.seeking = true;
var cmd = cmdBody.cmd, rate = cmdBody.rate;
// 发送数据
var _cmdBody = cmd === 'speed' ? { cmd: cmd, rate: rate } : __assign({}, cmdBody);
_this.sequence = _cmdBody;
// 暂停播放
if (cmd === 'seek' && _this.playerIns) {
_this.clearOsdTimeId();
_this.playerIns.pause();
_this._currentTime = ((_a = _this.playerIns) === null || _a === void 0 ? void 0 : _a._wasmPlayer) ? _this.playerIns._wasmPlayer._currentTime : _this.playerIns.currentTime;
_this.emitter.emit(JPEvent.SEEKED);
}
if (cmd === 'speed') {
setTimeout(function () {
var _a;
_this.seeking = false;
var video = ((_a = _this.playerIns) === null || _a === void 0 ? void 0 : _a._wasmPlayer) ? _this.playerIns._wasmPlayer : _this.vel;
video.playbackRate = rate === -2 ? 0.5 : rate === -4 ? 0.25 : rate === -8 ? 0.125 : rate;
_this._vodPlayer.setSpeed(cmdBody);
}, 1000);
}
});
_c.label = 3;
case 3: return [3 /*break*/, 5];
case 4:
error_1 = _c.sent();
this.error = "未查询到分段录像";
console.warn("未查询到分段录像");
return [2 /*return*/];
case 5:
_c.trys.push([5, 8, , 9]);
if (!(stream.streamtype === "live")) return [3 /*break*/, 7];
this.loadingTxt = "视频缓冲中...";
_b = this;
return [4 /*yield*/, this.openStream(stream)];
case 6:
_b.playUrl = _c.sent();
_c.label = 7;
case 7: return [3 /*break*/, 9];
case 8:
error_2 = _c.sent();
if (error_2.code !== 0) {
this.error = error_2.msg;
}
else {
_err = "".concat(error_2.data.code, " :").concat(ERRORMSG[error_2.data.code]) ||
(error_2.msg && error_2.msg.errorMsg);
this.error = error_2.data && error_2.data.code ? _err : error_2;
}
return [2 /*return*/];
case 9:
_c.trys.push([9, 11, , 12]);
return [4 /*yield*/, this.creatPlayer().catch(function (e) { return console.error(e); })];
case 10:
code = _c.sent();
if (code !== 0)
return [2 /*return*/];
// 初始工具栏
this.initToolBar();
this.setFillRatio();
this.emitter.emit(JPEvent.INITED, this.vid, this);
this.loading = false;
this.play(false);
return [3 /*break*/, 12];
case 11:
error_3 = _c.sent();
// TODO:实例化播放错误
console.warn(error_3);
return [3 /*break*/, 12];
case 12: return [2 /*return*/];
}
});
});
};
JPlayer.prototype.toogleCanvasVide = function (toogle) {
if (toogle) {
this.updateCanvas();
}
};
JPlayer.prototype.updateCanvas = function () {
var _a;
var _b = this, canvas = _b.canvas, _c = _b._zoomStartPonit, originClientX = _c.clientX, originClientY = _c.clientY, originOffsetX = _c.offsetX, originOffsetY = _c.offsetY, _d = _b._zoomEndPonit, clientX = _d.clientX, clientY = _d.clientY, offsetX = _d.offsetX, offsetY = _d.offsetY;
var _e = this.mediaInfo, width = _e.width, height = _e.height;
var isWasmPlayer = !!((_a = this.playerIns) === null || _a === void 0 ? void 0 : _a._wasmPlayer);
var _f = isWasmPlayer ? this.cel : this.vel, videoClientWidth = _f.clientWidth, videoClientHeight = _f.clientHeight;
if (!this.zooming) {
return;
}
var _offsetX = offsetX - originOffsetX;
var _offsetY = offsetY - originOffsetY;
var dir = getDirection(_offsetX, _offsetY);
var context = canvas.getContext("2d");
context.clearRect(0, 0, width, height);
if (dir === Direction.NAN ||
dir === Direction.TL ||
dir === Direction.DL ||
dir === Direction.TR) {
context.drawImage(isWasmPlayer ? this.cel : this.vel, 0, 0, width, height);
}
else {
var sx = (width * originOffsetX) / videoClientWidth;
var sy = (height * originOffsetY) / videoClientHeight;
var sw = (Math.abs(_offsetX) * width) / videoClientWidth;
var sh = (Math.abs(_offsetY) * height) / videoClientHeight;
var _sw = sx + sw >= width ? width - sx : sw;
var _sh = sy + sh >= height ? height - sy : sh;
context.drawImage(isWasmPlayer ? this.cel : this.vel, sx, sy, _sw, _sh, 0, 0, width, height);
}
if (this.zooming) {
requestAnimationFrame(this.updateCanvas.bind(this));
}
};
JPlayer.prototype.getFeatureList = function () {
return Features.getFeatureList();
};
JPlayer.prototype.initObservables = function () {
var _this = this;
var isMobile = this.isMobile;
var resize$ = this.$resize
.pipe(throttleTime(52), map(function (e) { return _this.checkEleSize(); }), distinct())
.subscribe(function (x) {
var showFullLabel = false;
switch (x) {
case StyleSize.XS:
case StyleSize.SM:
showFullLabel = false;
break;
case StyleSize.MD:
case StyleSize.LG:
showFullLabel = true;
break;
}
});
var clicks$ = this.$click.subscribe(function (e) {
// const {isMobile} = this;
// console.log('isMobile->')
// if (!isMobile) {
// this.hideContextMenu()
// }
// const { streamtype } = this.streamOpt;
// const airDatepicker = this.el.querySelector(".air-datepicker");
// // 是否在vod模式下且时间组件已显示
// if (airDatepicker && streamtype === "vod") {
// return;
// }
var videoBox = _this.el.querySelector("." + _this.prefixName + "-video-box");
var isShow = videoBox.classList.contains("show-tools");
isShow ? _this.hideToolbars() : _this.showToolbars();
});
// 双击全屏
var dblclick$ = this.$dblclick
.pipe(filter(function (e) {
return !_this.ptzing &&
_this.playerOnCanPlay &&
e.target &&
e.target.nodeName === "VIDEO";
}))
.subscribe(function (e) {
var _a = _this, playerMode = _a.playerMode, playing = _a.playing;
// const isMobile = playerMode === PlayerMode.MOBILE
playing ? _this.pause() : _this.play();
// if (isMobile) {
// playing ? this.pause() : this.play();
// } else {
// this.setFullScreen(!this._isFullScreen)
// }
});
// const mouseenter$ = isMobile ? null : this.$mouseenter.pipe().subscribe(this.showToolbars);
var mouseout$ = isMobile
? null
: this.$mouseout.pipe(filter(function (e) { return !_this.isMobile; })).subscribe(function () {
// this.hideToolbars();
// this.setting = false;
// this.hideContextMenu();
// this.hidePicker();
});
var contextmenu$ = isMobile
? null
: this.$contextmenu
.pipe(filter(function (e) { return _this.playerOnCanPlay; }), filter(function (e) {
return !(_this.ptzing || _this.error || _this.loading || _this.zooming);
}), debounceTime(50))
.subscribe(function (_a) {
var x = _a.x, y = _a.y;
_this.contextMenu.hide();
_this.contextMenu.show(x, y);
});
// 云台鼠标滑动模拟curson
var mousemove$ = isMobile
? null
: this.$mousemove
.pipe(filter(function (e) { return !_this.isMobile; }), filter(function (e) { return _this.playerOnCanPlay; }), filter(function (e) { return _this.ptzing; }), map(this.appendMockCursor), filter(function (e) {
if (e.target && (e.target.nodeName === "VIDEO" || e.target.nodeName === "CANVAS")) {
return true;
}
else {
_this.clearPtzClass();
return false;
}
}), map(this.setMCPosition), map(this.getPtzPosition), map(this.getPtzPositionFlag))
.subscribe(this.addPtzClass);
// 云台控制
var cmdPtz$ = this.$ptzSubject.asObservable().subscribe(function (_a) {
var cmd = _a[0], value = _a[1];
_this.sendCmdPtz(cmd, value);
}, function () {
}, function () {
});
// 云台方向按压滑动
var ptzDownMoveUp$ = isMobile
? null
: this.$mousedown
.pipe(filter(function (e) { return _this.ptzing; }), filter(function (e) {
return (e.button === 0 && e.target && (e.target.nodeName === "VIDEO" || e.target.nodeName === "CANVAS"));
}), filter(function (e) {
var _a = _this.getPtzPosition(e), x = _a[0], y = _a[1];
var f = _this.getPtzPositionFlag([x, y]);
return f !== -99;
}),
// 按下操作
map(function (e) {
var _a = _this.getPtzPosition(e), x = _a[0], y = _a[1];
var f = _this.getPtzPositionFlag([x, y]);
_this._liveFlow.action = 0;
_this.$ptzSubject.next([f, _this._ptzSpeed]);
return e;
}), map(function (e) {
return _this.$mousemove.pipe(takeUntil(// 鼠标抬起
_this.$mouseup.pipe(map(function (e) {
var _a = _this.getPtzPosition(e), x = _a[0], y = _a[1];
var f = _this.getPtzPositionFlag([x, y]);
_this._liveFlow.action = 1;
setTimeout(function () {
_this.$ptzSubject.next([f, 0]);
}, 300);
return e;
}))));
}), concatAll(), map(this.getPtzPosition), map(this.getPtzPositionFlag), distinctUntilChanged())
.subscribe(function (f) {
_this.$ptzSubject.next([f, _this._ptzSpeed]);
});
// 云台缩放
var mousewheel$ = isMobile
? this.$mousewheel
.pipe(filter(function (e) { return _this.playerOnCanPlay; }), throttleTime(100), map(function (e) {
var cmd = 11;
var value = e.type === "pinchout" ? _this._ptzSpeed : _this._ptzSpeed * -1;
_this.sendCmdPtz(cmd, value);
return e;
}), debounceTime(300))
.subscribe(function (e) {
var cmd = 11;
_this.sendCmdPtz(cmd);
})
: this.$mousewheel
.pipe(filter(function (e) { return _this.playerOnCanPlay; }), filter(function (e) { return _this.ptzing; }), filter(function (e) { return !!e.deltaY; }), map(function (e) {
_this._liveFlow.action = 0;
var cmd = e.deltaY > 0 ? 9 : 8;
_this.sendCmdPtz(cmd);
return e.deltaY;
}), debounceTime(300))
.subscribe(function (deltaY) {
_this._liveFlow.action = 1;
var cmd = deltaY > 0 ? 9 : 8;
setTimeout(function () {
_this.sendCmdPtz(cmd);
}, 200);
});
// 数码放大
var $windoMousemove = isMobile
? null
: fromEvent(window, "mousemove").pipe(throttleTime(26), map(function (e) {
return e;
}));
var $windowMouseup = isMobile
? null
: fromEvent(window, "mouseup").pipe(filter(function (e) { return _this.zooming; }), map(function (e) {
_this.cleanZoomStartPonit();
return e;
}), map(function (e) {
var _a = _this.vel, clientHeight = _a.clientHeight, clientWidth = _a.clientWidth;
var _b = _this._zoomStartPonit, originOffsetX = _b.offsetX, originOffsetY = _b.offsetY, originClientX = _b.clientX, originClientY = _b.clientY;
var clientX = e.clientX, clientY = e.clientY;
if (e.target && e.target.nodeName