增加分享信息

package-lock.json

@@ -2690,6 +2690,16 @@
       "integrity": "sha1-IsNLTVH1cyQIhbIB79pOTsn/88c=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclipboard%2Fdownload%2Fclipboard-2.0.6.tgz",
+      "integrity": "sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.0.0.tgz",
@@ -2970,109 +2980,6 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
-    "copy-webpack-plugin": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz",
-      "integrity": "sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==",
-      "dev": true,
-      "requires": {
-        "cacache": "^12.0.3",
-        "find-cache-dir": "^2.1.0",
-        "glob-parent": "^3.1.0",
-        "globby": "^7.1.1",
-        "is-glob": "^4.0.1",
-        "loader-utils": "^1.2.3",
-        "minimatch": "^3.0.4",
-        "normalize-path": "^3.0.0",
-        "p-limit": "^2.2.1",
-        "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
-        "webpack-log": "^2.0.0"
-      },
-      "dependencies": {
-        "cacache": {
-          "version": "12.0.4",
-          "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-          "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
-          "dev": true,
-          "requires": {
-            "bluebird": "^3.5.5",
-            "chownr": "^1.1.1",
-            "figgy-pudding": "^3.5.1",
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.1.15",
-            "infer-owner": "^1.0.3",
-            "lru-cache": "^5.1.1",
-            "mississippi": "^3.0.0",
-            "mkdirp": "^0.5.1",
-            "move-concurrently": "^1.0.1",
-            "promise-inflight": "^1.0.1",
-            "rimraf": "^2.6.3",
-            "ssri": "^6.0.1",
-            "unique-filename": "^1.1.1",
-            "y18n": "^4.0.0"
-          }
-        },
-        "globby": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npm.taobao.org/globby/download/globby-7.1.1.tgz",
-          "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=",
-          "dev": true,
-          "requires": {
-            "array-union": "^1.0.1",
-            "dir-glob": "^2.0.0",
-            "glob": "^7.1.2",
-            "ignore": "^3.3.5",
-            "pify": "^3.0.0",
-            "slash": "^1.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "dev": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "dev": true
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "http://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
-        "serialize-javascript": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
-          "dev": true
-        },
-        "slash": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npm.taobao.org/slash/download/slash-1.0.0.tgz",
-          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
-          "dev": true
-        }
-      }
-    },
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.9.tgz",
@@ -3599,6 +3506,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz",
+      "integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "http://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -5246,6 +5158,14 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "http://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.1.15.tgz",
@@ -5736,12 +5656,6 @@
       "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
       "dev": true
     },
-    "infer-owner": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
-    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "http://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz",
@@ -6107,11 +6021,6 @@
       "integrity": "sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=",
       "dev": true
     },
-    "jquery": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.0.tgz",
-      "integrity": "sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ=="
-    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "http://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
@@ -6258,14 +6167,6 @@
         "launch-editor": "^2.2.1"
       }
     },
-    "layui-layer": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/layui-layer/-/layui-layer-1.0.9.tgz",
-      "integrity": "sha1-t42dc6qOnDFGUUHExtoyUOaiCOg=",
-      "requires": {
-        "jquery": "^3.1.1"
-      }
-    },
     "lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/lcid/download/lcid-2.0.0.tgz",
@@ -8584,6 +8485,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -9526,6 +9432,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/to-arraybuffer/download/to-arraybuffer-1.0.1.tgz",
@@ -10017,9 +9928,17 @@
       }
     },
     "vue": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
-      "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
+      "version": "2.6.11",
+      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
+      "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
+    },
+    "vue-clipboard2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha1-blUft704SImyiw2jsSKJ7WvKSJQ=",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
     },
     "vue-hot-reload-api": {
       "version": "2.3.3",
@@ -10056,9 +9975,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.10.tgz",
-      "integrity": "sha1-MjtPNJXwT6o1AzN6gvXWUHeZycw=",
+      "version": "2.6.11",
+      "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz",
+      "integrity": "sha1-wEcE749JixUxMAGJk+VjCdRpgIA=",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",

package.json

@@ -12,12 +12,13 @@
     "core-js": "^2.6.5",
     "echarts": "^4.7.0",
     "element-ui": "^2.13.1",
-    "vue": "^2.6.10",
+    "vue": "^2.6.11",
+    "vue-clipboard2": "^0.3.1",
     "vue-router": "^3.1.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-service": "^3.8.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.11"
   }
 }

public/video/video.html

@@ -25,10 +25,7 @@
 		</script>
 	</head>
 	<body>
-		<!-- <live-player id="player01" video-url="rtmp://218.59.173.214/rtp/0BEBC202" live="true" stretch="true" show-custom-button="false"> -->
 		<live-player id="player01" live="true" stretch="true" show-custom-button="false"></live-player>
-		<!-- <live-player id="player01" live="true" stretch="true">
-		</live-player> -->
 		<script>
 			var videoPath=getQueryVariable("url");
 			console.log('播放地址：'+videoPath);

src/components/videoList.vue

@@ -2,24 +2,45 @@
 	<div id="app">
 		<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
 			<span style="font-size: 1rem; font-weight: bold;">视频列表</span>
-			<div style="position: absolute; right: 1rem; top: 0.3rem;">
-				<el-button icon="el-icon-refresh-right" circle size="mini" @click="getVideoList()"></el-button>
-			</div>
+			<div style="position: absolute; right: 1rem; top: 0.3rem;"><el-button icon="el-icon-refresh-right" circle size="mini" @click="getVideoList()"></el-button></div>
 		</div>
 		<div class="videoList">
 			<div class="video-item" v-for="(item, index) in videoList">
 				<!-- <video class="video-js vjs-default-skin vjs-big-play-centered" :id="genVideoId(index, item)" style="width: 15rem; height: 10rem;" controls>
 				</video> -->
-				<img src="../assets/play.png" @click="showVideo(item)"/>
+				<img src="../assets/play.png" @click="showVideo(item)" />
 				<div class="video-item-title">
 					{{ item.stream }}
 					<el-button icon="el-icon-search" circle size="mini" style="float: right;" @click="showVideoInfo(item)"></el-button>
 				</div>
 			</div>
 		</div>
-		
+
 		<el-dialog title="视频播放" :visible.sync="showVideoDialog" :destroy-on-close="true">
-			<iframe :src="getPlayerPath" style="width:100%; height:35rem;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
+			<iframe
+				:src="getPlayerPath"
+				style="width:100%; height:35rem;"
+				frameborder="no"
+				border="0"
+				marginwidth="0"
+				marginheight="0"
+				scrolling="no"
+				allowtransparency="yes"
+			></iframe>
+			<div id="shared">
+				<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+					<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
+					<el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
+				</div>
+				<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+					<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
+					<el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
+				</div>
+				<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+					<span style="width: 5rem; line-height: 2.5rem; text-align: right;">rtmp：</span>
+					<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
+				</div>
+			</div>
 		</el-dialog>
 	</div>
 </template>
@@ -27,19 +48,27 @@
 <script>
 export default {
 	name: 'app',
-	components: {
-	},
+	components: {},
 	data() {
 		return {
 			videoUrl: '',
-			showVideoDialog:false,
+			showVideoDialog: false,
 			videoList: [],
-			videoComponentList: []
+			videoComponentList: [],
+			currentPlayerInfo: {} //当前播放对象
 		};
 	},
-	computed:{
-		getPlayerPath:function(){
-			return '/video/video.html?url='+this.videoUrl;
+	computed: {
+		getPlayerPath: function() {
+			return '/video/video.html?url=' + this.videoUrl;
+		},
+		getPlayerShared: function() {
+			let info = {
+				sharedUrl: window.location.host + '/video/video.html?url=' + this.videoUrl,
+				sharedIframe: '<iframe src="'+window.location.host + '/video/video.html?url=' + this.videoUrl+'"></iframe>',
+				sharedRtmp: this.videoUrl
+			};
+			return info;
 		}
 	},
 	mounted() {
@@ -49,7 +78,7 @@ export default {
 		this.$destroy('videojs');
 		//释放视频播放器空间
 		this.videoList.forEach(item => {
-			if(typeof item.video!='undefined'){
+			if (typeof item.video != 'undefined') {
 				item.video.dispose();
 			}
 			clearTimeout(item.delay);
@@ -66,7 +95,7 @@ export default {
 		// 	];
 		// 	//延迟1s执行，给dom生成一定的时间
 		// 	stream.delay=setTimeout(function() {
-		// 		let player = videojs('video-' + position); 
+		// 		let player = videojs('video-' + position);
 		// 		player.ready(function() {
 		// 			var obj = this;
 		// 			obj.src(story_sources);
@@ -89,14 +118,35 @@ export default {
 			});
 		},
 		showVideoInfo: function(videoData) {
-			let msg = '所属应用：' + videoData.app  + ' 数据流类型：' + videoData.schema + ' 流名称：' + videoData.stream +' 观看人数：'+videoData.readerCount;
+			let msg = '所属应用：' + videoData.app + ' 数据流类型：' + videoData.schema + ' 流名称：' + videoData.stream + ' 观看人数：' + videoData.readerCount;
 			this.$alert(msg, '视频信息', {
 				confirmButtonText: '确定'
 			});
 		},
-		showVideo:function(streamInfo){
-			this.showVideoDialog=true;
-			this.videoUrl=this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream;
+		showVideo: function(streamInfo) {
+			this.showVideoDialog = true;
+			this.videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream;
+			this.currentPlayerInfo = streamInfo;
+		},
+		copySharedInfo: function(data) {
+			console.log('复制内容：' + data);
+			let _this = this;
+			this.$copyText(data).then(
+				function(e) {
+					_this.$message({
+						showClose: true,
+						message: '复制成功',
+						type: 'success'
+					});
+				},
+				function(e) {
+					_this.$message({
+						showClose: true,
+						message: '复制失败，请手动复制',
+						type: 'error'
+					});
+				}
+			);
 		}
 	}
 };

src/main.js

@@ -7,6 +7,8 @@ import 'element-ui/lib/theme-chalk/index.css';
 import router from './router/index.js';
 import axios from 'axios';
 import echarts from 'echarts';
+import VueClipboard from 'vue-clipboard2'
+Vue.use(VueClipboard)
 Vue.use(ElementUI);
 Vue.prototype.$global = global;
 Vue.prototype.$axios = axios;