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

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

html部分代码

样式代码

.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";

}

查看原文