From 9b516646acbc7392d7647e2619383a45f8db2978 Mon Sep 17 00:00:00 2001
From: xc <double72cheng@gmail.com>
Date: Wed, 28 Apr 2021 15:55:51 +0800
Subject: [PATCH] 直播插件沉浸式修改
---
src/main/resources/public/js/live/liveComponent.js | 48 +++++++++++++++++++++++-------------------------
1 files changed, 23 insertions(+), 25 deletions(-)
diff --git a/src/main/resources/public/js/live/liveComponent.js b/src/main/resources/public/js/live/liveComponent.js
index 47fb3d3..9dc466d 100755
--- a/src/main/resources/public/js/live/liveComponent.js
+++ b/src/main/resources/public/js/live/liveComponent.js
@@ -16,10 +16,8 @@
let rtspUrl = opt.rtspUrl;
this.container = document.getElementById("container");
- let $play = document.getElementById('play');
- let $stop = document.getElementById('stop');
- let h5lc = new Jessibuca({container, decoder: "js/jessibuca/ff.js", videoBuffer: 0});
+ let h5lc = new Jessibuca({container, decoder: "../js/jessibuca/ff.js", videoBuffer: 0});
//rtspURL不为空 走rtsp rtspURL为空 走平台摄像头id
if (opt.rtspUrl){
@@ -30,18 +28,16 @@
this.play(jessicaURL);
}
stream_path = result.streamPath;
- $play.style.display = 'none';
- $stop.style.display = 'inline';
});
}else {
this.playVideo(cameraId, function (result) {
+ //视频画面完全填充canvas区域
+ h5lc.setScaleMode(0);
h5lc.onLoad = function () {
let jessicaURL = result.jessicaURL;
this.play(jessicaURL);
}
stream_path = result.streamPath;
- $play.style.display = 'none';
- $stop.style.display = 'inline';
});
}
@@ -54,7 +50,7 @@
h5lc.destroy();
than.closeVideo(stream_path)
than.elem.style.display = 'none';
- }, false);
+ });
//全屏
let $expand = document.getElementById('expand');
@@ -62,27 +58,29 @@
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\" 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-play\" id=\"play\"></div>\n" +
- " <div class=\"fa fa-stop\" id=\"stop\" style=\"display: none\"></div>\n" +
- " <div class=\"timer\">\n" +
- " <span class=\"progress_timer\">00:00:00</span>\n" +
- " <span class=\"duration_timer\">00:00:00</span>\n" +
+ 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=\"fa fa-expand expand\" id=\"expand\"></div>\n" +
- " <div class=\"fa fa-close\" id=\"close\"></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>\n" +
- " </div>";
+ " </div>";
element.innerHTML=_content;
}
@@ -90,7 +88,7 @@
LiveComponent.prototype.playVideo = function (video_id, callback) {
$.ajax({
type: "get",
- url: "../../webapi/media/live?param=" + video_id,
+ url: "../../monica/live?param=" + video_id,
timeout: 5000,
async: false,
success: function (result) {
@@ -102,7 +100,7 @@
LiveComponent.prototype.playVideoRTSP = function (rtspUrl, callback) {
$.ajax({
type: "get",
- url: "../../webapi/media/rtsp/live?param=" + rtspUrl,
+ url: "../../monica/rtsp/live?param=" + rtspUrl,
timeout: 5000,
async: false,
success: function (result) {
@@ -116,7 +114,7 @@
if (streamPath && typeof streamPath === "string") {
$.ajax({
type: "get",
- url: "../../webapi/media/stop?param=" + streamPath,
+ url: "../../monica/stop?param=" + streamPath,
async: false,
success: function (result) {
}
--
Gitblit v1.9.1