对接拍照

src/apis/user.js

@@ -253,5 +253,13 @@ export default {
 		})
 	},
 
+
+  studyRecord(data) {
+		return request({
+			url: '/study/record',
+			method: 'post',
+			data: data
+		})
+	},
   
 }

src/pages/course-detail/index.vue

@@ -1338,7 +1338,9 @@ export default {
   },
   data() {
     return {
+      photoConfig: false,
       stream: null,
+      photoNum: 0,
       playSectionId: 0,
       moduleId: 0,
       chapterId: 0,
@@ -1377,6 +1379,7 @@ export default {
       reMenuList: [],
       answerList: [],
       noteList: [],
+      photoList: [],
       noteTotal: 0,
       duration: 0,
       noteParams: {
@@ -1385,6 +1388,7 @@ export default {
       },
       ossAvatarUrl: "", //照片地址
       nowTime: 0,
+      faceUrl: "",
     };
   },
   computed: {
@@ -1398,30 +1402,6 @@ export default {
     this.gradeId = this.$route.query.gradeId;
 
     this.courseCourseList();
-    this.takePhotoModal = true;
-    this.$nextTick(() => {
-      if (
-        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 {
-        alert("不支持访问用户媒体");
-      }
-    });
   },
   methods: {
     // 点击拍照按钮
@@ -1429,7 +1409,9 @@ export default {
       // if (this.isIE) {
       //   window.webcam.capture();
       // } else {
-      const canvas = document.getElementById("canvas");
+      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);
@@ -1455,10 +1437,11 @@ export default {
       }
     },
 
-    photographSuccess(res) {
+    photographSuccess(stream) {
       // 兼容webkit核心浏览器
       const video = document.getElementById("video");
       // 将视频流设置为video元素的源
+      console.dir(video);
       video.srcObject = stream;
       this.mediaStreamTrack =
         typeof stream.stop === "function" ? stream : stream.getTracks()[0];
@@ -1908,8 +1891,163 @@ export default {
             next();
           },
         });
+
+        this.player.HTML5.video.addEventListener("timeupdate", function (res) {
+          self.timeEvent();
+        });
+      });
+    },
+
+    timeEvent() {
+      let self = this;
+      var polyvPlayerContext = this.player;
+      if (polyvPlayerContext) {
+        this.playTime = polyvPlayerContext.j2s_getCurrentTime(); //播放时刻
+        //	console.log(this.playTime,789,this.photoHistoryList)
+        //判断是否需要拍照
+        if (this.photoNum > 0) {
+          this.configPhoto();
+          let photoTime = 0; //获取拍照秒数
+          for (let i = 0; i < this.photoList.length; i++) {
+            photoTime = Number(this.photoList[i]); //获取拍照秒数
+            if (photoTime < this.playTime && photoTime > this.playTime - 8) {
+              //3秒区间内才触发拍照，避免拉动滚动条
+              if (
+                this.photoHistoryList.indexOf(i) < 0 &&
+                this.sectionItem.learning != 1
+              ) {
+                //不存在拍照历史，没有重修过，没有学过，则拍照
+                //启动拍照
+                //暂停
+
+                polyvPlayerContext.j2s_pauseVideo();
+                this.photoIndex = i;
+                this.openPhoto();
+              }
+            }
+          }
+        }
+      }
+    },
+
+    //拍照
+    openPhoto() {
+      var polyvPlayerContext = this.player;
+      if (polyvPlayerContext) {
+        this.exitFullscreen();
+      }
+
+      this.takePhotoModal = true;
+      this.$nextTick(() => {
+        if (
+          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 {
+          alert("不支持访问用户媒体");
+        }
       });
     },
+
+    /**
+     * 退出全屏
+     */
+    exitFullscreen() {
+      var de = document;
+      if (de.exitFullscreen) {
+        de.exitFullscreen();
+      } else if (de.mozCancelFullScreen) {
+        de.mozCancelFullScreen();
+      } else if (de.webkitCancelFullScreen) {
+        de.webkitCancelFullScreen();
+      }
+    },
+
+    //配置随机拍照时间
+    configPhoto() {
+      var polyvPlayerContext = this.player;
+      let totalVideoTime = polyvPlayerContext.j2s_getDuration();
+      let duration = polyvPlayerContext.j2s_getCurrentTime();
+      let photoNum = this.photoNum;
+      if (!this.photoConfig) {
+        this.photoConfig = true;
+        //没有历史拍照间隔数据
+        if (this.photoList.length == 0) {
+          if (totalVideoTime >= 900) {
+            //大于15分钟
+            if (photoNum == 1) {
+              //开头拍1张
+              this.photoList.push(1);
+            } else if (photoNum == 3) {
+              //拍3张
+              this.photoList.push(1); //开头拍一张
+              let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
+              let centerMinTime = centerTime - 300; //前后5分钟
+              let centerMaxTime = centerTime + 300;
+              let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
+              this.photoList.push(centerTakeTime); //中间拍一张
+              let endMaxTime = totalVideoTime - 60;
+              let endMinTime = totalVideoTime - 300;
+              let endTakeTime = this.randomNum(endMinTime, endMaxTime);
+              this.photoList.push(endTakeTime); //最后拍一张
+            }
+          } else {
+            //小于15分钟，只拍前后各一张
+            if (photoNum == 1) {
+              //开头拍1张
+              this.photoList.push(1);
+            } else if (photoNum == 3) {
+              //拍2张
+              if (totalVideoTime <= 300) {
+                //小于5分钟
+                this.photoList.push(1); //开头拍一张
+                let endTakeTime = this.randomNum(10, totalVideoTime); //中间随机取一张
+                this.photoList.push(endTakeTime);
+              } else {
+                this.photoList.push(1); //开头拍一张
+                let endMaxTime = totalVideoTime - 60;
+                let endMinTime = totalVideoTime - 300;
+                let endTakeTime = this.randomNum(endMinTime, endMaxTime);
+                this.photoList.push(endTakeTime); //最后1-5分钟拍一张
+              }
+            }
+          }
+          console.log(this.photoList, "随机拍照时间数组11", photoNum);
+          this.postCoursePhotoRecord(true); //提交随机拍照时间数组
+        }
+        console.log(this.photoList, "随机拍照时间数组");
+        //兼容已有观看历史
+        for (let i = 0; i < this.photoList.length - 1; i++) {
+          if (
+            this.photoList[i] < duration &&
+            this.photoList[i + 1] > duration
+          ) {
+            this.photoIndex = i + 1;
+            //				console.log("我的修改了photoIndex")
+            break;
+          }
+          if (duration > this.photoList[this.photoList.length - 1]) {
+            this.photoIndex = this.photoList.length - 1; //取最后一个下标
+            //				console.log("我的修改了photoIndex")
+            break;
+          }
+        }
+      }
+    },
     /**
      * @param {String} 直播预览
      */
@@ -1991,6 +2129,9 @@ export default {
           });
         });
     },
+    /**
+     * 获取笔记列表
+     */
     getNoteList() {
       let self = this;
       self.noteList = [];