语音通话视频通话界面实现，用于展示出webRTC实时聊天媒体流，CSS实现效果

在开发webRTC的语音和视频通话功能的时候，需要展示出媒体流，这样就需要一个下面这样的效果

 

 

html部分代码

        <!--视频-->
        <div class="remoteVideoMask">
            <img id="remoteVideoMaskLogo" :src="noticeAvatar" />
            <video id="chatRtc" controls  autoplay></video>
            <a class="refuse" @click="callClose()">挂断</a>
        </div>
        <!--视频-->

样式代码

.remoteVideoMask{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    left: 0px;
    top: 0px;
    background: #333;
}
.remoteVideoMask #chatRtc{
    width: 100%;
    height: 100%
}
.remoteVideoMask .refuse{
    bottom: 60px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
}
#remoteVideoMaskLogo{
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 5px;
    z-index: 9;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

JS部分代码

                    console.log(remoteStream);
                    var videoTracks = remoteStream.getVideoTracks();
                    var audioTracks = remoteStream.getAudioTracks();

                    var remoteVideo = document.getElementById("chatRtc");
                    var logo=document.getElementById("remoteVideoMaskLogo");
                    remoteVideo.srcObject = remoteStream;
                    remoteVideo.autoplay = true;
                    remoteVideo.play();
                    //视频流
                    if (videoTracks.length > 0) {
                        logo.style.display = "none";
                        remoteVideo.style.display = "block";
                    }else if (audioTracks.length > 0) {
                        //音频流
                        remoteVideo.style.display = "none";
                        logo.style.display = "block";
                    }