将网络摄像头画面保留在 div 内，但也会在 div 中显示整个网络摄像头画面

Question

IM 使用 twilio 视频。我有一个类似于缩放调用的功能。每个网络摄像头供稿为 div.

我一直在搞乱 css，我终于把东西留在了 div 但现在，只显示了网络摄像头提要的一部分。观察以下屏幕截图。第二个 div 包含一个网络摄像头源。请注意，它只显示了一点实际供稿的内容，因为您应该能够看到我的脸。

另请注意 div 它们的宽度和高度大小并不是我想要的，只是想让它们正常工作。

这是我的 html 和 css

javascript 通过 twilio api 添加视频元素，因此您在 html 中看不到它。添加视频时，img 也会被删除。当用户不分享他们的视频时，它只是一个占位符。

<div class="row scroll-stream-dash custom-scrollbar-css ">
      <div *ngFor="let p of participantsarray" [id]="p.identity" class=" vidparticipant col-6 col-lg-3 col-md-2 mb-3 px-lg-2 px-md-2 px-sm-1 px-xs-1">
        <img [id]="'novideo' + p.identity"  style="width: 100%; height: 100%;" [src]="blackbackground" class=" img-fluid">
        <div class="content_img">
          <div style="display: none" [id]="p.identity + 'da'" class="col-6  text-center">
            <span><i class="fas fa-microphone" aria-hidden="true"></i><br><span style="font-size: 9px;">Mute Audio</span></span>
          </div>
          <div style="display: none" [id]="p.identity + 'ea'" class=" col-6 text-center ">
            <span><i class="fas fa-microphone-alt-slash"></i><br><span style="font-size: 9px;">Unmute Audio</span></span>
          </div>
          <div style="display: none" [id]="p.identity + 'dv'"  class="col-6  text-center">
            <span><i class="far fa-video"></i><br><span style="font-size: 9px;">Hide Video</span></span>
          </div>
          <div style="display: none" [id]="p.identity + 'ev'" class=" col-6 text-center ">
            <span><i class="far fa-video-slash"></i><br><span style="font-size: 9px;">Unhide Video</span></span>
          </div>
        </div>
        <div class="bottom-left-name">{{p.identity}}</div>
      </div>
    </div>


.vidparticipant{
  height: 300px;
  max-width: 300px;
  overflow: hidden;

}

video{
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

如何正确设置网络摄像头视频以显示其全部内容，同时将该视频保持在 div 范围内。谢谢!!!!!!!

Answer 1

要在父容器中设置video内容，可以使用CSS 属性 object-fit.

请参阅下面的示例以了解 object-fit 并阅读文档以更好地理解。 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

此外，探讨 CSS 属性 aspect-ratio 根据宽高比处理视频的可能性。 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.vidparticipant {
  height: 300px;
  max-width: 300px;
  overflow: hidden;
}

video {
  height: 100%;
  width: 100%;
}

video.object-fit-fill {
  object-fit: fill;
}

video.object-fit-cover {
  object-fit: cover;
}

<h2>object-fit: fill</h2>
<p>If the video aspect ratio does not match the aspect ratio of its box/div, then the object will be stretched to fit.</p>
<div class="vidparticipant">
  <video controls class="object-fit-fill">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

<br>

<h2>object-fit: cover</h2>
<p>If the video aspect ratio does not match the aspect ratio of its box/div, then the object will be clipped to fit.</p>
<div class="vidparticipant">
  <video controls class="object-fit-cover">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

将网络摄像头画面保留在 div 内，但也会在 div 中显示整个网络摄像头画面

keep webcam feed inside of div but also display entire webcam feed in div

html

css

video

twilio

webcam