原文鏈接: webrtc 全屏截圖

上一篇: webgl 學習小結 彩色小立方體

下一篇: webgl 貝塞爾多彩線

通過共享屏幕, 將屏幕輸出到video中, 然后在canvas中繪制video, 進行截圖

優點: 方便, 對于全屏截圖來說十分精確.

缺點: 需要授權, 且不能截取元素, 長圖拼接需要自己手動實現

<template><div class="flex-row"><div>web-rtc</div><video id="video" src=""></video><el-button @click="capture">capture</el-button><el-button @click="stop">stop</el-button><el-button @click="snapshot">snapshot</el-button><canvas id="canvas"></canvas></div> </template><script lang="ts" setup> import { onMounted } from "vue"; import { downloadUrl } from "../utils"; // https://www.webrtc-experiment.com/getDisplayMedia/ let video: HTMLVideoElement; let canvas: HTMLCanvasElement; let stream: any; const snapshot = () => {canvas.width = video.clientWidth;canvas.height = video.clientHeight;console.log("snapshot", video.clientWidth, video.clientHeight);const ctx = canvas.getContext("2d")!;ctx.drawImage(video, 0, 0);const url = canvas.toDataURL();console.log("url", url);downloadUrl(url, "snapshot.png"); }; const capture = async () => {// getDisplayMedia無法同時采集音頻stream = await navigator.mediaDevices.getDisplayMedia({video: true,audio: false,cursor: "motain", // alwayslogicalSurface: false, // 設置是否包含所選屏幕外區域的一些信息});// .getUserMedia({ video: true, audio: false })video.srcObject = stream;video.play(); }; const stop = () => {console.log("stop", stream, video.srcObject);let tracks = video.srcObject.getTracks();tracks.forEach((track: any) => track.stop());video.srcObject = null; }; onMounted(() => {video = document.getElementById("video") as HTMLVideoElement;canvas = document.getElementById("canvas") as HTMLCanvasElement; }); </script><style></style>

總結

以上是生活随笔為你收集整理的webrtc 全屏截图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。