录屏功能

src/views/Record.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="record-root">
-    <!-- <iframe
+  <div
+    id="record-root"
+    class="record-root"
+  >
+    <iframe
       :src="url"
       frameborder="0"
-    /> -->
+    />
     <button
-      v-show="!isRecording"
-      @click="beginRecord"
+      v-show="isRecording"
+      class="stop-record"
+      @click="stopRecord"
     >
-      开始录制
+      结束录屏并分享
     </button>
   </div>
 </template>
@@ -22,7 +26,8 @@ export default {
   },
   data() {
     return {
-      isRecording: false
+      mediaRecorder: null,
+      isRecording: false,
     }
   },
   computed: {
@@ -31,41 +36,76 @@ export default {
       return decodeURI(this.$route.query.url)
     }
   },
-  methods: {
-    async beginRecord() {
-      this.isRecording = false
+  async mounted() {
+    setTimeout(() => {
+      const el = document.querySelector('#record-root')
+      if (el) {
+        utils.requestFullScreen(el)
+      }
+    }, 0)
 
-      let stream = await navigator.mediaDevices.getDisplayMedia({
+    let stream = null
+    try {
+      stream = await navigator.mediaDevices.getDisplayMedia({
         video: true
       })
+    } catch (error) {
+      alert('调用录屏功能失败！')
+      setTimeout(() => {
+        this.$router.go(-1)
+      }, 100)
+    }
 
-      // 需要更好的浏览器支持
-      const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?
-        "video/webm; codecs=vp9" :
-        "video/webm"
-      let mediaRecorder = new MediaRecorder(stream, {
-        mimeType: mime
-      })
+    // 需要更好的浏览器支持
+    const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?
+      "video/webm; codecs=vp9" :
+      "video/webm"
+    this.mediaRecorder = new MediaRecorder(stream, {
+      mimeType: mime
+    })
+
+    let chunks = []
+    this.mediaRecorder.addEventListener('dataavailable', function (e) {
+      chunks.push(e.data)
+    })
 
-      let chunks = []
-      mediaRecorder.addEventListener('dataavailable', function (e) {
-        chunks.push(e.data)
+    this.mediaRecorder.addEventListener('stop', function () {
+      let blob = new Blob(chunks, {
+        type: chunks[0].type
       })
+      let url = URL.createObjectURL(blob)
 
-      mediaRecorder.addEventListener('stop', function () {
-        let blob = new Blob(chunks, {
-          type: chunks[0].type
-        })
-        let url = URL.createObjectURL(blob)
+      let a = document.createElement('a')
+      a.href = url
+      a.download = '录屏'
+      a.click()
 
-        let a = document.createElement('a')
-        a.href = url
-        a.download = 'xxxxx'
-        a.click()
-      })
+      utils.exitFullScreen()
+    })
+
+    this.mediaRecorder.addEventListener('start', () => {
+      this.isRecording = true
+    })
+
+    this.mediaRecorder.addEventListener('error', (e) => {
+      console.error(e)
+    })
 
-      // 必须手动启动
-      mediaRecorder.start()
+    // 必须手动启动
+    this.mediaRecorder.start()
+  },
+  beforeUnmount() {
+    // 可能是用户直接按了后退按钮
+    if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
+      this.mediaRecorder.stop()
+    }
+  },
+  methods: {
+    stopRecord() {
+      this.mediaRecorder.stop()
+      setTimeout(() => {
+        this.$router.go(-1)
+      }, 100)
     }
   }
 }
@@ -83,5 +123,18 @@ export default {
     width: 100%;
     height: 100%;
   }
+  >button.stop-record {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 130px;
+    background: #3b3d44;
+    border: 1px solid #FFFFFF;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    color: #FFFFFF;
+    font-size: 16px;
+    padding: 11px 40px;
+    border-radius: 20px;
+  }
 }
 </style>