video

pages3/polyv/detail.vue

@@ -538,7 +538,8 @@
               </camera>
               <!-- #endif -->
               <!-- #ifdef H5 -->
-              <video id="video" width="100" height="100"></video>
+              <!-- <img v-show="!isTaking" :src="faceUrl" alt="" /> -->
+              <video id="video" :src="stream" class="photo_v"></video>
               <!-- #endif -->
             </view>
             <view class="custom" v-if="!isTaking"
@@ -796,6 +797,8 @@ export default {
       vodPlayerJs: "https://player.polyv.net/script/player.js",
       player: "",
       H5isAllowSeek: 'off',
+      stream: null,
+      mediaStreamTrack: '',
     };
   },
   computed: {
@@ -1999,13 +2002,15 @@ export default {
     //配置随机拍照时间
     configPhoto() {
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
+      let totalVideoTime = 0
+      let duration = 0
       // #ifdef MP-WEIXIN
-      let totalVideoTime = polyvPlayerContext.getDuration();
-      let duration = polyvPlayerContext.getCurrentTime();
+      totalVideoTime = polyvPlayerContext.getDuration();
+      duration = polyvPlayerContext.getCurrentTime();
       // #endif
       // #ifdef H5
-      let totalVideoTime = polyvPlayerContext.j2s_getDuration();
-      let duration = polyvPlayerContext.j2s_getCurrentTime();
+      totalVideoTime = polyvPlayerContext.j2s_getDuration();
+      duration = polyvPlayerContext.j2s_getCurrentTime();
       // #endif
       let photoNum = this.photoNum;
       if (!this.photoConfig) {
@@ -2339,11 +2344,12 @@ export default {
       }
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
       let noteDate = this.$method.getZeroTime();
+      let noteSecond = 0
       // #ifdef MP-WEIXIN
-      let noteSecond = polyvPlayerContext.getCurrentTime();
+      noteSecond = polyvPlayerContext.getCurrentTime();
       // #endif
       // #ifdef H5
-      let noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+      noteSecond = polyvPlayerContext.j2s_getCurrentTime();
       // #endif
       if (!noteSecond) {
         if (noteSecond == 0) {
@@ -2573,6 +2579,7 @@ export default {
       })
     },
     uploadFile(options, int) {
+      console.log('options:', options);
       var self = this;
       return new Promise((resolve, reject) => {
         var data = {
@@ -2610,6 +2617,7 @@ export default {
               // if (result.statusCode === 200) {
                 this.$u.toast('上传成功')
                 self.ossAvatarUrl = ossToken.dir;
+                console.log('statusCode:', this.ossAvatarUrl);
                 resolve();
               // } else {
               //   uni.showToast({
@@ -2634,7 +2642,8 @@ export default {
     },
     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) => {
@@ -2678,6 +2687,11 @@ export default {
 						this.$u.toast('图片上传失败')
 					}
         });
+        // #endif
+        // #ifdef H5
+        const waitUpload = await this.uploadFile(this.faceUrl, 0);
+        resolve(waitUpload);
+        // #endif
       });
     },
     timeEvent() {
@@ -2888,24 +2902,38 @@ export default {
       this.enableAutoRotation = false;
       this.photoPopup = true;
       this.isTaking = true;
-      // 设置是否保持常亮状态 ，h5不支持
+      // #ifdef MP-WEIXIN
       uni.setKeepScreenOn({
         keepScreenOn: true,
       });
-      // h5不支持
       uni.authorize({
         scope: "scope.camera",
         success() {},
       });
+      // #endif
       // #ifdef H5
-      uni.chooseImage({
-        count: 1,
-        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
-        sourceType: ["album","camera"], //使用相机
-        success: (res) => {
-          console.log('图片路径', res.tempFilePaths[0]);
-          this.avatarUrl = res.tempFilePaths[0]
-          this.isTaking = false
+      this.$nextTick(() => {
+        if (
+          (window.navigator.mediaDevices &&
+            window.navigator.mediaDevices.getUserMedia) ||
+          window.navigator.getUserMedia ||
+          window.navigator.webkitGetUserMedia ||
+          window.navigator.mozGetUserMedia
+        ) {
+          console.log(this.getUserMedia, "getUserMedia");
+          // 调用用户媒体设备, 访问摄像头
+          this.getUserMedia(
+            {
+              video: {
+                width: 400,
+                height: 300,
+              },
+            },
+            this.photographSuccess,
+            this.photographError
+          );
+        } else {
+          this.photographError();
         }
       })
       // #endif
@@ -2916,7 +2944,7 @@ export default {
      */
     faceRecognition() {
       return new Promise((resolve) => {
-        // 不确定h5
+        // #ifdef MP-WEIXIN
         let fileSystem = uni.getFileSystemManager();
         fileSystem.readFile({
           filePath: `${this.avatarUrl}`,
@@ -2930,51 +2958,57 @@ export default {
             //   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)
-                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()
-                    }
-                  },
-                })
-              })
+            this.CompareFace(base64)
           },
           fail(err) {
             // this.$u.toast('人脸识别错误!')
             console.error(err, "err-----人脸识别错误");
           },
         });
+        // #endif
+        // #ifdef H5
+        this.CompareFace(this.faceUrl)
+        // #endif
       });
     },
+    CompareFace(url) {
+      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) {
@@ -2993,10 +3027,11 @@ export default {
             // console.log('拍照确定提交', this.photoHistoryList);
             this.postStudyRecord(); //提交记录
             //恢复播放
-            // h5不支持
+            // #ifdef MP-WEIXIN
             uni.setKeepScreenOn({
               keepScreenOn: false,
             });
+            // #endif
             this.photoPopup = false;
             this.uploadLock = false;
             this.enableAutoRotation = true;
@@ -3033,6 +3068,15 @@ export default {
     },
     reTake() {
       this.isTaking = true;
+      // #ifdef MP-WEIXIN
+      this.faceUrl = "";
+      this.getUserMedia({
+        video: {
+          width: 400,
+          height: 300,
+        },
+      });
+      // #endif
     },
     toTakePhoto() {
       this.popupPhotoShow = false
@@ -3046,18 +3090,29 @@ export default {
     },
     //确认拍照
     takePhoto() {
-      var self = this;
       // h5不支持
+      // #ifdef MP-WEIXIN
       const ctx = uni.createCameraContext();
       ctx.takePhoto({
         quality: "high",
         success: (res) => {
-          self.avatarUrl = res.tempImagePath;
+          this.avatarUrl = res.tempImagePath;
           this.isTaking = false;
         },
         fail: (err) => {
         },
       });
+      // #endif
+      // #ifdef H5
+      const canvas = document.createElement("canvas");
+      canvas.width = 400;
+      canvas.height = 300;
+      const context = canvas.getContext("2d");
+      const video = document.getElementById("video");
+      context.drawImage(video, 0, 0, 400, 300);
+      this.faceUrl = canvas.toDataURL("image/png");
+      this.isTaking = false;
+      // #endif
     },
     playError(e) {
       console.log(e);
@@ -3460,6 +3515,52 @@ export default {
     isFullScreen() {
       return !!(document.webkitIsFullScreen || this.fullele());
     },
+    getUserMedia(constraints, success, error) {
+      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) {
+      // 兼容webkit核心浏览器
+      // this.isTaking = true;
+      // this.takePhotoModal = true;
+      this.$nextTick(() => {
+        const video = document.getElementById("video");
+        // 将视频流设置为video元素的源
+        console.log('video1:',video);
+        video.srcObject = stream;
+        this.mediaStreamTrack =
+          typeof stream.stop === "function" ? stream : stream.getTracks()[0];
+        video.play();
+      });
+    },
+    photographError(err) {
+      this.$confirm(
+        "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
+        "提示",
+        {
+          showConfirmButton: false,
+          closeOnClickModal: false,
+          showCancelButton: false,
+          closeOnPressEscape: false,
+          distinguishCancelAndClose: false,
+          showClose: false,
+        }
+      );
+    },
   },
 };
 </script>
@@ -3673,6 +3774,10 @@ export default {
         background-color: #333;
         opacity: 0.5;
       }
+      .photo_v {
+        width: 100%;
+        height: 100%;
+      }
     }
     .custom {
       width: 750rpx;