语音通话视频通话界面实现，用于展示出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";
                    }

十年开发经验程序员，离职全心创业中，历时三年开发出的产品《唯一客服系统》

一款基于Golang+Vue开发的在线客服系统，软件著作权编号：2021SR1462600。一套可私有化部署的网站在线客服系统，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的全渠道在线客服系统，致力于帮助广大开发者/公司快速部署整合私有化客服功能。

开源地址：唯一客服（开源学习版）