语音通话视频通话界面实现,用于展示出webRTC实时聊天媒体流,CSS实现效果
2023-06-13 09:15:18 时间
在开发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";
}
相关文章
- 第四章·Sersync 实时同步实战
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- 有什么办法可以实时监控微信_微信被监控有什么特征
- 评论显示实时头像
- 【CSS教程】简约渐变色登陆布局html+css代码
- 实时化浪潮下,Apache Flink还将在大数据领域掀起怎样的变革?
- linux下实时监测tomcat关闭并启动详解程序员
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- SUSE Linux 企业版的实时补丁将带来无中断的服务
- Oracle数据推送:让数据变得更加高效、实时(oracle数据推送)
- MySQL:实现实时数据库管理(mysql实时数据库)
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- 实时将日志写入Redis一种性能更高的体验(日志实时写入redis)
- Redis写时复制海量数据实时保存(写时复制Redis)
- 实时信息交互Redis 订阅关系(redis 订阅关系)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 苹果将 AirPods 实时收听功能融入 MFi 蓝牙助听器
- CSS规则层叠的应用css必须要注意的几点
- CSS教程之css选择器、属性、值
- php压缩多个CSS为一个css的代码并缓存
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)