gongdecai
/
wangluohuoyun-huozhuapp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<title></title>
		<style>

		</style>
	</head>
	<body>
		<div id='app'>
			<div class="verify-placeholder">
				<div class="verify-placeholder-img"></div>
				<p class="verify-placeholder-text">正面平视手机、保证光线充足<br>请勿遮挡面部</p>
			</div>
			<div class="verify-bottom">
				<ul class="verify-process">
					<li>
						<span class="num">1</span>
						<p class="text">人脸放入框内，点击开始录制</p>
					</li>
					<li>
						<span class="num">2</span>
						<p class="text">录制倒计时<span class="text-tips">（8s）</span>，点击立即结束</p>
					</li>
					<li>
						<span class="num">3</span>
						<p class="text">完成录制，等待验证结果</p>
					</li>
				</ul>
				<button class="verify-btn" @click="getCamera">开始录制</button>
			</div>
			<div class="btn-submit">
				<button class="app-button-warning" size="small" @click="$router.back(-1)">上一步</button>
				<button type="primary" size="small" class="btn">下一步</button>
			</div>
			<!--    人脸检测-->
			<div class="video" v-show="showVideo">
				<div class="video-cover"></div>
				<video :src="url" ref="videoRef" autoplay playsinline x5-video-player-type="h5"></video>
				<!-- 关闭按钮 -->
				<button class="video-close" @click="closeVideo">×</button>
				<button class="video-save" @click="saveVideo">
					{{ isAlreadyRecord ? '结束录制(' + count + 's)' : '开始录制' }}</button>
			</div>
			<video ref="videob" controls="" name="media" v-show="!showVideo" width="100%" height="400"></video>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
	<script src="base64.js"></script>
	<script src="crypto.js"></script>
	<!-- <script src="oss.js"></script> -->
	<!-- <script src="video.js"></script> -->
	<script>
		new Vue({
			el: '#app',
			data: {
				url: '',
				showVideo: false,
				mediaRecorder: null,
				MediaStreamTrack: null,
				isAlreadyRecord: false,
				count: 8,
				countTimer: null,
				recordedBlobs: [],
				compId: ''
			},
			beforeDestroy() {
				this.MediaStreamTrack && this.MediaStreamTrack.stop()
				this.countTimer && clearTimeout(this.countTimer)
			},
			computed: {},

			mounted() {

			},
			watch: {},
			methods: {
				getPolicyBase64() {
					let date = new Date();
					date.setHours(date.getHours() + 87600);
					let srcT = date.toISOString();
					const policyText = {
						"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
						"conditions": [
							["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
						]
					};

					const policyBase64 = Window.base64.encode(JSON.stringify(policyText));
					console.log(policyBase64);
					return policyBase64;
				},
				getSignature(policyBase64) {
					const accesskey = 'FpClTp4OVrRRtHEfi3lBOWUoLxKieW';
					// console.log('video.js')
					// console.log(Crypto)
					const bytes = Window.Crypto.HMAC(Window.Crypto.SHA1, policyBase64, accesskey, {
						asBytes: true
					})
					const signature = Window.Crypto.util.bytesToBase64(bytes);
					// console.log(signature);
					return signature;
				},
				uploadFile(policyBase64) {
					var formdata = new FormData()
					// const policyBase64 = this.getPolicyBase64();

					console.log("policyBase64-----------------------")
					console.log(policyBase64)
					const signature = this.getSignature(policyBase64); //获取签名
					console.log("signatur--------------------------------------e")
					console.log(signature)
					formdata.append("key", "https://taohaoliang.oss-cn-beijing.aliyuncs.com")
					formdata.append("policy", policyBase64)
					formdata.append("OSSAccessKeyId", 'LTAI4G9c14PgKvM23WZ9zrpc')
					formdata.append("signature", signature)
					formdata.append("success_action_status", '200')
					$.ajax({
						type: "POST",
						contentType: "application/json;charset=UTF-8",
						url: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com',
						success: function(result) {
							console.log("result", result);


						},
						//请求失败，包含具体的错误信息
						error: function(e) {
							console.log(e);
							console.log(e.status);
							console.log(e.responseText);
						}
					});
				},
				// 调用摄像头 开始录制
				getCamera() {
					// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
					let constraints = {
						audio: true,
						video: {
							facingMode: 'user' // 优先调前置摄像头
						}
					}
					console.log('--------------')
					console.log(navigator)
					// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
					if (navigator.mediaDevices === undefined) {
						navigator.mediaDevices = {}
					}
					// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
					// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
					if (navigator.mediaDevices.getUserMedia === undefined) {
						navigator.mediaDevices.getUserMedia = function(constraints) {
							// 首先，如果有getUserMedia的话，就获得它
							//   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
							var getUserMedia = navigator.getUserMedia ||
								navigator.webkitGetUserMedia ||
								navigator.mozGetUserMedia
							// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
							if (!getUserMedia) {
								this.$messageBox.alert('该浏览器不支持getUserMedia，请使用其他浏览器')
								return Promise.reject(new Error(
									'getUserMedia is not implemented in this browser'))
							}
							// 否则，为老的navigator.getUserMedia方法包裹一个Promise
							return new Promise(function(resolve, reject) {
								getUserMedia.call(navigator, constraints, resolve, reject)
							})
						}
					}
					navigator.mediaDevices.getUserMedia(constraints)
						.then((stream) => {
							this.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream
								.getTracks()[0]
							console.log(stream)
							console.log(this.MediaStreamTrack)
							// 显示录制框
							this.showVideo = true
							this.isAlreadyRecord = false
							let winURL = window.URL || window.webkitURL
							if ('srcObject' in this.$refs.videoRef) {
								this.$refs.videoRef.srcObject = stream
							} else {
								this.$refs.videoRef.src = winURL.createObjectURL(stream)
							}
							console.log(this.$refs.videoRef)
							this.$refs.videoRef.onloadedmetadata = e => {
								// 播放视频
								this.$refs.videoRef.play()
							}
							let options = {
								videoBitsPerSecond: 2500000
							}
							this.mediaRecorder = new MediaRecorder(stream, options)
						})
						.catch((err) => {
							console.log(err)
							this.$messageBox.alert('摄像头开启失败，请检查摄像头是否授权或是否可用！')
						})
				},
				// 关闭活体检测
				closeVideo() {
					this.recordedBlobs = ''
					this.isAlreadyRecord = false
					this.MediaStreamTrack && this.MediaStreamTrack.stop()
					this.countTimer && clearTimeout(this.countTimer)
					this.$router.go(0)
				},
				// 录制倒计时
				countDown() {
					let that = this
					let sendTime = Math.round(+new Date() / 1000)
					return function walk() {
						that.countTimer = setTimeout(function() {
							that.countTimer && clearTimeout(that.countTimer)
							let diff = sendTime + 8 - Math.round(+new Date() / 1000)
							if (diff > 0) {
								that.count = diff
								walk()
							} else {
								console.log('倒计时结束')
								this.showVideo = false
								console.log(this.url)
								console.log(this.MediaStreamTrack)
							}
						}, 1000)
					}
				},
				// 保存录制视频
				saveVideo() {
					if (this.isAlreadyRecord) {
						this.countTimer && clearTimeout(this.countTimer)
						this.showVideo = false
						//当录制的数据可用时
						this.mediaRecorder.ondataavailable = (e) => {
							if (e.data && e.data.size > 0) {
								this.recordedBlobs.push(e.data)
							}
						}
						this.mediaRecorder.stop()
						setTimeout(() => {
							var blob = new Blob(this.recordedBlobs, {
								type: 'video/mp4'
							})

							// console.log(blob)
							this.isAlreadyRecord = false
							this.MediaStreamTrack && this.MediaStreamTrack.stop()
							var reader = new FileReader();
							reader.readAsDataURL(blob, 'utf-8')
							reader.onload = () => {

								console.log('11111111111111111')
								console.log(reader.result); // base64格式
								this.$refs.videob.src = reader.result
								this.uploadFile(reader.result)

								console.log(reader)

							}
						}, 1000)
					} else {
						this.count = 8
						this.isAlreadyRecord = true
						this.mediaRecorder.start(8000)
						this.countDown()()
					}
				},
				changeVideo(e) {
					let file = this.$refs.videoFile.files
					console.log(file)
				}
			}
		})
	</script>

</html>