test

src/config/index.js

@@ -17,8 +17,8 @@ export default {
     statusWhiteList: [],    //http的status默认放行列表
     ossUrl: 'https://bladex-test-info.oss-cn-chengdu.aliyuncs.com', //oss地址
     smsPhone: '',  //测试接受短信验证码的手机号
-    dev_version: '202210091715',    //开发版本号
-    prod_host: 'http://47.110.251.215:8090',  //线上
+    dev_version: '202210111620',    //开发版本号
+    prod_host: 'http://127.0.0.1:8090',  //线上
     //dev_host: 'http://192.168.4.6', //黄键楠
     //dev_host: 'http://192.168.0.118', //祝炜
     dev_host: 'http://192.168.0.155', //刘依程

src/test/index.vue

@@ -10,14 +10,62 @@
 </template>
 
 <script setup>
-import {ref, watch, onMounted} from "vue";
+import {ref, onMounted, nextTick} from "vue";
+import { getRandom } from "vue-utils-plus"
+
+const uuid = getRandom()
+const videoController = ref(null)
+const canvasController = ref(null)
+
+onMounted(()=> {
+    // 创建并获取webrtc模式所需要的辅助dom
+    let videos = document.createElement("video");
+    videos.autoplay = true;
+    videoController.value = videos;
+
+    //canvas
+    let canvas = document.createElement("canvas");
+    canvas.id = uuid
+    canvas.setAttribute("style","position: absolute; width: 100%; height:100%; z-index: 99999; top: 0; display: none; background: white;");
+    document.body.appendChild(canvas);
+    canvasController.value = canvas.getContext("2d"); //制定画布为2d画布
+})
+
+// 开始捕捉屏幕
+const startCapture = async () => {
+    try {
+        const captureStream = await navigator.mediaDevices.getDisplayMedia({
+            audio: false,
+            video: true,
+            preferCurrentTab: true
+        });
+        videoController.value.srcObject = captureStream
+        return captureStream
+    } catch (err) {
+        console.log(err)
+        console.log('浏览器不支持webrtc或者用户未授权')
+        return null
+    }
+}
+
+// 停止捕捉屏幕
+const stopCapture = () => {
+    const {srcObject} = videoController.value;
+    if (srcObject && "getTracks" in srcObject) {
+        const tracks = srcObject.getTracks();
+        tracks.forEach(track => track.stop());
+        videoController.value.srcObject = null;
+    }
+}
 
 const screenShotClick = async () => {
-    let captureStream = await navigator.mediaDevices.getDisplayMedia({
-        audio: false,
-        video: true,
-        preferCurrentTab: true
-    });
-    console.log(captureStream)
+    const captureStream = await startCapture()
+    if (captureStream) {
+        console.log(videoController.value)
+        document.getElementById(uuid).style.display = 'block'
+        canvasController.value?.drawImage(videoController.value, 0, 0, 500, 500);
+    }
+    // 停止捕捉屏幕
+    stopCapture();
 }
 </script>