feat: 新增水印

guzijian
1 parent d34371a9
Showing 9 changed files with 227 additions and 178 deletions
src/main/resources/Aserver.keystore
src/main/resources/application-dev.yml
web_src/build/utils.js
web_src/config/index.js
web_src/src/components/Login.vue
web_src/src/components/common/easyPlayer.vue
web_src/src/components/common/jessibuca.vue
web_src/src/components/dialog/rtcPlayer.vue
web_src/static/js/config.js
@@ -13,13 +13,13 @@ spring:
   # REDIS数据库配置
   redis:
     # [必须修改] Redis服务器IP, REDIS安装在本机的,使用127.0.0.1
-    host: 127.0.0.1
+    host: 192.168.168.124
     # [必须修改] 端口号
     port: 6379
     # [可选] 数据库 DB
     database: 7
     # [可选] 访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接
-    password: luna
+#    password: luna
     # [可选] 超时时间
     timeout: 10000
     # mysql数据源
@@ -30,9 +30,9 @@ spring:
         master:
           type: com.zaxxer.hikari.HikariDataSource
           driver-class-name: com.mysql.cj.jdbc.Driver
-          url: jdbc:mysql://127.0.0.1:3306/wvp2?useUnicode=true&characterEncoding=UTF8&rewriteBatchedStatements=true&serverTimezone=PRC&useSSL=false&allowMultiQueries=true
+          url: jdbc:mysql://192.168.168.124:3306/wvp2?useUnicode=true&characterEncoding=UTF8&rewriteBatchedStatements=true&serverTimezone=PRC&useSSL=false&allowMultiQueries=true
           username: root
-          password: root123
+          password: guzijian
           hikari:
             connection-timeout: 20000             # 是客户端等待连接池连接的最大毫秒数
             initialSize: 50                       # 连接池初始化连接数
@@ -60,36 +60,36 @@ sip:
   # 如果要监听多张网卡，可以使用逗号分隔多个IP， 例如： 192.168.1.4,10.0.0.4
   # 如果不明白，就使用0.0.0.0，大部分情况都是可以的
   # 请不要使用127.0.0.1，任何包括localhost在内的域名都是不可以的。
-  ip: 172.19.128.50
+  ip: 192.168.168.124
   # [可选] 28181服务监听的端口
-  port: 8116
+  port: 5060
   # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
   # 后两位为行业编码，定义参照附录D.3
   # 3701020049标识山东济南历下区 信息行业接入
   # [可选]
-  domain: 4101050000
+  domain: 3402000000
   # [可选]
-  id: 41010500002000000001
+  id: 34020000002000000001
   # [可选] 默认设备认证密码，后续扩展使用设备单独密码, 移除密码将不进行校验
-  password: bajiuwulian1006
+  password: 12345678
   # 是否存储alarm信息
   alarm: true
 #zlm 默认服务器配置
 media:
-  id: zlmediakit-local
+  id: your_server_id
   # [必须修改] zlm服务器的内网IP
-  ip: 172.19.128.50
+  ip: 192.168.168.124
   # [必须修改] zlm服务器的http.port
-  http-port: 9092
+  http-port: 9090
   # [可选] 返回流地址时的ip，置空使用 media.ip
-  stream-ip: 172.19.128.50
+  stream-ip: 61.169.120.202
   # [可选] wvp在国标信令中使用的ip，此ip为摄像机可以访问到的ip， 置空使用 media.ip
-  sdp-ip: 172.19.128.50
+  sdp-ip: 192.168.168.124
   # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
-  hook-ip: 172.19.128.50
+  hook-ip: 192.168.168.124
   # [可选] zlm服务器的http.sslport, 置空使用zlm配置文件配置
-  http-ssl-port: 1443
+  http-ssl-port: 7443
   # [可选] zlm服务器的hook.admin_params=secret
   secret: 10000
   # 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
@@ -97,9 +97,9 @@ media:
     # [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
     enable: true
     # [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
-    port-range: 50000,50300 # 端口范围
+    port-range: 30000,30500 # 端口范围
     # [可选] 国标级联在此范围内选择端口发送媒体流,
-    send-port-range: 50000,50300 # 端口范围
+    send-port-range: 30000,30500 # 端口范围
   # 录像辅助服务， 部署此服务可以实现zlm录像的管理与下载， 0 表示不使用
   record-assist-port: 18081
 # [根据业务需求配置]
@@ -95,7 +95,7 @@ exports.createNotifierCallback = () =&gt; {
       title: packageConfig.name,
       message: severity + ': ' + error.name,
       subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
+      icon: path.join(__dirname, 'favicon_tuohua.ico')
     })
   }
 }
@@ -12,14 +12,14 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/debug': {
-        target: 'http://127.0.0.1:18082',
+        target: 'https://192.169.1.31:18080',
         changeOrigin: true,
         pathRewrite: {
           '^/debug': '/'
         }
       },
       '/static/snap': {
-        target: 'http://127.0.0.1:18082',
+        target: 'https://192.169.1.31:18080',
         changeOrigin: true,
         // pathRewrite: {
         //   '^/static/snap': '/static/snap'
 <template>
-<div class="login" id="login">
-  <div class="limiter">
-    <div class="container-login100">
-      <div class="wrap-login100">
-					<span class="login100-form-title p-b-26">WVP视频平台</span>
-          <span class="login100-form-title p-b-48">
-						<i class="fa fa-video-camera"></i>
-					</span>
+  <div class="login-container">
+    <div class="login" id="login">
+      <div class="limiter">
+        <div class="container-login100">
+          <div class="wrap-login100">
+            <span class="login100-form-title p-b-26">综合视频平台</span>
+            <span class="login100-form-title p-b-48">
+              <i class="fa fa-video-camera"></i>
+            </span>
-          <div class="wrap-input100 validate-input" data-validate = "Valid email is: a@b.c">
-            <input :class="'input100 ' + (username==''?'':'has-val')" type="text" v-model="username" name="username">
-            <span class="focus-input100" data-placeholder="用户名"></span>
-          </div>
+            <div class="wrap-input100 validate-input" data-validate="Valid email is: a@b.c">
+              <input :class="'input100 ' + (username == '' ? '' : 'has-val')" type="text" v-model="username"
+                name="username">
+              <span class="focus-input100" data-placeholder="用户名"></span>
+            </div>
-          <div class="wrap-input100 validate-input" data-validate="Enter password">
-						<span class="btn-show-pass">
-							<i :class="'fa ' + (!showPassword?'fa-eye':'fa-eye-slash')" @click="showPassword = !showPassword"></i>
-						</span>
-            <input :class="'input100 ' + (password==''?'':'has-val')" :type="(!showPassword?'password':'text')" v-model="password" name="password">
-            <span class="focus-input100" data-placeholder="密码"></span>
-          </div>
+            <div class="wrap-input100 validate-input" data-validate="Enter password">
+              <span class="btn-show-pass">
+                <i :class="'fa ' + (!showPassword ? 'fa-eye' : 'fa-eye-slash')"
+                  @click="showPassword = !showPassword"></i>
+              </span>
+              <input :class="'input100 ' + (password == '' ? '' : 'has-val')"
+                :type="(!showPassword ? 'password' : 'text')" v-model="password" name="password">
+              <span class="focus-input100" data-placeholder="密码"></span>
+            </div>
-          <div class="container-login100-form-btn">
-            <div class="wrap-login100-form-btn" :class="{'login-loading': isLoging}" v-loading="isLoging" element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
-              <div class="login100-form-bgbtn"></div>
-              <button class="login100-form-btn" @click="login">登录</button>
+            <div class="container-login100-form-btn">
+              <div class="wrap-login100-form-btn" :class="{ 'login-loading': isLoging }" v-loading="isLoging"
+                element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
+                <div class="login100-form-bgbtn"></div>
+                <button class="login100-form-btn" @click="login">登录</button>
+              </div>
             </div>
           </div>
+        </div>
+        <div class="company-author">
+          <span>@2024 上海巴士拓华科技发展有限公司 版权所有</span>
+        </div>
       </div>
     </div>
   </div>
-</div>
+
 </template>
 <script>
-import crypto from 'crypto'
+import crypto from 'crypto';
 import userService from "./service/UserService";
 export default {
   name: 'Login',
-  data(){
-  	return {
+  data() {
+    return {
       isLoging: false,
       showPassword: false,
       loginLoading: false,
-  		username: '',
-  		password: ''
-  	}
+      username: '',
+      password: ''
+    }
   },
-  created(){
+  created() {
     var that = this;
-    document.onkeydown = function(e) {
+    document.onkeydown = function (e) {
       var key = window.event.keyCode;
       if (key == 13) {
         that.login();
       }
     }
   },
-  methods:{
+  methods: {
-  	//登录逻辑
-  	login(){
-  		if(this.username!='' && this.password!=''){
-  			this.toLogin();
-  		}
-  	},
+    //登录逻辑
+    login() {
+      if (this.username != '' && this.password != '') {
+        this.toLogin();
+      }
+    },
-  	//登录请求
-  	toLogin(){
-  		//需要想后端发送的登录参数
-  		let loginParam = {
-  			username: this.username,
-  			password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
-  		}
+    //登录请求
+    toLogin() {
+      //需要想后端发送的登录参数
+      let loginParam = {
+        username: this.username,
+        password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
+      }
       var that = this;
       //设置在登录状态
       this.isLoging = true;
-      let timeoutTask = setTimeout(()=>{
+      let timeoutTask = setTimeout(() => {
         that.$message.error("登录超时");
         that.isLoging = false;
       }, 1000)
       this.$axios({
-      	method: 'get',
-        url:"/api/user/login",
+        method: 'get',
+        url: "/api/user/login",
         params: loginParam
       }).then(function (res) {
         window.clearTimeout(timeoutTask)
         console.log(res);
         console.log("登录成功");
-          if (res.data.code === 0 ) {
-            userService.setUser(res.data.data)
-            //登录成功后
-            that.cancelEnterkeyDefaultAction();
-            that.$router.push('/');
-          }else{
-            that.isLoging = false;
-            that.$message({
-                  showClose: true,
-                  message: '登录失败，用户名或密码错误',
-                  type: 'error'
-              });
-          }
+        if (res.data.code === 0) {
+          userService.setUser(res.data.data)
+          //登录成功后
+          that.cancelEnterkeyDefaultAction();
+          that.$router.push('/');
+        } else {
+          that.isLoging = false;
+          that.$message({
+            showClose: true,
+            message: '登录失败，用户名或密码错误',
+            type: 'error'
+          });
+        }
       }).catch(function (error) {
         console.log(error)
         window.clearTimeout(timeoutTask)
@@ -108,8 +118,8 @@ export default {
         that.isLoging = false;
       });
     },
-    cancelEnterkeyDefaultAction: function() {
-        document.onkeydown = function(e) {
+    cancelEnterkeyDefaultAction: function () {
+      document.onkeydown = function (e) {
         var key = window.event.keyCode;
         if (key == 13) {
           return false;
@@ -119,4 +129,11 @@ export default {
   }
 }
 </script>
-
+<style scoped>
+.container-login100 {
+  background: url("../assets/login-bg.jpg") no-repeat;
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+</style>
 <template>
-  <div id="easyplayer" ></div>
+  <div id="easyplayer"></div>
 </template>
 <script>
+import userService from '../service/UserService';
 export default {
-    name: 'player',
-    data() {
-        return {
-            easyPlayer: null
-        };
+  name: 'player',
+  data() {
+    return {
+      timer: null,
+      easyPlayer: null,
+      config: {
+        userName: userService.getUser().username,
+        nowTime: "2024-03-01 12:00:00"
+      } // 水印
+    };
+  },
+  props: ['videoUrl', 'error', 'hasaudio', 'height'],
+  mounted() {
+    let paramUrl = decodeURIComponent(this.$route.params.url)
+    this.$nextTick(() => {
+      if (typeof (this.videoUrl) == "undefined") {
+        this.videoUrl = paramUrl;
+      }
+      console.log("初始化时的地址为: " + this.videoUrl)
+      this.play(this.videoUrl)
+    })
+  },
+  watch: {
+    videoUrl(newData, oldData) {
+      this.play(newData)
     },
-    props: ['videoUrl', 'error', 'hasaudio', 'height'],
-    mounted () {
-      let paramUrl = decodeURIComponent(this.$route.params.url)
-       this.$nextTick(() =>{
-          if (typeof (this.videoUrl) == "undefined") {
-            this.videoUrl = paramUrl;
-          }
-          console.log("初始化时的地址为: " + this.videoUrl)
-          this.play(this.videoUrl)
-        })
+    immediate: true
+  },
+  methods: {
+    play: function (url) {
+      console.log(this.height)
+      if (this.easyPlayer != null) {
+        this.easyPlayer.destroy();
+      }
+      if (typeof (this.height) == "undefined") {
+        this.height = false
+      }
+      this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK, { Height: this.height })
+      this.easyPlayer.play(url, 1)
     },
-    watch:{
-        videoUrl(newData, oldData){
-            this.play(newData)
-        },
-        immediate:true
-    },
-    methods: {
-        play: function (url) {
-          console.log(this.height)
-            if (this.easyPlayer != null) {
-              this.easyPlayer.destroy();
-            }
-            if (typeof (this.height) == "undefined") {
-              this.height = false
-            }
-            this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK, {Height: this.height})
-            this.easyPlayer.play(url, 1)
-        },
-        pause: function () {
-          this.easyPlayer.destroy();
-          this.easyPlayer = null
-        },
-        eventcallbacK: function(type, message) {
-            // console.log("player 事件回调")
-            // console.log(type)
-            // console.log(message)
-        }
-    },
-    destroyed() {
+    pause: function () {
       this.easyPlayer.destroy();
+      this.easyPlayer = null
     },
+    eventcallbacK: function (type, message) {
+      // console.log("player 事件回调")
+      // console.log(type)
+      // console.log(message)
+    }
+  },
+  destroyed() {
+    this.easyPlayer.destroy();
+  },
 }
 </script>
 <style>
-    .LodingTitle {
-        min-width: 70px;
-    }
-    /* 隐藏logo */
-    .iconqingxiLOGO {
-        display: none !important;
-    }
+.LodingTitle {
+  min-width: 70px;
+}
+/* 隐藏logo */
+.iconqingxiLOGO {
+  display: none !important;
+}
 </style>
 <template>
   <div ref="container" @dblclick="fullscreenSwich"
-       style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;">
+    style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;">
     <div class="buttons-box" id="buttonsBox">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -14,7 +14,7 @@
         <!--          <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
         <!--          <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
         <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot"
-           style="font-size: 1rem !important"></i>
+          style="font-size: 1rem !important"></i>
         <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
         <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
         <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
@@ -24,6 +24,9 @@
 </template>
 <script>
+import watermark from '../../../utils/waterMark.js';
+import userService from '../service/UserService';
+
 let jessibucaPlayer = {};
 export default {
   name: 'jessibuca',
@@ -43,6 +46,11 @@ export default {
       rotate: 0,
       vod: true, // 点播
       forceNoOffscreen: false,
+      watermarkTimer: null,
+      config: {
+        userName: userService.getUser().username,
+        nowTime: "2024-03-01 12:00:00"
+      } // 水印
     };
   },
   props: ['videoUrl', 'error', 'hasAudio', 'height'],
@@ -56,6 +64,7 @@ export default {
         this.videoUrl = paramUrl;
       }
       this.btnDom = document.getElementById("buttonsBox");
+      this.watermarkTimer = watermark(this.$refs.container, this.config);
     })
   },
   // mounted() {
@@ -140,7 +149,7 @@ export default {
         wcsUseVideoRender: true
       };
       console.log("Jessibuca -> options: ", options);
-      jessibucaPlayer[this._uid] = new window.Jessibuca({...options});
+      jessibucaPlayer[this._uid] = new window.Jessibuca({ ...options });
       let jessibuca = jessibucaPlayer[this._uid];
       let _this = this;
@@ -267,6 +276,7 @@ export default {
     this.playing = false;
     this.loaded = false;
     this.performance = "";
+    clearInterval(this.watermarkTimer);
   },
 }
 </script>
@@ -2,36 +2,49 @@
     <div id="rtcPlayer">
         <video id='webRtcPlayerBox' controls autoplay style="text-align:left;">
             Your browser is too old which doesn't support HTML5 video.
-          </video>
+        </video>
     </div>
 </template>
 <script>
+import watermark from '../../../utils/waterMark.js';
+import userService from '../service/UserService';
 let webrtcPlayer = null;
 export default {
     name: 'rtcPlayer',
     data() {
         return {
-            timer: null
+            timer: null,
+            watermarkTimer: null,
+            config: {
+                userName: userService.getUser().username,
+                nowTime: "2024-03-01 12:00:00"
+            }
         };
     },
     props: ['videoUrl', 'error', 'hasaudio'],
-    mounted () {
-      let paramUrl = decodeURIComponent(this.$route.params.url)
-       this.$nextTick(() =>{
-         if (typeof (this.videoUrl) == "undefined") {
-           this.videoUrl = paramUrl;
-         }
-         console.log("初始化时的地址为: " + this.videoUrl)
-         this.play(this.videoUrl)
+    mounted() {
+        let paramUrl = decodeURIComponent(this.$route.params.url)
+        this.$nextTick(() => {
+            if (typeof (this.videoUrl) == "undefined") {
+                this.videoUrl = paramUrl;
+            }
+            console.log("初始化时的地址为: " + this.videoUrl)
+            this.play(this.videoUrl)
         })
     },
-    watch:{
-        videoUrl(newData, oldData){
+    watch: {
+        videoUrl(newData, oldData) {
             this.pause();
             this.play(newData);
         },
-        immediate:true
+        immediate: true
+    },
+    created() {
+        this.$nextTick(() => {
+            this.rtcPlayer = document.getElementById("rtcPlayer");
+            this.watermarkTimer = watermark(this.rtcPlayer, this.config);
+        })
     },
     methods: {
         play: function (url) {
@@ -45,22 +58,22 @@ export default {
                 videoEnable: true,
                 recvOnly: true,
             })
-            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
+            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => {// ICE 协商出错
                 console.error('ICE 协商出错')
                 this.eventcallbacK("ICE ERROR", "ICE 协商出错")
             });
-            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
-                console.log('播放成功',e.streams)
+            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {//获取到了远端流，可以播放
+                console.log('播放成功', e.streams)
                 this.eventcallbacK("playing", "播放成功")
             });
-            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
-                console.error('offer anwser 交换失败',e)
+            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {// offer anwser 交换失败
+                console.error('offer anwser 交换失败', e)
                 this.eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")
-                if (e.code ==-400 && e.msg=="流不存在"){
+                if (e.code == -400 && e.msg == "流不存在") {
                     console.log("流不存在")
-                    this.timer = setTimeout(()=>{
+                    this.timer = setTimeout(() => {
                         this.webrtcPlayer.close();
                         this.play(url)
                     }, 100)
@@ -68,7 +81,7 @@ export default {
                 }
             });
-            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
+            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {// 获取到了本地流
                 // document.getElementById('selfVideo').srcObject=s;
                 this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
@@ -82,7 +95,7 @@ export default {
             }
         },
-        eventcallbacK: function(type, message) {
+        eventcallbacK: function (type, message) {
             console.log("player 事件回调")
             console.log(type)
             console.log(message)
@@ -90,25 +103,28 @@ export default {
     },
     destroyed() {
         clearTimeout(this.timer);
+        clearInterval(this.watermarkTimer);
     },
 }
 </script>
 <style>
-    .LodingTitle {
-        min-width: 70px;
-    }
-    #rtcPlayer{
-        width: 100%;
-    }
-    #webRtcPlayerBox{
-        width: 100%;
-        max-height: 56vh;
-        background-color: #000;
-    }
-    /* 隐藏logo */
-    /* .iconqingxiLOGO {
+.LodingTitle {
+    min-width: 70px;
+}
+
+#rtcPlayer {
+    width: 100%;
+}
+
+#webRtcPlayerBox {
+    width: 100%;
+    max-height: 56vh;
+    background-color: #000;
+}
+
+/* 隐藏logo */
+/* .iconqingxiLOGO {
         display: none !important;
     } */
-
 </style>
-window.baseUrl = ""
+window.baseUrl = "https://192.169.1.31:18080"
 // map组件全局参数, 注释此内容可以关闭地图功能
 window.mapParam = {