拍照

pages3/polyv/detail.vue

@@ -492,12 +492,12 @@
         </view>
       </view>
     </u-popup>
-
-    <u-mask :show="photoPopup">
+    <!-- :show="photoPopup" -->
+    <u-popup v-model="photoPopup"  mode="bottom" border-radius="40">
       <!-- 播放前拍照start -->
+      <!-- :mask-close-able="false" -->
       <view
         v-if="photoPopup"
-        :mask-close-able="false"
         style="bottom: 0; position: fixed; width: 100%; z-index: 999"
       >
         <view class="photoBox">
@@ -569,7 +569,7 @@
           </view>
         </view>
       </view>
-    </u-mask>
+    </u-popup>
 
     <u-popup
       v-model="noticeShow"
@@ -849,14 +849,42 @@ export default {
     
   },
   onShow() {
-    console.log('this.option:', this.option);
-    if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页，登录后返回
-      return;
-    }
-    console.log('onshow返回之后');
-    this.courseCourseList();
-    this.informId && this.clickOfficial() // 从公众号消息点击进来上报一次
-    this.$store.getters.dictObj;
+    this.photoPopup = true;
+    this.isTaking = true;
+    console.log('photoPopup:', this.photoPopup, 'isTaking:', this.isTaking, 'window:', window, 'navigator:', navigator);
+    console.log('window.navigator.mediaDevices', navigator.mediaDevices, navigator.mediaDevices.getUserMedia, navigator.getUserMedia,
+      navigator.webkitGetUserMedia, navigator.mozGetUserMedia);
+    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.option:', this.option);
+    // if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页，登录后返回
+    //   return;
+    // }
+    // console.log('onshow返回之后');
+    // this.courseCourseList();
+    // this.informId && this.clickOfficial() // 从公众号消息点击进来上报一次
+    // this.$store.getters.dictObj;
   },
   onUnload() {
     console.log('onUnloadonUnloadonUnloadonUnload');
@@ -2924,8 +2952,8 @@ export default {
         // #endif
       }
       this.enableAutoRotation = false;
-      this.photoPopup = true;
-      this.isTaking = true;
+      // this.photoPopup = true;
+      // this.isTaking = true;
       // #ifdef MP-WEIXIN
       uni.setKeepScreenOn({
         keepScreenOn: true,
@@ -2936,7 +2964,10 @@ export default {
       });
       // #endif
       // #ifdef H5
-      this.$nextTick(() => {
+      console.log('photoPopup:', this.photoPopup, 'isTaking:', this.isTaking, 'window:', window, 'navigator:', navigator);
+      console.log('window.navigator.mediaDevices', navigator.mediaDevices, navigator.mediaDevices.getUserMedia, navigator.getUserMedia,
+      navigator.webkitGetUserMedia, navigator.mozGetUserMedia);
+      // this.$nextTick(() => {
         if (
           (window.navigator.mediaDevices &&
             window.navigator.mediaDevices.getUserMedia) ||
@@ -2944,7 +2975,7 @@ export default {
           window.navigator.webkitGetUserMedia ||
           window.navigator.mozGetUserMedia
         ) {
-          console.log(this.getUserMedia, "getUserMedia");
+          console.log( "getUserMedia----");
           // 调用用户媒体设备, 访问摄像头
           this.getUserMedia(
             {
@@ -2957,9 +2988,10 @@ export default {
             this.photographError
           );
         } else {
+          console.log('1111没有摄像');
           this.photographError();
         }
-      })
+      // })
       // #endif
       console.log('拍照结束');
     },
@@ -3114,7 +3146,6 @@ export default {
     },
     //确认拍照
     takePhoto() {
-      // h5不支持
       // #ifdef MP-WEIXIN
       const ctx = uni.createCameraContext();
       ctx.takePhoto({
@@ -3136,6 +3167,7 @@ export default {
       canvas.height = 300;
       const context = canvas.getContext("2d");
       const video = document.getElementById("video");
+      console.log('canvas->video', video, document);
       context.drawImage(video, 0, 0, 400, 300);
       this.faceUrl = canvas.toDataURL("image/png");
       this.isTaking = false;
@@ -3552,7 +3584,7 @@ export default {
       return !!(document.webkitIsFullScreen || this.fullele());
     },
     getUserMedia(constraints, success, error) {
-      console.log('getUserMedia===', constraints, );
+      console.log('getUserMedia===', constraints, 'success:', success);
       if (window.navigator.mediaDevices.getUserMedia) {
         // 最新的标准API
         window.navigator.mediaDevices
@@ -3586,6 +3618,7 @@ export default {
       });
     },
     photographError(err) {
+      console.log('没有摄像头：', err);
       uni.showModal({
         title: '提示',
         content: '课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。',