При разработке функций голосового и видеовызова 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";
}