视频大小和 WebRTC 的问题答案

【问题标题】：Issues with video size and WebRTC视频大小和 WebRTC 的问题
【发布时间】：2019-07-22 10:20:17
【问题描述】：

我正在尝试使用 WebRTC 访问移动摄像头。我已经根据我在网上找到的内容进行了设置。但是，我遇到了一些问题。

我的代码似乎无法在 Android 设备上运行。
当我尝试设置视频的 width 和 height 属性时，它不起作用。
在 iOS 上观看视频时。然后离开 Safari 应用程序几秒钟。然后返回到视频两侧为黑色/更改纵横比的页面？

有人知道如何解决这些问题/有更好的实现吗？

插图

我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <video id="video"></video>

    <script type="text/javascript">
        var video; // INPUT WEBRTC as <video> tag
        var cameras = ["user", "environment"]; // USUAL CAMERA TYPES

        var options = []; // CAMERAS AVAILABLE
        navigator.mediaDevices.enumerateDevices().then((devices) => {
            let index = 0;
            devices.find((device) => {
                if (device.kind === 'videoinput') {
                    if (device.deviceId == '') {
                        options.push({
                            audio: false,
                            video: {
                                facingMode: {
                                    exact: cameras[index]
                                }
                            }
                        });
                        index++;
                    } else {
                        options.push({
                            audio: false,
                            video: {
                                deviceId: {
                                    exact: device.deviceId
                                }
                            }
                        });
                    }
                }
            });

            if (options.length == 0) {
                console.log("NO DEVICES FOUND");
            } else {

                navigator.mediaDevices.getUserMedia(options[options.length - 1]).then(stream => {

                    video = document.getElementById("video");
                    video.setAttribute('playsinline', 'playsinline');
                    video.setAttribute('position', 'absolute');
                    video.setAttribute('top', '0');
                    video.setAttribute('left', '0');

                    document.body.appendChild(video);

                    try {
                        video.srcObject = stream;
                        video.style.display = 'block';
                        video.play();
                    } catch (error) {
                        video.src = URL.createObjectURL(stream);
                        video.style.display = 'block';
                        video.play();
                    }

                    // TRYING TO CHANGE VIDEO SIZE BELOW DOESN'T WORK

                    /*
                    var w = window.innerWidth;
                    var h = w * (video.videoHeight / video.videoWidth);

                    video.width = w;
                    video.height = h;
                    */
                })
            }
        }).catch(err => {
            console.log(err);
        });
    </script>
</body>

</html>

【问题讨论】：

解决这个问题的一个简单方法是在视频容器中使用 CSS 的 object-fit 属性。

标签： javascript html webrtc

【解决方案1】：

解决这个问题的一个简单方法是在视频容器中使用 CSS 的 object-fit 属性。

object-fit 属性允许您的视频或图像使用裁剪功能在指定区域内呈现。使用object-fit:cover 是不错的选择。但是，如果您还要使用屏幕共享功能，请确保将 object-fit 属性值设置为 fill 以呈现全屏避免裁剪功能，否则它将把您的共享屏幕视频裁剪到中心。

例子：

<video style="object-fit:cover; width:320px; height:240px"></video>

您可以在此处阅读有关此属性用法的更多信息：

object-fit property

【讨论】：