JS获取video黑框及设置最大分辨率-祥拓软件

以下是源代码

navigator.mediaDevices.getUserMedia({video: true,audio:false}).then(stream => {
            var videoTrack = stream.getVideoTracks()[0];
            var capabilities = videoTrack.getCapabilities();
            console.log("摄像头支持的分辨率: " + JSON.stringify(capabilities.width) + "x" + JSON.stringify(capabilities.height));
            var constraints = {
                width: { ideal: capabilities.width.max },  // 设置希望的宽度
                height: { ideal: capabilities.height.max }   // 设置希望的高度
            };
            // 应用新的约束
            videoTrack.applyConstraints(constraints)

            const video = document.getElementById('video')
            video.srcObject = stream
            video.play()
            video.onloadedmetadata = function () {
                var videoWidth = video.videoWidth;
                var videoHeight = video.videoHeight;
                var elementWidth = video.clientWidth;
                var elementHeight = video.clientHeight;

                // 计算黑边的宽度
                var horizontalBlackBorderWidth = (elementWidth - (elementHeight * (videoWidth / videoHeight))) / 2;
                var verticalBlackBorderWidth = (elementHeight - (elementWidth * (videoHeight / videoWidth))) / 2;

            console.log("水平黑边宽度: " + horizontalBlackBorderWidth + "px");
            console.log("垂直黑边宽度: " + verticalBlackBorderWidth + "px");

                const text = document.getElementById('text')
                text.style.marginLeft = Math.max(horizontalBlackBorderWidth, 0) + 'px'
                text.style.display = 'block'
            }
        })

1 本站部分内容资源来源于网络公开资源，如有侵害了您的权益，请发送邮件至 work@work100.com.cn 提供相应的资料，我们将删除对应的资源或内容。
2 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
3 本站一律禁止以任何方式发布或转载任何违法的相关信息，如有发现请发送邮件至 work@work100.com.cn 进行举报
4 本站所有原创内容采用知识共享署名4.0国际许可协议进行许可,勿将我们的作品擅自更改、去除署名。《著作权法》亦规定署名权是不可转让的。
5 以上条款内容最终解释权归本站所有

THE END

前端技术