使用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 (将#修改为@）