|
|
@@ -5,11 +5,11 @@
|
|
|
<view style="width: 1200px;margin: auto;">{{paper.title}}</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="video-box" id="video-box" @click="takePhoto" v-show="showVideo">
|
|
|
+ <view class="video-box" id="video-box" v-show="showVideo">
|
|
|
<video id="video" style="width: 100%;height: 100%;" :autoplay="true" :controls="false" :show-center-play-btn="false"></video>
|
|
|
- <canvas id="canvas" style="width: 100%;height: 100%;" canvas-id="canvas"></canvas>
|
|
|
+ <canvas id="canvas" style="width: 100%;height: 100%;position: absolute;top:100000px;" canvas-id="canvas"></canvas>
|
|
|
</view>
|
|
|
- <img :src="imgUrl" ></img>
|
|
|
+ <!-- <img :src="imgUrl" ></img> -->
|
|
|
<view class="project-content ddflex">
|
|
|
<!-- 考试区域 -->
|
|
|
<view class="test-box">
|
|
|
@@ -204,23 +204,25 @@
|
|
|
canvas:null,
|
|
|
ctx:null,
|
|
|
imgUrl:null,
|
|
|
- showVideo:false
|
|
|
+ showVideo:false,
|
|
|
+
|
|
|
+ takePhotoTime:10*60,//抓拍时间间隔，单位s
|
|
|
}
|
|
|
},
|
|
|
onReady() {},
|
|
|
async onLoad(options) {
|
|
|
this.paperId = options.paperId;
|
|
|
this.testId = options.testId
|
|
|
+ // 摄像头
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ this.video = query.select('#video')
|
|
|
+ this.canvas = query.select('#canvas');
|
|
|
+ await this.test()
|
|
|
|
|
|
console.log(this.userInfo)
|
|
|
// 需要先判断用户是否还能考试
|
|
|
await this.getQuests();
|
|
|
|
|
|
- // 摄像头
|
|
|
- // const query = uni.createSelectorQuery().in(this);
|
|
|
- // this.video = query.select('#video')
|
|
|
- // this.canvas = query.select('#canvas');
|
|
|
- // this.test()
|
|
|
|
|
|
|
|
|
// 考生信息
|
|
|
@@ -231,6 +233,7 @@
|
|
|
},
|
|
|
onUnload() {
|
|
|
// uni.clearStorageSync();
|
|
|
+ clearTimeout(this.ptime);
|
|
|
},
|
|
|
methods: {
|
|
|
// 考试信息
|
|
|
@@ -348,8 +351,18 @@
|
|
|
_ts.times = times;
|
|
|
_ts.ptime = setTimeout(function() {
|
|
|
_ts.time = time - 1;
|
|
|
+
|
|
|
+
|
|
|
+ if(((_ts.paper.time*60)-(_ts.time))%(_ts.takePhotoTime)==0){
|
|
|
+ _ts.takePhoto()
|
|
|
+ }
|
|
|
_ts.setTime();
|
|
|
}, 1000);
|
|
|
+
|
|
|
+ // if(((_ts.paper.time*60) -(_ts.time*60)%(10))%(10)==0){
|
|
|
+ // let a = (_ts.paper.time*60) -(_ts.time*60)%(10)
|
|
|
+ // console.log((_ts.paper.time*60) -(_ts.time*60),'拍照')
|
|
|
+ // }
|
|
|
}, //下次继续
|
|
|
// 秒转换时分秒
|
|
|
timeChangeHMS(time){
|
|
|
@@ -621,22 +634,13 @@
|
|
|
}
|
|
|
}).exec();
|
|
|
ctx.drawImage(video, 0, 0, videoInfo.width, videoInfo.height);
|
|
|
- console.log(this.dataURLtoBlob(canvas.toDataURL(),'11'))
|
|
|
- // setTimeout(() => {
|
|
|
- // uni.canvasToTempFilePath({
|
|
|
- // canvasId: 'canvas',
|
|
|
- // destWidth: 60,
|
|
|
- // destHeight: 40,
|
|
|
- // success: function (res) {
|
|
|
- // console.log(res.tempFilePath) //图片路径
|
|
|
- // // resolve(res.tempFilePath)
|
|
|
- // _this.imgUrl = res.tempFilePath
|
|
|
- // },
|
|
|
- // fail: function (res) {
|
|
|
- // console.log(res.errMsg)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }, 100)
|
|
|
+ // console.log(this.dataURLtoBlob(canvas.toDataURL(),'11'))
|
|
|
+ req.uploadFile('/api/upload', canvas.toDataURL(), res => {
|
|
|
+ let userPhotoData = {examId:this.testId,image:res.src,paperId:this.paperId}
|
|
|
+ req.postRequest('/api/v3/exam/user/manager/image',userPhotoData,res=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ },false);
|
|
|
},
|
|
|
dataURLtoBlob(dataurl) {
|
|
|
var arr = dataurl.split(','),
|
|
|
@@ -667,71 +671,74 @@
|
|
|
});
|
|
|
},
|
|
|
test(){
|
|
|
- // var video = document.querySelector('video');
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- var video = query.select('#video')
|
|
|
- console.log('video',video)
|
|
|
- // 兼容代码
|
|
|
- window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
|
|
|
- // 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象
|
|
|
- if (navigator.mediaDevices === undefined) {
|
|
|
- navigator.mediaDevices = {};
|
|
|
- }
|
|
|
- console.log('navigator.mediaDevices',navigator.mediaDevices)
|
|
|
- // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
|
|
|
- // 使用getUserMedia，因为它会覆盖现有的属性。
|
|
|
- // 这里，如果缺少getUserMedia属性，就添加它。
|
|
|
- if (navigator.mediaDevices.getUserMedia === undefined) {
|
|
|
- navigator.mediaDevices.getUserMedia = function(constraints) {
|
|
|
- // 首先获取现存的getUserMedia(如果存在)
|
|
|
- var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
|
- // 有些浏览器不支持，会返回错误信息
|
|
|
- // 保持接口一致
|
|
|
- if (!getUserMedia) { //不存在则报错
|
|
|
- return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
|
|
|
- }
|
|
|
- // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
|
|
|
- return new Promise(function(resolve, reject) {
|
|
|
- getUserMedia.call(navigator, constraints, resolve, reject);
|
|
|
- });
|
|
|
+ return new Promise((r,j)=>{
|
|
|
+ // var video = document.querySelector('video');
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ var video = query.select('#video')
|
|
|
+ console.log('video',video)
|
|
|
+ // 兼容代码
|
|
|
+ window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
|
|
|
+ // 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象
|
|
|
+ if (navigator.mediaDevices === undefined) {
|
|
|
+ navigator.mediaDevices = {};
|
|
|
}
|
|
|
- }
|
|
|
- //摄像头调用配置
|
|
|
- var mediaOpts = {
|
|
|
- audio: false,
|
|
|
- video: { facingMode: "user"}
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- let that=this;
|
|
|
- navigator.mediaDevices.getUserMedia(mediaOpts).then(function(stream) {
|
|
|
- that.mediaStreamTrack = stream;
|
|
|
- video = document.querySelector('video');
|
|
|
- console.log('video = document.querySelector(video);',video)
|
|
|
- // 旧的浏览器可能没有srcObject
|
|
|
- if ("srcObject" in video) {
|
|
|
- video.srcObject = stream
|
|
|
- that.video.srcObject = stream
|
|
|
- } else {
|
|
|
- // 避免在新的浏览器中使用它，因为它正在被弃用。
|
|
|
- video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
|
|
- that.video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
|
|
- }
|
|
|
- video.play();
|
|
|
- that.showVideo = true
|
|
|
- }).catch(function (err) {
|
|
|
- console.log(err)
|
|
|
- uni.showModal({
|
|
|
- title:'提示',
|
|
|
- content:'未找到摄像头',
|
|
|
- showCancel:false,
|
|
|
- success() {
|
|
|
- // uni.navigateBack({
|
|
|
-
|
|
|
- // })
|
|
|
+ console.log('navigator.mediaDevices',navigator.mediaDevices)
|
|
|
+ // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
|
|
|
+ // 使用getUserMedia，因为它会覆盖现有的属性。
|
|
|
+ // 这里，如果缺少getUserMedia属性，就添加它。
|
|
|
+ if (navigator.mediaDevices.getUserMedia === undefined) {
|
|
|
+ navigator.mediaDevices.getUserMedia = function(constraints) {
|
|
|
+ // 首先获取现存的getUserMedia(如果存在)
|
|
|
+ var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
|
+ // 有些浏览器不支持，会返回错误信息
|
|
|
+ // 保持接口一致
|
|
|
+ if (!getUserMedia) { //不存在则报错
|
|
|
+ return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
|
|
|
+ }
|
|
|
+ // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ getUserMedia.call(navigator, constraints, resolve, reject);
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
- });
|
|
|
+ }
|
|
|
+ //摄像头调用配置
|
|
|
+ var mediaOpts = {
|
|
|
+ audio: false,
|
|
|
+ video: { facingMode: "user"}
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ let that=this;
|
|
|
+ navigator.mediaDevices.getUserMedia(mediaOpts).then(function(stream) {
|
|
|
+ that.mediaStreamTrack = stream;
|
|
|
+ video = document.querySelector('video');
|
|
|
+ console.log('video = document.querySelector(video);',video)
|
|
|
+ // 旧的浏览器可能没有srcObject
|
|
|
+ if ("srcObject" in video) {
|
|
|
+ video.srcObject = stream
|
|
|
+ that.video.srcObject = stream
|
|
|
+ } else {
|
|
|
+ // 避免在新的浏览器中使用它，因为它正在被弃用。
|
|
|
+ video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
|
|
+ that.video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
|
|
+ }
|
|
|
+ video.play();
|
|
|
+ that.showVideo = true
|
|
|
+ r()
|
|
|
+ }).catch(function (err) {
|
|
|
+ console.log(err)
|
|
|
+ uni.showModal({
|
|
|
+ title:'提示',
|
|
|
+ content:'未找到摄像头',
|
|
|
+ showCancel:false,
|
|
|
+ success() {
|
|
|
+ uni.navigateBack({
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ })
|
|
|
},
|
|
|
},
|
|
|
}
|
xionghaojie