新增视频页面

package.json

@@ -64,6 +64,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "glslify": "^7.1.1",
     "handtrackjs": "^0.1.5",
+    "jsmpeg": "^1.0.0",
     "meshline": "^2.0.3",
     "qrcode": "^1.4.4",
     "stats.js": "^0.17.0",

src/assets/css/global.less

@@ -132,14 +132,13 @@
 // }
 @font-face {
   font-family: 'iconfont';  /* Project id 3110299 */
-  src: url('//at.alicdn.com/t/font_3110299_0vszi18dwnah.eot?t=1640861933002'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.eot?t=1640942389955'); /* IE9 */
-  src: url('//at.alicdn.com/t/font_3110299_0vszi18dwnah.eot?t=1640861933002#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  src: url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.eot?t=1640942389955#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-       url('//at.alicdn.com/t/font_3110299_0vszi18dwnah.woff?t=1640861933002') format('woff'),
+       url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.woff?t=1640942389955') format('woff'),
-       url('//at.alicdn.com/t/font_3110299_0vszi18dwnah.ttf?t=1640861933002') format('truetype'),
+       url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.ttf?t=1640942389955') format('truetype'),
-       url('//at.alicdn.com/t/font_3110299_0vszi18dwnah.svg?t=1640861933002#iconfont') format('svg');
+       url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.svg?t=1640942389955#iconfont') format('svg');
 }
-
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;

src/page/index/HandTrack/index.vue

@@ -63,8 +63,6 @@ import Stats from "stats";
 import {
 	IEngine,
 	Load,
-	IHandTrackingApi,
-	MediaStreamErrorEnum,
 	EventEnum,
 } from "@handtracking.io/yoha";
 import * as THREE from "three";

src/page/index/Home/index.vue

@@ -55,17 +55,25 @@
 					</div>
 					<p class="weui-grid__label">摄像机</p>
 				</div>
-				<div class="weui-grid" style="opacity: 0.5" @click="jump(5)">
+				<div
+					class="weui-grid link"
+					style="opacity: 0.5"
+					@click="jump(5)"
+				>
 					<div class="weui-grid__icon">
 						<span class="iconfont">&#xe602;</span>
 					</div>
 					<p class="weui-grid__label">手势检测</p>
 				</div>
-				<div class="weui-grid" style="opacity: 0.5">
+				<div
+					class="weui-grid link"
+					style="opacity: 0.5"
+					@click="jump(6)"
+				>
 					<div class="weui-grid__icon">
-						<span class="iconfont">&#xe614;</span>
+						<span class="iconfont">&#xe607;</span>
 					</div>
-					<p class="weui-grid__label">...</p>
+					<p class="weui-grid__label">视频</p>
 				</div>
 			</div>
 		</div>
@@ -117,6 +125,10 @@ export default {
 				this.$router.push({
 					name: "HandTrack",
 				});
+			} else if (id == 6) {
+				this.$router.push({
+					name: "Video",
+				});
 			}
 		},
 		showTips() {},

src/page/index/Video/index.vue

@@ -0,0 +1,90 @@
+<!--
+ * @Author: your name
+ * @Date: 2020-08-28 15:20:15
+ * @LastEditTime: 2020-10-10 17:19:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
+-->
+<template>
+	<div class="video-container">
+		<div class="info">JSMPEG播放器示例</div>
+		<div class="video-box">
+			<canvas class="video" ref="canvas"></canvas>
+			<div class="play-icon" @click="playVideo">
+				<span class="iconfont">&#xe608;</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+// @ is an alias to /src
+import jsmpeg from "jsmpeg";
+import gsap from "gsap";
+
+export default {
+	name: "Index",
+	components: {},
+	mounted() {
+		this.initVideo();
+	},
+	methods: {
+		initVideo() {
+			this.player = new jsmpeg("//cdn.szxgl.cn/scl/download/out.ts", {
+				canvas: this.$refs.canvas,
+				autoplay: false,
+				audio: true,
+				throttled: false,
+				loop: false,
+				onSourceCompleted: () => {
+					console.log("Source Completed");
+				},
+			});
+		},
+		playVideo(e) {
+			this.player.play();
+			gsap.to(e.target, { autoAlpha: 0 });
+		},
+	},
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.video-container {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-content: center;
+	align-items: center;
+	.info {
+		text-align: center;
+		line-height: 50px;
+		font-size: 30px;
+		color: #fff;
+		margin: 60px auto;
+	}
+	.video-box {
+		.prLayout(95%,auto);
+		.video {
+			.prLayout(100%,100%);
+			border-radius: 30px;
+		}
+
+		.play-icon {
+			.paLayout(50%,50%,100px,100px,100);
+			transform: translate(-50%, -50%);
+			color: #fff;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-content: center;
+			align-items: center;
+			cursor: pointer;
+			.iconfont {
+				font-size: 80px;
+			}
+		}
+	}
+}
+</style>

src/page/index/router/index.js

@@ -14,6 +14,7 @@ import AR from '../AR/index.vue'
 import ARHit from '../ARHit/index.vue'
 import Camera from '../Camera/index.vue'
 import HandTrack from '../HandTrack/index.vue'
+import Video from '../Video/index.vue'
 
 
 
@@ -83,6 +84,15 @@ const routes = [
 			keepAlive: false, // 是否保持活跃
 		},
 	},
+	{
+		path: "/video",
+		name: "Video",
+		component: Video,
+		meta: {
+			title: "Video", // 标题
+			keepAlive: false, // 是否保持活跃
+		},
+	},
 
 
 	// {