;!(function () {
|
|
function LiveComponent(opt) {
|
if (typeof opt.elem === 'string') {
|
opt.elem = document.getElementById(opt.elem);
|
}
|
if (!opt.elem) {
|
throw new Error('需要容器');
|
return;
|
}
|
this.elem = opt.elem;
|
appendContent(this.elem);
|
|
let stream_path;
|
let cameraId = opt.cameraId;
|
let rtspUrl = opt.rtspUrl;
|
this.container = document.getElementById("container");
|
|
|
let h5lc = new Jessibuca({container, decoder: "../js/jessibuca/ff.js", videoBuffer: 0});
|
|
//rtspURL不为空 走rtsp rtspURL为空 走平台摄像头id
|
if (opt.rtspUrl){
|
let rtspUrl = opt.rtspUrl;
|
this.playVideoRTSP(rtspUrl, function (result) {
|
h5lc.onLoad = function () {
|
let jessicaURL = result.jessicaURL;
|
this.play(jessicaURL);
|
}
|
stream_path = result.streamPath;
|
});
|
}else {
|
this.playVideo(cameraId, function (result) {
|
//视频画面完全填充canvas区域
|
h5lc.setScaleMode(0);
|
h5lc.onLoad = function () {
|
let jessicaURL = result.jessicaURL;
|
this.play(jessicaURL);
|
}
|
stream_path = result.streamPath;
|
});
|
}
|
|
this.stream_path = stream_path;
|
|
let $close = document.getElementById('close');
|
let than = this;
|
//关闭
|
$close.addEventListener('click', function () {
|
h5lc.destroy();
|
than.closeVideo(stream_path)
|
than.elem.style.display = 'none';
|
});
|
|
//全屏
|
let $expand = document.getElementById('expand');
|
$expand.addEventListener('click', function () {
|
h5lc.fullscreen=true
|
}, false);
|
|
//截图
|
let $screenshot = document.getElementById('screenshot');
|
$screenshot.addEventListener('click', function () {
|
h5lc.screenshot(null,"png",0.5)
|
h5lc.fullscreen=false
|
}, false);
|
|
}
|
|
|
|
function appendContent(element) {
|
let _content = " <div class=\"content\">\n" +
|
" <div class=\"player\" id=\"player\" onmouseover=\"$('.player .control').css('display', 'block')\" onmouseout=\"$('.player .control').css('display', 'none')\">\n" +
|
" <div class=\"player-wrapper\" id=\"container\" style=\"background-color: #0D0E1B;\">\n" +
|
" </div>\n" +
|
" <div class=\"control\">\n" +
|
" <div class=\"fa fa-expand expand\" id=\"expand\"></div>\n" +
|
" <div class=\"fa fa-camera\" id=\"screenshot\"></div>\n" +
|
" <div class=\"fa fa-close\" id=\"close\"></div>\n" +
|
" </div>\n" +
|
" </div>\n" +
|
" </div>";
|
element.innerHTML=_content;
|
}
|
|
//播放 - 针对摄像头id
|
LiveComponent.prototype.playVideo = function (video_id, callback) {
|
$.ajax({
|
type: "get",
|
url: "../../monica/live?param=" + video_id,
|
timeout: 5000,
|
async: false,
|
success: function (result) {
|
callback(result);
|
}
|
});
|
}
|
//播放 - 针对 rtsp
|
LiveComponent.prototype.playVideoRTSP = function (rtspUrl, callback) {
|
$.ajax({
|
type: "get",
|
url: "../../monica/rtsp/live?param=" + rtspUrl,
|
timeout: 5000,
|
async: false,
|
success: function (result) {
|
callback(result);
|
}
|
});
|
}
|
|
//关闭
|
LiveComponent.prototype.closeVideo = function (streamPath) {
|
if (streamPath && typeof streamPath === "string") {
|
$.ajax({
|
type: "get",
|
url: "../../monica/stop?param=" + streamPath,
|
async: false,
|
success: function (result) {
|
}
|
});
|
}
|
};
|
|
LiveComponent.prototype.close = function () {
|
this.closeVideo(this.stream_path);
|
};
|
window.LiveComponent = LiveComponent;
|
})();
|
