|
|
@@ -5,27 +5,22 @@
|
|
|
<strong>/</strong>
|
|
|
<span>{{media.duration|useTime}}</span>
|
|
|
</h2>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6" style="width: 120px;">
|
|
|
+ <div class="v-wrap-marks" style="width: 110px;">
|
|
|
+ <video ref="video" v-show="isnotbtn" width="110" height="110" autoplay></video>
|
|
|
+ <div class="tc" style="margin-top: 64px; margin-left: 120px;">
|
|
|
+ <canvas ref="canvas" v-show="isnotbtn" width="240" height="210"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
|
|
|
- <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true" @pause="onPlayerPause($event)"
|
|
|
- @play="onPlayerStart($event)" @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)"
|
|
|
- :globalOptions="{controls:true}" :options="options">
|
|
|
- </video-player>
|
|
|
-
|
|
|
- <el-row style="margin-top:20px;">
|
|
|
- <el-col :span="12">
|
|
|
- <el-card class="p20">
|
|
|
- <h3>我是视频</h3>
|
|
|
- <video ref="video" v-show="isnotbtn" width="240" height="210" autoplay></video>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="12">
|
|
|
- <el-card class="p20">
|
|
|
- <h3>采集照片</h3>
|
|
|
- <canvas ref="canvas" v-show="isnotbtn" width="240" height="210"></canvas>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true" @pause="onPlayerPause($event)"
|
|
|
+ @play="onPlayerStart($event)" @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)"
|
|
|
+ :globalOptions="{controls:true}" :options="options">
|
|
|
+ </video-player>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
@@ -54,6 +49,7 @@
|
|
|
isReady: false,
|
|
|
isnotbtn: false,
|
|
|
curTimes: 0,
|
|
|
+ errMsg:'11111',
|
|
|
onPlay: false
|
|
|
}
|
|
|
},
|
|
|
@@ -115,16 +111,16 @@
|
|
|
photograph() {
|
|
|
let ctx = this.$refs["canvas"].getContext("2d");
|
|
|
// 把当前视频帧内容渲染到canvas上
|
|
|
- ctx.drawImage(this.$refs["video"], 0, 0, 240, 210);
|
|
|
+ ctx.drawImage(this.$refs["video"], 0, 0, 320, 240);
|
|
|
// 转base64格式、图片格式转换、图片质量压缩
|
|
|
let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
|
|
|
-
|
|
|
let str = imgBase64.replace("data:image/jpeg;base64,", "");
|
|
|
let param ={id:this.media.id, image: str}
|
|
|
httpServer("course.collect", param).then(res => {
|
|
|
let {msg, pause} = res.data
|
|
|
if (pause) this.doPause();
|
|
|
- if ( msg ) this.$message.errorMsg(msg, 5);
|
|
|
+ if ( msg ) this.$message.errorMsg(msg, 2);
|
|
|
+ this.errMsg = msg||'';
|
|
|
})
|
|
|
},
|
|
|
callCamera() {
|
|
|
@@ -163,7 +159,7 @@
|
|
|
startTick() {
|
|
|
let tick = this.tryTick;
|
|
|
if (this.timer) clearInterval(this.timer);
|
|
|
- this.timer = setInterval(tick, 5 * 1000);
|
|
|
+ this.timer = setTimeout(tick, 1 * 1000);
|
|
|
},
|
|
|
stopTick() {
|
|
|
if (this.timer) clearInterval(this.timer);
|
|
|
@@ -175,6 +171,8 @@
|
|
|
} catch (err) {
|
|
|
that.reportErr("play", '' + err.message)
|
|
|
}
|
|
|
+ if (this.timer) clearInterval(this.timer);
|
|
|
+ this.timer = setTimeout(this.tryTick, 1 * 1000);
|
|
|
},
|
|
|
playerReadied(audio) {
|
|
|
console.log("playerReadied", audio)
|
|
|
@@ -276,9 +274,13 @@
|
|
|
this.$message.errorMsg("需要安装摄像头才能学习", 2);
|
|
|
return;
|
|
|
}
|
|
|
- if( this.tickNum % 10 == 1){
|
|
|
+ if( this.tickNum % 60 == 5){
|
|
|
this.photograph()
|
|
|
}
|
|
|
+ // 每5秒一次心跳
|
|
|
+ if( this.tickNum % 5 != 0){
|
|
|
+ return;
|
|
|
+ }
|
|
|
// 主动暂停
|
|
|
let myPlayer = this.$refs.videoPlayer.player;
|
|
|
let curTimes = parseInt(myPlayer.currentTime());
|
