拍照

pages2/class/questionBank.vue

@@ -775,12 +775,13 @@
       </view>
     </u-popup>
     <!-- 节卷不需要拍照 -->
-    <u-mask :show="examType != 2 && photoPopup">
+    <!-- :show="examType != 2 && photoPopup" -->
+    <u-popup v-model="photoPopup" mode="bottom" border-radius="40" >
       <!-- 播放前拍照start -->
+      <!-- :mask-close-able="false" -->
+        <!-- style="bottom: 0; position: fixed; width: 100%; z-index: 999" -->
       <view
         v-if="examType != 2 && photoPopup"
-        :mask-close-able="false"
-        style="bottom: 0; position: fixed; width: 100%; z-index: 999"
       >
         <view class="photoBox">
           <view class="photoTop">
@@ -800,6 +801,7 @@
               class="center_camera"
               v-if="photoPopup && isTaking"
             >
+            <!-- #ifdef MP-WEIXIN -->
               <camera
                 device-position="front"
                 flash="off"
@@ -817,10 +819,26 @@
                   <cover-view class="headTake_down color"></cover-view>
                 </cover-view>
               </camera>
+              <!-- #endif -->
+              <!-- #ifdef H5 -->
+              <video
+                :controls='false'
+                id="video"
+                width="400"
+                height="300"
+                class="photo_v"
+              ></video>
+              <view class="mask"></view>
+              <!-- #endif -->
+            </view>
+            <view class="custom" v-if="!isTaking">
+              <!-- #ifdef MP-WEIXIN -->
+              <image :src="avatarUrl" mode=""></image>
+              <!-- #endif -->
+              <!-- #ifdef H5 -->
+              <image :src="faceUrl" mode=""></image>
+              <!-- #endif -->
             </view>
-            <view class="custom" v-if="!isTaking"
-              ><image :src="avatarUrl" mode=""></image
-            ></view>
           </view>
           <view class="photoBoxbtns">
             <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
@@ -843,7 +861,7 @@
           </view>
         </view>
       </view>
-    </u-mask>
+    </u-popup>
 
     <!-- 拍照提示 -->
     <popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto='toTakePhoto()'></popup-photo>
@@ -905,6 +923,8 @@ export default {
       uploadLock: false, //上传图片
       examData: {},
       popupPhotoShow: false,
+      // h5
+      faceUrl: "",
     };
   },
   watch: {
@@ -993,6 +1013,33 @@ export default {
       this.bankExam();
     }
   },
+  onShow() {
+    // this.photoPopup = true;
+    // this.isTaking = true;
+    // if (
+    //   (window.navigator.mediaDevices &&
+    //     window.navigator.mediaDevices.getUserMedia) ||
+    //   window.navigator.getUserMedia ||
+    //   window.navigator.webkitGetUserMedia ||
+    //   window.navigator.mozGetUserMedia
+    // ) {
+    //   console.log("getUserMedia----");
+    //   // 调用用户媒体设备, 访问摄像头
+    //   this.getUserMedia(
+    //     {
+    //       video: {
+    //         width: 400,
+    //         height: 300,
+    //       },
+    //     },
+    //     this.photographSuccess,
+    //     this.photographError
+    //   );
+    // } else {
+    //   console.log("1111没有摄像");
+    //   this.photographError();
+    // }
+  },
   onUnload() {
     if (this.isSubmit) {
       clearInterval(this.timer);
@@ -1044,6 +1091,15 @@ export default {
     },
     reTake() {
       this.isTaking = true;
+      // #ifdef H5
+      this.faceUrl = "";
+      this.getUserMedia({
+        video: {
+          width: 400,
+          height: 300,
+        },
+      });
+      // #endif
     },
     postStudyRecord() {
       let self = this;
@@ -1105,6 +1161,54 @@ export default {
             self.$method.showToast("上传路径报错" + JSON.stringify(res.data));
             return;
           }
+          let filePath = "";
+          // #ifdef H5
+          var localData = options; //dataUrl为base64位
+          let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码，去掉data:image/png;base64部分
+          let length = base.length;
+          let url = new Uint8Array(length);
+          while (length--) {
+            url[length] = base.charCodeAt(length);
+          }
+          filePath = new File([url], "a.jpg", {
+            type: "image/jpg",
+          });
+          console.log("filePath:", filePath);
+
+          uni.uploadFile({
+            url: ossToken.host,
+            name: "file",
+            file: filePath,
+            fileType: "image",
+            header: {
+              AuthorizationToken: "WX " + uni.getStorageSync("token"),
+            },
+            formData: {
+              key: ossToken.dir,
+              OSSAccessKeyId: ossToken.accessid,
+              policy: ossToken.policy,
+              Signature: ossToken.signature,
+              callback: ossToken.callback,
+              success_action_status: 200,
+            },
+            success: (result) => {
+              this.$u.toast("上传成功");
+              this.ossAvatarUrl = ossToken.dir;
+              console.log("h5上传成功--:", this.ossAvatarUrl);
+              resolve();
+            },
+            fail: (error) => {
+              console.log("h5上传失败:", error)
+              uni.showToast({
+                title: "上传接口报错，请重新拍照上传" + error,
+                icon: "none",
+              });
+              this.openPhoto();
+              return;
+            },
+          });
+          // #endif
+          // #ifdef MP-WEIXIN
           uni.uploadFile({
             url: ossToken.host,
             name: "file",
@@ -1143,12 +1247,14 @@ export default {
               return;
             },
           });
+          // #endif
         });
       });
     },
     imageInfos() {
       var self = this;
-      return new Promise((resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
+        // #ifdef MP-WEIXIN
         uni.getImageInfo({
           src: self.avatarUrl,
           success: async (res) => {
@@ -1189,6 +1295,11 @@ export default {
             }
           },
         });
+        // #endif
+        // #ifdef H5
+        const waitUpload = await this.uploadFile(this.faceUrl, 0);
+        resolve(waitUpload);
+        // #endif
       });
     },
     /**
@@ -1196,6 +1307,7 @@ export default {
      */
     faceRecognition() {
       return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
         let fileSystem = uni.getFileSystemManager();
         fileSystem.readFile({
           filePath: `${this.avatarUrl}`,
@@ -1209,49 +1321,58 @@ export default {
               orderGoodsId: this.orderGoodsId,
               gradeId: this.gradeId,
             })
-            
-            let timer = setTimeout(() => {
-              uni.showToast({
-                icon: "none",
-                title: '拍照超时，请重新拍照',
-                success: () => {
-                  setTimeout(() => {
-                    uni.navigateBack()
-                  }, 1000)
-                }
-              })
-            }, 10 * 1000)
-
-            this.$api
-              .faceCertificationCompareFace({
-                imageA: base64,
-                orderGoodsId: this.orderGoodsId,
-                gradeId: this.gradeId,
-              })
-              .then((res) => {
-                clearTimeout(timer)
-                resolve(res.data.data);
-              }).catch((err) => {
-                clearTimeout(timer)
-                // 当前网络延迟，
-                console.log('人脸识别错误:', err)
-                uni.showModal({
-                  content: "当前网络延迟",
-                  showCancel: false,
-                  success: (resultst) => {
-                    if (resultst.confirm) {
-                      uni.navigateBack()
-                    }
-                  },
-                })
-              })
+            this.CompareFace(base64, resolve);
           },
           fail(err) {
             console.error(err, "err");
           },
         });
+        // #endif
+        // #ifdef H5
+        this.CompareFace(this.faceUrl, resolve);
+        // #endif
       });
     },
+    CompareFace(url, resolve) {
+      let timer = setTimeout(() => {
+        uni.showToast({
+          icon: "none",
+          title: "拍照超时，请重新拍照",
+          duration: 2000,
+          success: () => {
+            setTimeout(() => {
+              uni.navigateBack();
+            }, 1000);
+          },
+        });
+      }, 10 * 1000);
+
+      this.$api
+        .faceCertificationCompareFace({
+          imageA: url,
+          orderGoodsId: this.orderGoodsId,
+          gradeId: this.gradeId,
+        })
+        .then((res) => {
+          clearTimeout(timer);
+          console.log(res, "人脸识别成功res");
+          resolve(res.data.data);
+        })
+        .catch((err) => {
+          clearTimeout(timer);
+          // 当前网络延迟，
+          console.log("人脸识别错误:", err);
+          uni.showModal({
+            content: "当前网络延迟",
+            showCancel: false,
+            success: (resultst) => {
+              if (resultst.confirm) {
+                uni.navigateBack();
+              }
+            },
+          });
+        });
+    },
     toTakePhoto() {
       this.popupPhotoShow = false
       this.openPhoto()
@@ -1304,6 +1425,7 @@ export default {
     //拍照
     openPhoto() {
       // this.enableAutoRotation = false;
+      // #ifdef MP-WEIXIN
       this.photoPopup = true;
       this.isTaking = true;
       uni.setKeepScreenOn({
@@ -1313,16 +1435,42 @@ export default {
         scope: "scope.camera",
         success() {},
       });
+      // #endif
+      // #ifdef H5
+      if (
+        (window.navigator.mediaDevices &&
+          window.navigator.mediaDevices.getUserMedia) ||
+        window.navigator.getUserMedia ||
+        window.navigator.webkitGetUserMedia ||
+        window.navigator.mozGetUserMedia
+      ) {
+        console.log("getUserMedia----");
+        // 调用用户媒体设备, 访问摄像头
+        this.getUserMedia(
+          {
+            video: {
+              width: 400,
+              height: 300,
+            },
+          },
+          this.photographSuccess,
+          this.photographError
+        );
+      } else {
+        console.log("1111没有摄像");
+        this.photographError();
+      }
+      // #endif
     },
     //确认拍照
     takePhoto() {
-      var self = this;
+      // #ifdef MP-WEIXIN
       const ctx = uni.createCameraContext();
       ctx.takePhoto({
         quality: "high",
         success: (res) => {
           console.log(res.tempImagePath);
-          self.avatarUrl = res.tempImagePath;
+          this.avatarUrl = res.tempImagePath;
           // self.submitPhoto();
           this.isTaking = false;
 
@@ -1331,6 +1479,17 @@ export default {
           console.log(err);
         },
       });
+      // #endif
+      // #ifdef H5
+      const canvas = document.createElement("canvas");
+      canvas.width = 400;
+      canvas.height = 400;
+      const context = canvas.getContext("2d");
+      const video = document.querySelector("video");
+      context.drawImage(video, 0, 0, 400, 400);
+      this.faceUrl = canvas.toDataURL("image/png");
+      this.isTaking = false;
+      // #endif
     },
     /**
      * 是否有上传图片
@@ -2830,6 +2989,83 @@ export default {
     tabSelect(index, bankindex) {
       this.$set(this.questionList[bankindex], "current", index);
     },
+
+    /**
+     * 退出全屏
+     */
+    exitFullscreen() {
+      try {
+        var de = document;
+        // console.log(de);
+        if (de.exitFullscreen) {
+          de.exitFullscreen();
+        } else if (de.mozCancelFullScreen) {
+          de.mozCancelFullScreen();
+        } else if (de.webkitCancelFullScreen) {
+          de.webkitCancelFullScreen();
+        }
+      } catch (err) {}
+    },
+
+    fullele() {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        null
+      );
+    },
+    //判断是否全屏
+    isFullScreen() {
+      return !!(document.webkitIsFullScreen || this.fullele());
+    },
+    getUserMedia(constraints, success, error) {
+      console.log("getUserMedia===", constraints, "success:", success);
+      if (window.navigator.mediaDevices.getUserMedia) {
+        // 最新的标准API
+        window.navigator.mediaDevices
+          .getUserMedia(constraints)
+          .then(success)
+          .catch(error);
+      } else if (window.navigator.webkitGetUserMedia) {
+        // webkit核心浏览器
+        window.navigator.webkitGetUserMedia(constraints, success, error);
+      } else if (window.navigator.mozGetUserMedia) {
+        // firfox浏览器
+        window.navigator.mozGetUserMedia(constraints, success, error);
+      } else if (window.navigator.getUserMedia) {
+        // 旧版API
+        window.navigator.getUserMedia(constraints, success, error);
+      }
+    },
+    photographSuccess(stream) {
+      console.log("有摄像头---", stream);
+      this.photoPopup = true;
+      this.isTaking = true;
+
+      const video = document.querySelector("video");
+      console.log('video:', video);
+      video.srcObject = stream;
+      video.play();
+    },
+    photographError(err) {
+      console.log("没有摄像头：", err);
+      uni.showModal({
+        title: "提示",
+        content:
+          "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
+        cancelText: "取消",
+        confirmText: "确定",
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateBack();
+          } else if (res.cancel) {
+          }
+        },
+      });
+    },
+
   },
 };
 </script>
@@ -2868,7 +3104,7 @@ export default {
     .center_camera {
       width: 100%;
       height: 75vh;
-      // position: fixed;
+      position: fixed;
       .head_take {
         width: 100%;
         height: 75vh;
@@ -2898,6 +3134,21 @@ export default {
         background-color: #333;
         opacity: 0.5;
       }
+      .photo_v {
+        width: 100%;
+        height: 100%;
+      }
+      .mask {
+        width: 500rpx;
+        height: 550rpx;
+        position: absolute;
+        top: 100rpx;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0 auto;
+        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
+      }
     }
     .custom {
       width: 750rpx;

pages3/live/detail.vue

@@ -492,12 +492,12 @@
       </view>
     </u-popup>
 
-    <u-mask :show="photoPopup">
+    <u-popup v-model="photoPopup" mode="bottom" border-radius="40">
       <!-- 播放前拍照start -->
+       <!-- :mask-close-able="false" -->
+      <!-- style="bottom: 0; position: fixed; width: 100%; z-index: 999" -->
       <view
         v-if="photoPopup"
-        :mask-close-able="false"
-        style="bottom: 0; position: fixed; width: 100%; z-index: 999"
       >
         <view class="photoBox">
           <view class="photoTop">
@@ -517,6 +517,7 @@
               class="center_camera"
               v-if="photoPopup && isTaking"
             >
+              <!-- #ifdef MP-WEIXIN -->
               <camera
                 device-position="front"
                 flash="off"
@@ -534,10 +535,26 @@
                   <cover-view class="headTake_down color"></cover-view>
                 </cover-view>
               </camera>
+              <!-- #endif -->
+              <!-- #ifdef H5 -->
+              <video
+                :controls='false'
+                id="video"
+                width="400"
+                height="300"
+                class="photo_v"
+              ></video>
+              <view class="mask"></view>
+              <!-- #endif -->
+            </view>
+            <view class="custom" v-if="!isTaking">
+              <!-- #ifdef MP-WEIXIN -->
+              <image :src="avatarUrl" mode=""></image>
+              <!-- #endif -->
+              <!-- #ifdef H5 -->
+              <image :src="faceUrl" mode=""></image>
+              <!-- #endif -->
             </view>
-            <view class="custom" v-if="!isTaking"
-              ><image :src="avatarUrl" mode=""></image
-            ></view>
           </view>
           <view class="btns">
             <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
@@ -558,7 +575,7 @@
           </view>
         </view>
       </view>
-    </u-mask>
+    </u-popup>
 
     <u-popup
       v-model="noticeShow"
@@ -773,6 +790,8 @@ export default {
       compareFaceData: 0, // 拍照匹配相似度
       CountTo: 30, // 倒计时
       popupPhotoShow: false,
+      // h5
+      faceUrl: "",
     };
   },
   computed: {
@@ -794,6 +813,33 @@ export default {
 
   },
   onShow() {
+    // this.photoPopup = true;
+    // this.isTaking = true;
+    // if (
+    //   (window.navigator.mediaDevices &&
+    //     window.navigator.mediaDevices.getUserMedia) ||
+    //   window.navigator.getUserMedia ||
+    //   window.navigator.webkitGetUserMedia ||
+    //   window.navigator.mozGetUserMedia
+    // ) {
+    //   console.log("getUserMedia----");
+    //   // 调用用户媒体设备, 访问摄像头
+    //   this.getUserMedia(
+    //     {
+    //       video: {
+    //         width: 400,
+    //         height: 300,
+    //       },
+    //     },
+    //     this.photographSuccess,
+    //     this.photographError
+    //   );
+    // } else {
+    //   console.log("1111没有摄像");
+    //   this.photographError();
+    // }
+
+
     console.log('this.options:', this.options);
     if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页，登录后返回
       return;
@@ -1836,6 +1882,54 @@ export default {
             self.$method.showToast("上传路径报错" + JSON.stringify(res.data));
             return;
           }
+          let filePath = "";
+          // #ifdef H5
+          var localData = options; //dataUrl为base64位
+          let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码，去掉data:image/png;base64部分
+          let length = base.length;
+          let url = new Uint8Array(length);
+          while (length--) {
+            url[length] = base.charCodeAt(length);
+          }
+          filePath = new File([url], "a.jpg", {
+            type: "image/jpg",
+          });
+          console.log("filePath:", filePath);
+
+          uni.uploadFile({
+            url: ossToken.host,
+            name: "file",
+            file: filePath,
+            fileType: "image",
+            header: {
+              AuthorizationToken: "WX " + uni.getStorageSync("token"),
+            },
+            formData: {
+              key: ossToken.dir,
+              OSSAccessKeyId: ossToken.accessid,
+              policy: ossToken.policy,
+              Signature: ossToken.signature,
+              callback: ossToken.callback,
+              success_action_status: 200,
+            },
+            success: (result) => {
+              this.$u.toast("上传成功");
+              this.ossAvatarUrl = ossToken.dir;
+              console.log("h5上传成功--:", this.ossAvatarUrl);
+              resolve();
+            },
+            fail: (error) => {
+              console.log("h5上传失败:", error)
+              uni.showToast({
+                title: "上传接口报错，请重新拍照上传" + error,
+                icon: "none",
+              });
+              this.openPhoto();
+              return;
+            },
+          });
+          // #endif
+          // #ifdef MP-WEIXIN
           uni.uploadFile({
             url: ossToken.host,
             name: "file",
@@ -1855,7 +1949,7 @@ export default {
             success: (result) => {
               // if (result.statusCode === 200) {
                 this.$u.toast('上传成功')
-                self.ossAvatarUrl = ossToken.dir;
+                this.ossAvatarUrl = ossToken.dir;
                 resolve();
               // } else {
               //   uni.showToast({
@@ -1875,12 +1969,14 @@ export default {
               return;
             },
           });
+          // #endif
         });
       });
     },
     imageInfos() {
       var self = this;
-      return new Promise((resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
+        // #ifdef MP-WEIXIN
         uni.getImageInfo({
           src: self.avatarUrl,
           success: async (res) => {
@@ -1924,6 +2020,11 @@ export default {
 						this.$u.toast('图片上传失败')
 					}
         });
+        // #endif
+        // #ifdef H5
+        const waitUpload = await this.uploadFile(this.faceUrl, 0);
+        resolve(waitUpload);
+        // #endif
       });
     },
     timeEvent() {
@@ -2043,7 +2144,7 @@ export default {
       if (polyvPlayerContext) {
         polyvPlayerContext.exitFullScreen();
       }
-
+      // #ifdef MP-WEIXIN
       this.enableAutoRotation = false;
       this.photoPopup = true;
       this.isTaking = true;
@@ -2054,12 +2155,39 @@ export default {
         scope: "scope.camera",
         success() {},
       });
+      // #endif
+      // #ifdef H5
+      if (
+        (window.navigator.mediaDevices &&
+          window.navigator.mediaDevices.getUserMedia) ||
+        window.navigator.getUserMedia ||
+        window.navigator.webkitGetUserMedia ||
+        window.navigator.mozGetUserMedia
+      ) {
+        console.log("getUserMedia----");
+        // 调用用户媒体设备, 访问摄像头
+        this.getUserMedia(
+          {
+            video: {
+              width: 400,
+              height: 300,
+            },
+          },
+          this.photographSuccess,
+          this.photographError
+        );
+      } else {
+        console.log("1111没有摄像");
+        this.photographError();
+      }
+      // #endif
     },
     /**
      * 人脸匹配
      */
     faceRecognition() {
       return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
         let fileSystem = uni.getFileSystemManager();
         fileSystem.readFile({
           filePath: `${this.avatarUrl}`,
@@ -2073,51 +2201,60 @@ export default {
               orderGoodsId: this.orderGoodsId,
               gradeId: this.gradeId,
             })
-
-            let timer = setTimeout(() => {
-              uni.showToast({
-                icon: "none",
-                title: '拍照超时，请重新拍照',
-                duration: 2000,
-                success: () => {
-                  setTimeout(() => {
-                    uni.navigateBack()
-                  }, 1000)
-                }
-              })
-            }, 10 * 1000)
-
-            this.$api
-              .faceCertificationCompareFace({
-                imageA: base64,
-                orderGoodsId: this.orderGoodsId,
-                gradeId: this.gradeId,
-              })
-              .then((res) => {
-                clearTimeout(timer)
-                resolve(res.data.data);
-              }).catch((err) => {
-                clearTimeout(timer)
-                // 当前网络延迟，
-                console.log('人脸识别错误:', err)
-                uni.showModal({
-                  content: "当前网络延迟",
-                  showCancel: false,
-                  success: (resultst) => {
-                    if (resultst.confirm) {
-                      uni.navigateBack()
-                    }
-                  },
-                })
-              })
+            this.CompareFace(base64, resolve);
           },
           fail(err) {
             console.error(err, "err");
           },
         });
+        // #endif
+        // #ifdef H5
+        this.CompareFace(this.faceUrl, resolve);
+        // #endif
       });
     },
 
+    CompareFace(url, resolve) {
+      let timer = setTimeout(() => {
+        uni.showToast({
+          icon: "none",
+          title: "拍照超时，请重新拍照",
+          duration: 2000,
+          success: () => {
+            setTimeout(() => {
+              uni.navigateBack();
+            }, 1000);
+          },
+        });
+      }, 10 * 1000);
+
+      this.$api
+        .faceCertificationCompareFace({
+          imageA: url,
+          orderGoodsId: this.orderGoodsId,
+          gradeId: this.gradeId,
+        })
+        .then((res) => {
+          clearTimeout(timer);
+          console.log(res, "人脸识别成功res");
+          resolve(res.data.data);
+        })
+        .catch((err) => {
+          clearTimeout(timer);
+          // 当前网络延迟，
+          console.log("人脸识别错误:", err);
+          uni.showModal({
+            content: "当前网络延迟",
+            showCancel: false,
+            success: (resultst) => {
+              if (resultst.confirm) {
+                uni.navigateBack();
+              }
+            },
+          });
+        });
+    },
+
     async submit() {
       if (this.uploadLock) {
         return;
@@ -2169,6 +2306,15 @@ export default {
     },
     reTake() {
       this.isTaking = true;
+      // #ifdef H5
+      this.faceUrl = "";
+      this.getUserMedia({
+        video: {
+          width: 400,
+          height: 300,
+        },
+      });
+      // #endif
     },
     toTakePhoto() {
       this.popupPhotoShow = false
@@ -2182,22 +2328,29 @@ export default {
     },
     //确认拍照
     takePhoto() {
-      var self = this;
+      // #ifdef MP-WEIXIN
       const ctx = uni.createCameraContext();
       ctx.takePhoto({
         quality: "high",
         success: (res) => {
-          self.avatarUrl = res.tempImagePath;
+          this.avatarUrl = res.tempImagePath;
           this.isTaking = false;
-          // self.submit();
-
-          // self.photoPopup = false;
-          // self.enableAutoRotation = true;
         },
         fail: (err) => {
           console.log(err);
         },
       });
+      // #endif
+      // #ifdef H5
+      const canvas = document.createElement("canvas");
+      canvas.width = 400;
+      canvas.height = 400;
+      const context = canvas.getContext("2d");
+      const video = document.querySelector("video");
+      context.drawImage(video, 0, 0, 400, 400);
+      this.faceUrl = canvas.toDataURL("image/png");
+      this.isTaking = false;
+      // #endif
     },
     playError(e) {
       console.log(e);
@@ -2378,6 +2531,83 @@ export default {
         },
       });
     },
+    /**
+     * 退出全屏
+     */
+    exitFullscreen() {
+      try {
+        var de = document;
+        // console.log(de);
+        if (de.exitFullscreen) {
+          de.exitFullscreen();
+        } else if (de.mozCancelFullScreen) {
+          de.mozCancelFullScreen();
+        } else if (de.webkitCancelFullScreen) {
+          de.webkitCancelFullScreen();
+        }
+      } catch (err) {}
+    },
+
+    fullele() {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        null
+      );
+    },
+    //判断是否全屏
+    isFullScreen() {
+      return !!(document.webkitIsFullScreen || this.fullele());
+    },
+    getUserMedia(constraints, success, error) {
+      console.log("getUserMedia===", constraints, "success:", success);
+      if (window.navigator.mediaDevices.getUserMedia) {
+        // 最新的标准API
+        window.navigator.mediaDevices
+          .getUserMedia(constraints)
+          .then(success)
+          .catch(error);
+      } else if (window.navigator.webkitGetUserMedia) {
+        // webkit核心浏览器
+        window.navigator.webkitGetUserMedia(constraints, success, error);
+      } else if (window.navigator.mozGetUserMedia) {
+        // firfox浏览器
+        window.navigator.mozGetUserMedia(constraints, success, error);
+      } else if (window.navigator.getUserMedia) {
+        // 旧版API
+        window.navigator.getUserMedia(constraints, success, error);
+      }
+    },
+    photographSuccess(stream) {
+      console.log("有摄像头---", stream);
+      this.photoPopup = true;
+      this.isTaking = true;
+      this.enableAutoRotation = false;
+
+      const video = document.querySelector("video");
+      console.log('video:', video);
+      video.srcObject = stream;
+      video.play();
+    },
+    photographError(err) {
+      console.log("没有摄像头：", err);
+      uni.showModal({
+        title: "提示",
+        content:
+          "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
+        cancelText: "取消",
+        confirmText: "确定",
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateBack();
+          } else if (res.cancel) {
+          }
+        },
+      });
+    },
+
   },
 };
 </script>
@@ -2540,7 +2770,7 @@ export default {
     .center_camera {
       width: 100%;
       height: 75vh;
-      // position: fixed;
+      position: fixed;
       .head_take {
         width: 100%;
         height: 75vh;
@@ -2570,6 +2800,21 @@ export default {
         background-color: #333;
         opacity: 0.5;
       }
+      .photo_v {
+        width: 100%;
+        height: 100%;
+      }
+      .mask {
+        width: 500rpx;
+        height: 550rpx;
+        position: absolute;
+        top: 100rpx;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0 auto;
+        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
+      }
     }
     .custom {
       width: 750rpx;

pages3/polyv/detail.vue

@@ -589,7 +589,6 @@
                 height="300"
                 class="photo_v"
               ></video>
-              <!-- <canvas class="canvas"  canvas-id="canvas"></canvas> -->
               <view class="mask"></view>
               <!-- #endif -->
             </view>
@@ -912,7 +911,7 @@ export default {
       vodPlayerJs: "https://player.polyv.net/script/player.js",
       player: "",
       H5isAllowSeek: "off",
-      stream: null,
+      // stream: null,
       faceUrl: "",
     };
   },
@@ -958,8 +957,8 @@ export default {
     }
   },
   onShow() {
-    this.photoPopup = true;
-    this.isTaking = true;
+    // this.photoPopup = true;
+    // this.isTaking = true;
     // if (
     //   (window.navigator.mediaDevices &&
     //     window.navigator.mediaDevices.getUserMedia) ||
@@ -3224,10 +3223,11 @@ export default {
         }
         // #endif
       }
+      
+      // #ifdef MP-WEIXIN
       this.enableAutoRotation = false;
       this.photoPopup = true;
       this.isTaking = true;
-      // #ifdef MP-WEIXIN
       uni.setKeepScreenOn({
         keepScreenOn: true,
       });
@@ -3344,7 +3344,6 @@ export default {
       let compareFaceData = await this.faceRecognition();
       console.log(compareFaceData, "compareFaceData");
       this.compareFaceData = compareFaceData;
-      const waitYS = await this.imageInfos();
       if (compareFaceData >= 80) {
         const waitYS = await this.imageInfos();
         this.postCoursePhotoRecord()
@@ -3890,6 +3889,10 @@ export default {
     },
     photographSuccess(stream) {
       console.log("有摄像头---", stream);
+      this.photoPopup = true;
+      this.isTaking = true;
+      this.enableAutoRotation = false;
+
       const video = document.querySelector("video");
       console.log('video:', video);
       video.srcObject = stream;
@@ -4155,17 +4158,6 @@ export default {
         height: 100%;
       }
     }
-    // .mask {
-    //   width: 500rpx;
-    //   height: 550rpx;
-    //   position: absolute;
-    //   top: 100px;
-    //   left: 0;
-    //   right: 0;
-    //   bottom: 0;
-    //   margin: 0 auto;
-    //   box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
-    // }
   }
 
   .btns {