原文链接: 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>