为video增加遮罩层

absolute 元素的百分比宽高 是相对于其最近的 父级别的absolute／relative 元素来计算的（如没有则对body）

相对应的数值为 自身区域＋ padding 的区域总和

image.png image.png

.video-avatar-item{
    display: inline-flex;
    margin: 2px 10px 2px 10px;
    padding: 0;
    border-radius: 50%;
    background-color: #000;
    border-color: #fff;
    overflow: hidden;
    width: 64px;
    height: 64px;
    position: relative;
    video{ 
        width:64px; 
        height:64px;
        object-fit: cover;
        cursor: pointer;
    }
    video.video-stream.camera{
        position: relative;
    }
    .local-client video.video-stream.camera{
        //left: unset;
        //border-radius: 50%
    }
    .overlay-wrapper {
        position:absolute;
        height:100%;
        width:100%;
        top:0;
        left:0;
        z-index:200;
        display:block;
        background:rgba(0, 0, 0, .7)
    }
}

<div className={videoAvatarItem}>
            <div className={`${styles['local-client']}`}>
              <div className={`${styles['overlay-wrapper']}`}></div>
              <video onClick={this.toggleVideo} key={'videoavatar_local'} id={'videoavatar_'+username}  vtype='local' className={videoRtcClass} username={username} poster={poster} />
            </div>
          </div>