294 lines
10 KiB
JavaScript
294 lines
10 KiB
JavaScript
|
angular.module('nurseApp').controller('rtspCameraViewCtrl',['$scope','bconfirm','$modal','balert','userService','CameraService',
|
||
|
|
function($scope,bconfirm,$modal,balert,userService,CameraService){
|
||
|
|
|
||
|
|
var myVideoPlayer = document.getElementsByClassName("webRtcPlayer")[0];
|
||
|
|
var webRtcServer = null;
|
||
|
|
function init(){
|
||
|
|
$scope.videoCof = {}
|
||
|
|
$scope.videoBoxCof = {type:'add'}
|
||
|
|
$scope.myVideoStop = true
|
||
|
|
$scope.VideoDevice = []
|
||
|
|
$scope.WebRtcPort = ''
|
||
|
|
// var videoWebrtc = {
|
||
|
|
// webrtcID:'4',
|
||
|
|
// webrtcName:"Stream 4",
|
||
|
|
// webrtcIP:"192.168.2.64",
|
||
|
|
// webrtcPort:"554",
|
||
|
|
// webrtcSuffix:"/h264/ch1/sub/av_stream",
|
||
|
|
// webrtcUsername:"admin",
|
||
|
|
// webrtcPwd:"gt123456"
|
||
|
|
// }
|
||
|
|
// $scope.VideoDevice.push(videoWebrtc)
|
||
|
|
userService.getMainConfig('webRtcPort').then(function(WebRtcPort){
|
||
|
|
if(WebRtcPort){
|
||
|
|
$scope.WebRtcPort = WebRtcPort
|
||
|
|
CameraService.getWebrtcStreamer().then(function(data){
|
||
|
|
if(data){
|
||
|
|
$scope.VideoDevice = data
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
init()
|
||
|
|
|
||
|
|
|
||
|
|
//显示视频配置列表
|
||
|
|
var videoBoxDlg = $modal({
|
||
|
|
scope: $scope,
|
||
|
|
templateUrl: 'partials/VideoWebRtcListBox.html',
|
||
|
|
show: false
|
||
|
|
});
|
||
|
|
$scope.showVideoBox = function () {
|
||
|
|
try {
|
||
|
|
webRtcServer.disconnect();
|
||
|
|
videoBoxDlg.$promise.then(videoBoxDlg.show);
|
||
|
|
} catch (error) {
|
||
|
|
videoBoxDlg.$promise.then(videoBoxDlg.show);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//重启视频服务
|
||
|
|
$scope.manualExecution = function () {
|
||
|
|
//$scope.loading = true;
|
||
|
|
CameraService.manualExecutionWebRtcStreamer().then(function (data) {
|
||
|
|
if(data == "NotSupported" || data == "NO"){
|
||
|
|
balert.show('danger', $scope.languageJson.Preview.Prompt.NotSupported, 3000);
|
||
|
|
}
|
||
|
|
//$scope.loading = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//删除视频配置
|
||
|
|
$scope.removeVideoClk = function ($index) {
|
||
|
|
bconfirm.show($scope, $scope.languageJson.Preview.Prompt.RemoveTip + "(" + $scope.VideoDevice[$index].webrtcName + ")" + "?").then(function (data) {
|
||
|
|
if (data) {
|
||
|
|
$scope.loading = true
|
||
|
|
var req = $scope.VideoDevice[$index].webrtcID
|
||
|
|
CameraService.removeWebRtcStreamer(req).then(function(data){
|
||
|
|
$scope.loading = false
|
||
|
|
if(data == 'OK'){
|
||
|
|
// $scope.VideoDevice.splice($index, 1);
|
||
|
|
CameraService.getWebrtcStreamer().then(function(data){
|
||
|
|
if(data){
|
||
|
|
$scope.VideoDevice = data
|
||
|
|
balert.show('success', $scope.languageJson.Preview.Prompt.SuccessfullyDeleted, 3000);//'删除成功！', 3000);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var VideoCofBoxDlg = $modal({
|
||
|
|
scope: $scope,
|
||
|
|
templateUrl: 'partials/VideoWebRtcCofBox.html',
|
||
|
|
show: false
|
||
|
|
});
|
||
|
|
//修改视频配置
|
||
|
|
$scope.modifyVideoClk = function (row) {
|
||
|
|
$scope.videoBoxCof.type = "modify"
|
||
|
|
$scope.videoCof = angular.copy(row);
|
||
|
|
VideoCofBoxDlg.$promise.then(VideoCofBoxDlg.show);
|
||
|
|
};
|
||
|
|
|
||
|
|
//新增视频配置
|
||
|
|
$scope.addVideoClk = function () {
|
||
|
|
$scope.videoBoxCof.type = "add"
|
||
|
|
$scope.videoCof = {
|
||
|
|
webrtcName:"video_1",
|
||
|
|
webrtcIP:"192.168.2.64",
|
||
|
|
webrtcPort:"554",
|
||
|
|
webrtcType:"1",
|
||
|
|
webrtcSuffix:"/h264/ch1/sub/av_stream",
|
||
|
|
webrtcUsername:"admin",
|
||
|
|
webrtcPwd:"gt123456"
|
||
|
|
}
|
||
|
|
VideoCofBoxDlg.$promise.then(VideoCofBoxDlg.show);
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.changeVideoType = function(videoType){
|
||
|
|
if (videoType == 1){
|
||
|
|
$scope.videoCof.webrtcSuffix = "/h264/ch1/sub/av_stream";
|
||
|
|
}else {
|
||
|
|
$scope.videoCof.webrtcSuffix = "/cam/realmonitor?channel=1&subtype=1";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$scope.saveVideo = function () {
|
||
|
|
$scope.loading = true
|
||
|
|
var err = checkVideoCof($scope.videoCof)
|
||
|
|
if(err){
|
||
|
|
$scope.loading = false
|
||
|
|
balert.show('danger', err, 3000);
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if($scope.videoBoxCof.type == 'add'){
|
||
|
|
AddWebRtcStreamer()
|
||
|
|
}else{
|
||
|
|
modifyWebRtcStreamer()
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//添加
|
||
|
|
function AddWebRtcStreamer(){
|
||
|
|
CameraService.AddWebRtcStreamer($scope.videoCof).then(function(data){
|
||
|
|
$scope.loading = false
|
||
|
|
if(data == 'OK'){
|
||
|
|
CameraService.getWebrtcStreamer().then(function(data){
|
||
|
|
if(data){
|
||
|
|
$scope.VideoDevice = data
|
||
|
|
balert.show('success', $scope.languageJson.Preview.Prompt.AddedSuccessfully, 3000);//'新增成功！'
|
||
|
|
VideoCofBoxDlg.hide()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
$scope.FaEye = "fa-eye-slash";
|
||
|
|
$scope.isShowPwd = function () {
|
||
|
|
if ($scope.FaEye == "fa-eye") {
|
||
|
|
$scope.FaEye = "fa-eye-slash";
|
||
|
|
$("#Pwd2").hide();
|
||
|
|
$("#Pwd1").show();
|
||
|
|
} else {
|
||
|
|
$scope.FaEye = "fa-eye";
|
||
|
|
$("#Pwd1").hide();
|
||
|
|
$("#Pwd2").show();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//修改
|
||
|
|
function modifyWebRtcStreamer(){
|
||
|
|
CameraService.modifyWebRtcStreamer($scope.videoCof).then(function(data){
|
||
|
|
$scope.loading = false
|
||
|
|
if(data == 'OK'){
|
||
|
|
CameraService.getWebrtcStreamer().then(function(data){
|
||
|
|
if(data){
|
||
|
|
$scope.VideoDevice = data
|
||
|
|
balert.show('success', $scope.languageJson.Preview.Prompt.SuccessfullyModified, 3000);//'修改成功！'
|
||
|
|
VideoCofBoxDlg.hide()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//输入验证
|
||
|
|
function checkVideoCof(cof){
|
||
|
|
var regIp = /^(?!^0(\.0){3}$)(?!^255(\.255){3}$)((25[0-5])|(2[0-4]\d)|(1\d{2})|(\d{2})|(\d))(\.((25[0-5])|(2[0-4]\d)|(1\d{2})|(\d{2})|(\d))){3}$/;//ip验证
|
||
|
|
var result = ''
|
||
|
|
if(!cof.webrtcName){
|
||
|
|
result = $scope.languageJson.Preview.Name + $scope.languageJson.Preview.Prompt.inputErr
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
if(!cof.webrtcIP || !regIp.test(cof.webrtcIP)){
|
||
|
|
result = $scope.languageJson.Preview.VideoIP + $scope.languageJson.Preview.Prompt.inputErr
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
if(!(/^[1-9]\d*$/.test(cof.webrtcPort) && 1 <= 1 * cof.webrtcPort && 1 * cof.webrtcPort <= 65535)){//端口号验证
|
||
|
|
result = $scope.languageJson.Preview.Port + $scope.languageJson.Preview.Prompt.inputErr
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
if(!cof.webrtcSuffix){
|
||
|
|
result = $scope.languageJson.Preview.PortSuffix + $scope.languageJson.Preview.Prompt.inputErr
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
if(!cof.webrtcUsername){
|
||
|
|
result = $scope.languageJson.Preview.UserName + $scope.languageJson.Preview.Prompt.inputErr
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
if(!cof.webrtcPwd){
|
||
|
|
result = $scope.languageJson.Preview.Password + $scope.languageJson.Preview.Prompt.inputErr
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function repeatClick(fn,argument) {
|
||
|
|
fn(argument)
|
||
|
|
setTimeout(function () {
|
||
|
|
key=false
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
var key = false
|
||
|
|
$scope.playVideo = function(video){
|
||
|
|
if (!key) {
|
||
|
|
key = true
|
||
|
|
repeatClick(playWebRtcStream,video)
|
||
|
|
}else{
|
||
|
|
balert.show('danger', $scope.languageJson.Preview.Prompt.repeatClick, 3000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$scope.stopVideo = function(){
|
||
|
|
stopRtcServer()
|
||
|
|
}
|
||
|
|
$scope.fullscreen = function(){
|
||
|
|
webRtcStreamfullscreen()
|
||
|
|
}
|
||
|
|
//webRtcStream play
|
||
|
|
function playWebRtcStream(videoWebrtc){
|
||
|
|
if(webRtcServer) stopRtcServer()
|
||
|
|
var webrtcConfig = {
|
||
|
|
url: "",
|
||
|
|
options: "rtptransport=tcp&timeout=30",
|
||
|
|
layoutextraoptions: "&width=320&height=0",
|
||
|
|
defaultvideostream: "Bunny"
|
||
|
|
}
|
||
|
|
console.log(webrtcConfig.options)
|
||
|
|
var myVideo=document.getElementById("video");
|
||
|
|
webrtcConfig.url = "rtsp://" + videoWebrtc.webrtcUsername + ":" + videoWebrtc.webrtcPwd + "@" + videoWebrtc.webrtcIP + ":" + videoWebrtc.webrtcPort + videoWebrtc.webrtcSuffix
|
||
|
|
try {
|
||
|
|
myVideoPlayer.children[0].style.backgroundColor = "black"
|
||
|
|
// myVideoPlayer.style.backgroundColor = "black"
|
||
|
|
$scope.myVideoStop = false
|
||
|
|
webRtcServer = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":" + $scope.WebRtcPort);
|
||
|
|
webRtcServer.connect(webrtcConfig.url,"",webrtcConfig.layoutextraoptions)
|
||
|
|
myVideo.play()
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error)
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//webRtcStream stop
|
||
|
|
function stopRtcServer(){
|
||
|
|
if(!webRtcServer) return
|
||
|
|
try {
|
||
|
|
console.log("webRtcServer stop")
|
||
|
|
webRtcServer.disconnect();
|
||
|
|
var myVideo=document.getElementById("video");
|
||
|
|
myVideo.pause();
|
||
|
|
myVideoPlayer.children[0].style.backgroundColor = "transparent"
|
||
|
|
$scope.myVideoStop = true
|
||
|
|
webRtcServer = null
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error)
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//webRtcStream fullscreen
|
||
|
|
function webRtcStreamfullscreen(){
|
||
|
|
if($scope.myVideoStop) return
|
||
|
|
var myVideo = document.getElementById("video");
|
||
|
|
if(!myVideo) return
|
||
|
|
var doc = document.documentElement;
|
||
|
|
if(doc.requestFullscreen){
|
||
|
|
myVideo.requestFullscreen()
|
||
|
|
}
|
||
|
|
else if(doc.mozRequestFullScreen){
|
||
|
|
myVideo.mozRequestFullScreen()
|
||
|
|
}
|
||
|
|
else if(doc.webkitRequestFullScreen){
|
||
|
|
myVideo.webkitRequestFullScreen()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$scope.$on("$destroy",function(){
|
||
|
|
stopRtcServer()
|
||
|
|
})
|
||
|
|
}])
|