| | |
| | | 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){ |
| | |
| | | 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'; |
| | | }); |
| | | } |
| | | |
| | |
| | | h5lc.destroy(); |
| | | than.closeVideo(stream_path) |
| | | than.elem.style.display = 'none'; |
| | | }, false); |
| | | }); |
| | | |
| | | //全屏 |
| | | let $expand = document.getElementById('expand'); |
| | |
| | | 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; |
| | | } |
| | | |
| | |
| | | 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) { |
| | |
| | | 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) { |
| | |
| | | if (streamPath && typeof streamPath === "string") { |
| | | $.ajax({ |
| | | type: "get", |
| | | url: "../../webapi/media/stop?param=" + streamPath, |
| | | url: "../../monica/stop?param=" + streamPath, |
| | | async: false, |
| | | success: function (result) { |
| | | } |