如何解决使用MediaDevices API
我正在使用navigator.mediaDevices.getdisplayMedia来获取屏幕截图,但是它仅捕获页面的可见部分,但是有更多内容隐藏在滚动区域中并且被错过了。那么可以捕获整个页面吗?
function getdisplayMedia(options) {
if (navigator.mediaDevices && navigator.mediaDevices.getdisplayMedia) {
return navigator.mediaDevices.getdisplayMedia(options)
}
if (navigator.getdisplayMedia) {
return navigator.getdisplayMedia(options)
}
if (navigator.webkitGetdisplayMedia) {
return navigator.webkitGetdisplayMedia(options)
}
if (navigator.mozGetdisplayMedia) {
return navigator.mozGetdisplayMedia(options)
}
throw new Error('getdisplayMedia is not defined')
}
async function takeScreenshotStream() {
const width = screen.width * (window.devicePixelRatio || 1)
const height = screen.height * (window.devicePixelRatio || 1)
const errors = [];
let stream;
const mediaStreamConstraints = {
audio: false,video: {
width,height,frameRate: 1,},};
try {
stream = await getdisplayMedia(mediaStreamConstraints)
} catch (ex) {
errors.push(ex)
}
if (errors.length) {
console.debug(...errors)
if (!stream) {
throw errors[errors.length - 1]
}
}
return stream
}
async function takeScreenshotCanvas() {
const stream = await takeScreenshotStream()
const video = document.createElement('video')
const result = await new Promise((resolve,reject) => {
video.onloadedMetadata = () => {
video.play()
video.pause()
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d')
context.drawImage(video,video.videoWidth,video.videoHeight)
resolve(canvas)
}
video.srcObject = stream
})
stream.getTracks().forEach(function (track) {
track.stop()
})
if (result == null) {
throw new Error('Cannot take canvas screenshot')
}
return result
}
document.body.onclick = async () => {
const canvas = await takeScreenshotCanvas()
document.getElementById("screenshot-preview").src = canvas.toDataURL();
}
我尝试使用Html2Canvas和dom-to-image进行全屏截图,但是它们有自己的向后退缩,因为它们无法捕获iframe,SVG等。
我们将不胜感激任何帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。