自动关闭摄像头

src/containers/center/play/components/iMedia.vue

@@ -6,17 +6,17 @@
       <span>{{media.duration|useTime}}</span>
     </h2>
     <el-row style="width: 900px;">
-        <el-col :span="8" style="width: 250px;">
-            <video  ref="video"  v-show="isnotbtn" width="240" height="180" autoplay></video>
-            <canvas ref="canvas" v-show="ontakebtn" width="240" height="180"></canvas>
-        </el-col>
+      <el-col :span="8" style="width: 250px;">
+        <video ref="video" v-show="isnotbtn" width="240" height="180" autoplay></video>
+        <canvas ref="canvas" v-show="ontakebtn" width="240" height="180"></canvas>
+      </el-col>
 
-        <el-col :span="16" style="width: 640px;">
-          <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-col :span="16" style="width: 640px;">
+        <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>
@@ -46,7 +46,7 @@
         isnotbtn: false,
         ontakebtn: false,
         curTimes: 0,
-        errMsg:'',
+        errMsg: '',
         errCount: 0,
         onPlay: false
       }
@@ -101,9 +101,10 @@
         return this.$refs.videoPlayer.player
       }
     },
-	destroyed(){
-		this.closeCamera()
-	},
+    beforeDestroy() {
+      this.destroyTimer()
+      this.closeCamera()
+    },
     created() {
       this.startTick()
       this.startMonitor();
@@ -118,22 +119,28 @@
         let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 1); // 由字节转换为KB 判断大小
         this.ontakebtn = false
         let str = imgBase64.replace("data:image/jpeg;base64,", "");
-        let param ={id:this.media.id, image: str}
+        let param = {
+          id: this.media.id,
+          image: str
+        }
         httpServer("course.collect", param).then(res => {
-            let {msg, pause} = res.data
-            if ( msg )  this.$message.errorMsg(msg, 10);
-            this.errMsg = msg||'';
-            if( msg ){
-              this.errCount ++
-            }else{
-              this.errCount = 0;
-            }
-            if( this.errCount >=2){
-              this.doPause();
-            }
+          let {
+            msg,
+            pause
+          } = res.data
+          if (msg) this.$message.errorMsg(msg, 10);
+          this.errMsg = msg || '';
+          if (msg) {
+            this.errCount++
+          } else {
+            this.errCount = 0;
+          }
+          if (this.errCount >= 2) {
+            this.doPause();
+          }
         })
       },
-      destroyTimer(){
+      destroyTimer() {
         if (this.timer) clearInterval(this.timer);
       },
       callCamera() {
@@ -143,7 +150,7 @@
             video: true,
           })
           .then((success) => {
-            this.isnotbtn=true
+            this.isnotbtn = true
             // 摄像头开启成功
             this.$refs["video"].srcObject = success;
             // 实时拍照效果
@@ -153,12 +160,13 @@
             this.$message.error(
               "摄像头开启失败，请检查摄像头是否可用！或者打开摄影头"
             );
-            this.isnotbtn=false
+            this.isnotbtn = false
             console.error("摄像头开启失败，请检查摄像头是否可用！");
           });
       },
       closeCamera() {
-        if( !this.$refs["video"] ) return;
+        console.log("closeCamera")
+        if (!this.$refs["video"]) return;
         if (!this.$refs["video"].srcObject) return;
         let stream = this.$refs["video"].srcObject;
         let tracks = stream.getTracks();
@@ -166,7 +174,7 @@
           track.stop();
         });
         this.$refs["video"].srcObject = null;
-        this.isnotbtn=false
+        this.isnotbtn = false
       },
       startTick() {
         let tick = this.tryTick;
@@ -284,25 +292,25 @@
           return;
         }
 
-        if( !this.isnotbtn && this.onPlay ){
+        if (!this.isnotbtn && this.onPlay) {
           this.$message.errorMsg("需要安装摄像头才能学习", 2);
           this.doPause()
           return;
         }
-        if( this.errCount > 3 ){
+        if (this.errCount > 3) {
           this.$message.errorMsg("人脸不在摄像头上", 5);
           this.destroyTimer()
           this.$emit("close");
           return;
         }
         // 异常 10秒检查
-        if ( this.errCount > 0 && this.tickNum % 20 == 3){
-           this.photograph()
-        }else if ( this.tickNum % 60 == 1){
+        if (this.errCount > 0 && this.tickNum % 20 == 3) {
+          this.photograph()
+        } else if (this.tickNum % 60 == 1) {
           this.photograph()
         }
         // 每5秒一次心跳
-        if( this.tickNum % 5 != 0){
+        if (this.tickNum % 5 != 0) {
           return;
         }
         // 主动暂停