!1 增加了些，你看看有没有可以合并的。

Merge pull request !1 from __z2xy__/zxdev

.gitignore

@@ -0,0 +1,22 @@
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# git push scripts
+zxPush
+zxPushDev
+zxPull
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+.vsnode_modules/

global.js

@@ -1,10 +1,12 @@
-const host = 'http://10.168.1.22/index/api';
+const serverip="172.16.63.208"
+const host = 'http://' + serverip + '/index/api';
 const secret = '035c73f7-bb6b-4889-a715-d9eb2d1925cc';
-const baseMediaUrl='http://10.168.1.22/';
+const baseMediaUrl='ws://' + serverip + '/';
 function genApiUrl(method){
 	return host+method+"?secret="+secret;
 }
 export default{
+	serverip,
     host,
     secret,
 	genApiUrl,

src/App.vue

@@ -5,7 +5,7 @@
 				<el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
 					<el-menu-item index="/">控制台</el-menu-item>
 					<el-menu-item index="/videoList">视频广场</el-menu-item>
-					<el-menu-item index="3">录像回看</el-menu-item>
+					<el-menu-item index="/videoReplay">录像回看</el-menu-item>
 					<el-menu-item index="4">通道配置</el-menu-item>
 				</el-menu>
 			</el-header>

src/components/videoList.vue

@@ -12,6 +12,7 @@
 				<div class="video-item-title">
 					{{ item.stream }}
 					<el-button icon="el-icon-search" circle size="mini" style="float: right;" @click="showVideoInfo(item)"></el-button>
+					<el-button icon="el-icon-search" circle size="mini" style="float: right;" @click="showVideoHistory(item)"></el-button>
 				</div>
 			</div>
 		</div>
@@ -29,7 +30,9 @@
 			></iframe>
 			<div id="shared" style="text-align: right;">
 				<div style="margin-bottom: 0.5rem;">
-					<!-- <el-button type="primary" size="small" @click="startRecord()">录制</el-button> -->
+					<el-button type="primary" size="small" @click="startRecord()">录制</el-button>
+					<el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>
+					<el-button type="primary" size="small" @click="recordList()">录制列表</el-button>
 				</div>
 				<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
 					<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
@@ -77,7 +80,7 @@ export default {
 	},
 	mounted() {
 		this.initData();
-		this.updateLooper=setInterval(this.initData,3000);
+		this.updateLooper=setInterval(this.initData,10000);
 	},
 	destroyed() {
 		this.$destroy('videojs');
@@ -104,6 +107,11 @@ export default {
 				confirmButtonText: '确定'
 			});
 		},
+		showVideoHistory:function(streamInfo){
+			let msg = '所属应用：' + streamInfo.app + ' 数据流类型：' + streamInfo.schema + ' 流名称：' + streamInfo.stream + ' 观看人数：' + streamInfo.readerCount;
+			this.currentPlayerInfo = streamInfo;
+			
+		},
 		showVideo: function(streamInfo) {
 			this.showVideoDialog = true;
 			this.videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream+".flv";
@@ -132,9 +140,11 @@ export default {
 		startRecord:function(){
 			let that = this;
 			let streamInfo=this.currentPlayerInfo;
+			let startURL=this.$global.genApiUrl('/startRecord') + '&type=1&vhost='+streamInfo.vhost+"&app="+streamInfo.app+"&stream="+streamInfo.stream;
+			console.log(startURL);
 			this.$axios({
 				method: 'get',
-				url: this.$global.genApiUrl('/startRecord') + '&type=0&vhost='+streamInfo.vhost+"&app="+streamInfo.app+"&stream="+streamInfo.stream+"&wait_for_record=1&continue_record=1&customized_path='/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug'"
+				url: startURL
 			}).then(function(res) {
 				console.log(JSON.stringify(res.data));
 				if (res.data.code == 0&&res.data.result) {
@@ -152,9 +162,91 @@ export default {
 				}
 			});
 		},
+		stopRecord:function(){
+			let that = this;
+			let streamInfo=this.currentPlayerInfo;
+			let stopURL=this.$global.genApiUrl('/stopRecord') + '&type=1&vhost='+streamInfo.vhost+"&app="+streamInfo.app+"&stream="+streamInfo.stream;
+			console.log(stopURL);
+			this.$axios({
+				method: 'get',
+				url: stopURL
+			}).then(function(res) {
+				console.log(JSON.stringify(res.data));
+				if (res.data.code == 0&&res.data.result) {
+					that.$message({
+						showClose: true,
+						message: '结束录制',
+						type: 'success'
+					});
+				}else{
+					that.$message({
+						showClose: true,
+						message: res.data.msg,
+						type: 'error'
+					});
+				}
+			});
+		},
+		recordList:function(){
+			let that = this;
+			let streamInfo=this.currentPlayerInfo;
+
+			var date = new Date();
+			var year = date.getFullYear();
+			var month = date.getMonth() + 1;
+			var day = date.getDate();
+			if (month < 10) {
+				month = "0" + month;
+			}
+			if (day < 10) {
+				day = "0" + day;
+			}
+			let nowDate = year + "-" + month + "-" + day;
+
+			let stopURL=this.$global.genApiUrl('/getMp4RecordFile') + '&vhost='+streamInfo.vhost+"&app="+streamInfo.app+"&stream="+streamInfo.stream+'&period='+nowDate;
+
+
+			console.log(stopURL);
+			this.$axios({
+				method: 'get',
+				url: stopURL
+			}).then(function(res) {
+				console.log(JSON.stringify(res.data));
+				if (res.data.code == 0&&res.data) {
+					let mp4files = res.data.data.paths;
+					let rootPath  = res.data.data.rootPath;
+					let weburltemp = rootPath.substr(rootPath.indexOf("record"));
+					let weburl = "http://" + that.$global.serverip + "/" + weburltemp;
+					for(let i in mp4files) {
+						let fullMp4file = weburl + mp4files[i]
+						console.log(fullMp4file);
+					};
+					that.$message({
+						showClose: true,
+						message: '列表获取成功',
+						type: 'success'
+					});
+				}else{
+					that.$message({
+						showClose: true,
+						message: res.data.msg,
+						type: 'error'
+					});
+				}
+			});
+		},
 		getSnap: function(streamInfo) {
+			
 			let videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream+".flv";
-			return this.$global.genApiUrl('/getSnap') + '&timeout_sec=10&expire_sec=30&url='+videoUrl+"&st="+new Date().getTime();
+			console.log("videoUrl:\t" + videoUrl);
+
+			let snapUrl = videoUrl.replace(/^ws/,"http");
+			console.log( 'snapUrl:\t' + snapUrl);
+
+			let fullSnapRequest = this.$global.genApiUrl('/getSnap') + '&timeout_sec=10&expire_sec=30&url='+snapUrl+"&st="+new Date().getTime();
+			console.log( 'fullSnapRequest:\t' + fullSnapRequest);
+
+			return fullSnapRequest;
 		},
 	}
 };

src/components/videoReplay.vue

@@ -0,0 +1,170 @@
+<template>
+	<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>
+		<div class="videoList">
+			<div class="video-item" v-for="(item, index) in videoList">
+				<img src="../assets/play.png" @click="showVideo(item)" />
+				<div class="video-item-title">
+					{{ item.stream }}
+				</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>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'app',
+	components: {},
+	data() {
+		return {
+			videoUrl: '',
+			showVideoDialog: false,
+			videoList: [],
+			videoComponentList: [],
+			currentPlayerInfo: {}, //当前播放对象
+			updateLooper:0,//数据刷新轮训标志
+		};
+	},
+	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() {
+		this.initData();
+		this.updateLooper=setInterval(this.initData,10000);
+	},
+	destroyed() {
+		this.$destroy('videojs');
+		clearTimeout(this.updateLooper);
+	},
+	methods: {
+		initData:function(){
+			this.getVideoList();
+		},
+		getVideoList: function() {
+			let that = this;
+			this.$axios({
+				method: 'get',
+				url: this.$global.genApiUrl('/getMediaList') + '&schema=rtmp'
+			}).then(function(res) {
+				if (res.data.code == 0) {
+					that.videoList = res.data.data;
+				}
+			});
+		},
+		showVideo: function(streamInfo) {
+			this.showVideoDialog = true;
+			this.videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream+".flv";
+			this.currentPlayerInfo = streamInfo;
+		},
+		recordList:function(){
+			let that = this;
+			let streamInfo=this.currentPlayerInfo;
+
+			var date = new Date();
+			var year = date.getFullYear();
+			var month = date.getMonth() + 1;
+			var day = date.getDate();
+			if (month < 10) {
+				month = "0" + month;
+			}
+			if (day < 10) {
+				day = "0" + day;
+			}
+			let nowDate = year + "-" + month + "-" + day;
+
+			let stopURL=this.$global.genApiUrl('/getMp4RecordFile') + '&vhost='+streamInfo.vhost+"&app="+streamInfo.app+"&stream="+streamInfo.stream+'&period='+nowDate;
+
+
+			console.log(stopURL);
+			this.$axios({
+				method: 'get',
+				url: stopURL
+			}).then(function(res) {
+				console.log(JSON.stringify(res.data));
+				if (res.data.code == 0&&res.data) {
+					let mp4files = res.data.data.paths;
+					let rootPath  = res.data.data.rootPath;
+					let weburltemp = rootPath.substr(rootPath.indexOf("record"));
+					let weburl = "http://" + that.$global.serverip + "/" + weburltemp;
+					for(let i in mp4files) {
+						let fullMp4file = weburl + mp4files[i]
+						console.log(fullMp4file);
+					};
+					that.$message({
+						showClose: true,
+						message: '列表获取成功',
+						type: 'success'
+					});
+				}else{
+					that.$message({
+						showClose: true,
+						message: res.data.msg,
+						type: 'error'
+					});
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style>
+.videoList {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+}
+.video-item {
+	position: relative;
+	width: 15rem;
+	height: 10rem;
+	margin-right: 1rem;
+	background-color: #000000;
+}
+.video-item img {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 3rem;
+	height: 3rem;
+}
+.video-item-title {
+	position: absolute;
+	bottom: 0;
+	color: #000000;
+	background-color: #ffffff;
+	line-height: 1.5rem;
+	padding: 0.3rem;
+	width: 14.4rem;
+}
+</style>

src/router/index.js

@@ -3,6 +3,8 @@ import VueRouter from 'vue-router'
 
 import control from '../components/control.vue'
 import videoList from '../components/videoList.vue'
+import videoReplay from '../components/videoReplay.vue'
+import HelloWorld from '../components/HelloWorld.vue'
 Vue.use(VueRouter)
 
 export default new VueRouter({
@@ -15,5 +17,13 @@ export default new VueRouter({
 			path: '/videoList',
 			component: videoList,
 		},
+		{
+			path: '/videoReplay',
+			component: videoReplay,
+		},
+		{
+			path: '/zx',
+			component: HelloWorld,
+		},
 	]
 })

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/bpi': {                                //   以'/bpi'开头的请求会被代理进行转发
-        target: 'http://218.59.173.214:801/index/api',       //   要发向的后台服务器地址  如果后台服务跑在后台开发人员的机器上，就写成 `http://ip:port` 如 `http:192.168.12.213:8081`   ip为后台服务器的ip
+        target: 'http://172.16.63.208:801/index/api',       //   要发向的后台服务器地址  如果后台服务跑在后台开发人员的机器上，就写成 `http://ip:port` 如 `http:192.168.12.213:8081`   ip为后台服务器的ip
         changeOrigin: true                     
       }
     }