人脸采集 240 *180

src/components/camara/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <el-button type="primary" style="width:200px" class="mt20" @click="openCamara">
+      {{placeholder}}
+    </el-button>
+    <el-dialog :visible.sync="openCamaraDialog" :close-on-click-modal="false" width="600px">
+      <!--canvas截取流-->
+      <el-row>
+        <el-col :span="12">
+          <video ref="video" v-show="isnotbtn" width="240" height="180" autoplay></video>
+          <div style="mt20" class="tc">
+            <el-button size="medium" type="primary" @click="photograph">采集</el-button>
+          </div>
+        </el-col>
+
+        <el-col :span="12">
+          <canvas ref="canvas" v-show="isnotbtn" width="240" height="180"></canvas>
+          <div style="mt20" class="tc">
+            <el-button size="medium" type="primary" @click="useImage">使用图片</el-button>
+          </div>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="mt20" class="tc">
+            <el-button size="medium" type="primary" @click="closeCamera">关闭页面</el-button>
+          </div>
+        </el-col>
+
+      </el-row>
+
+
+
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
+  export default {
+    data() {
+      return {
+        openCamaraDialog: false,
+        isnotbtn: false,
+        isnotcanvas: false,
+        imageBase64: ''
+      }
+    },
+    props: ['placeholder', 'width'],
+    mounted() {
+      console.log("mounted")
+    },
+    methods: {
+      openCamara() {
+        this.openCamaraDialog = true;
+        this.callCamera()
+      },
+      // 调用摄像头
+      callCamera() {
+        // H5调用电脑摄像头API
+        navigator.mediaDevices
+          .getUserMedia({
+            video: true,
+          })
+          .then((success) => {
+            this.isnotbtn = true
+            // 摄像头开启成功
+            this.$refs["video"].srcObject = success;
+            // 实时拍照效果
+            this.$refs["video"].play();
+          })
+          .catch((error) => {
+            this.$message.error(
+              "摄像头开启失败，请检查摄像头是否可用！或者打开摄影头"
+            );
+            console.error("摄像头开启失败，请检查摄像头是否可用！");
+          });
+      },
+      // 拍照
+      photograph() {
+        let ctx = this.$refs["canvas"].getContext("2d");
+        // 把当前视频帧内容渲染到canvas上
+        ctx.drawImage(this.$refs["video"], 0, 0, 640, 480);
+        // 转base64格式、图片格式转换、图片质量压缩
+        let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
+        this.imageBase64 = imgBase64.replace("data:image/jpeg;base64,", "");
+        // let str = imgBase64.replace("data:image/jpeg;base64,", "");
+        // let strLength = str.length;
+        // let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
+        // let size = (fileLength / 1024).toFixed(2);
+        // console.log(size); // 上传拍照信息  调用接口上传图片 .........
+
+        // 保存到本地
+        // this.dialogCamera = false;
+        // let ADOM = document.createElement("a");
+        // ADOM.href = imgBase64 ;
+        // ADOM.download = new Date().getTime() + ".jpeg";
+        // ADOM.click();
+      },
+      useImage() {
+        let param = {
+          image: this.imageBase64
+        }
+        httpServer("user.addFeatureImg", param).then(res => {
+          this.$emit("onFinish", res.data.url);
+        })
+
+      },
+      // 关闭摄像头
+      closeCamera() {
+        this.openCamaraDialog = false;
+        if (!this.$refs["video"].srcObject) {
+          this.dialogCamera = false;
+          return;
+        }
+        let stream = this.$refs["video"].srcObject;
+        let tracks = stream.getTracks();
+        tracks.forEach((track) => {
+          track.stop();
+        });
+        this.$refs["video"].srcObject = null;
+        this.isnotbtn = false
+
+      },
+    },
+  };
+</script>
+<style scoped>
+  .imagbtn {
+    display: flex;
+    align-content: center;
+    justify-content: start;
+  }
+
+  .querybtn {
+    width: 50px;
+    height: 50px;
+    margin: auto 0;
+    border-radius: 15px;
+    /* font-size:30px; */
+  }
+</style>

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

@@ -5,17 +5,13 @@
       <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-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="18">
+        <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">
@@ -48,6 +44,7 @@
         prevTime: 0,
         isReady: false,
         isnotbtn: false,
+        ontakebtn: false,
         curTimes: 0,
         errMsg:'',
         errCount: 0,
@@ -104,6 +101,9 @@
         return this.$refs.videoPlayer.player
       }
     },
+	destroyed(){
+		this.closeCamera()
+	},
     created() {
       this.startTick()
       this.startMonitor();
@@ -112,9 +112,11 @@
       photograph() {
         let ctx = this.$refs["canvas"].getContext("2d");
         // 把当前视频帧内容渲染到canvas上
-        ctx.drawImage(this.$refs["video"], 0, 0, 320, 240);
+        this.ontakebtn = true
+        ctx.drawImage(this.$refs["video"], 0, 0, 240, 180);
         // 转base64格式、图片格式转换、图片质量压缩
-        let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
+        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}
         httpServer("course.collect", param).then(res => {
@@ -156,10 +158,8 @@
           });
       },
       closeCamera() {
-        if (!this.$refs["video"].srcObject) {
-          this.dialogCamera = false;
-          return;
-        }
+        if( !this.$refs["video"] ) return;
+        if (!this.$refs["video"].srcObject) return;
         let stream = this.$refs["video"].srcObject;
         let tracks = stream.getTracks();
         tracks.forEach((track) => {
@@ -296,7 +296,7 @@
           return;
         }
         // 异常 10秒检查
-        if ( this.errCount > 0 && this.tickNum % 20 == 1){
+        if ( this.errCount > 0 && this.tickNum % 20 == 3){
            this.photograph()
         }else if ( this.tickNum % 60 == 1){
           this.photograph()

src/containers/center/setting/index.vue

@@ -22,7 +22,8 @@
 
               <el-col :span="6" class="col-normal tc">
                 <img :src="userInfo.featureImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.featureImg)">
-                <do-upload @onFinish="setFeatureImg" placeholder="人脸采集"> </do-upload>
+                <!-- <do-upload @onFinish="setFeatureImg" placeholder="人脸采集"> </do-upload> -->
+                <i-camara @onFinish="setFeatureImg" placeholder="人脸采集"/>
               </el-col>
             </el-row>
 
@@ -221,6 +222,7 @@
   import UploadImage from "@/components/upload/index.vue";
   import ImgView from '@/components/upload/imgView.vue';
   import DoUpload from '@/components/upload/index.vue'
+  import ICamara from '@/components/camara/index.vue'
   import rules from "@/utils/rules.js";
   import { mapGetters,mapActions } from "vuex";
   export default {
@@ -268,7 +270,7 @@
     computed: {
     	...mapGetters("user", ["userInfo"])
     },
-    components:{DoUpload,UploadImage,ImgView},
+    components:{DoUpload,UploadImage,ImgView,ICamara},
     methods: {
        ...mapActions("user", ["saveBaseInfo"]),
       isPhone( ){