使用H5编写的语音视频通话界面，主要用于移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>语音视频通话</title>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
color: white;
}
.big-box {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
background-color: black;
}
.small-box {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
z-index: 999;
background-color: red;
}
.content-box {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99;
}
.trans {
background-color: transparent;
}
.linear {
background-image: linear-gradient(to bottom, #c8c9cc, #82848a);
}
.head-box {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10%;
}
.head-img {
width: 30%;
border-radius: 5%;
box-shadow: 0 0 5px 5px #ecf5ff;
}
.side-name {
margin-top: 5%;
font-size: 14px !important;
font-weight: bold;
}
.bottom-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 10%;
}
.tips {
text-align: center;
margin-bottom: 8%;
}
.row-box {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.button-col {
display: flex;
flex-direction: column;
align-items: center;
}
.btn-img {
width: 35%;
}
.color-1 {
background-color: #fa3534;
border-radius: 50%;
}
.color-2 {
background-color: #909399;
border-radius: 50%;
}
.color-3 {
background-color: #19be6b;
border-radius: 50%;
animation: moves 1s linear infinite;
}
.btn-text {
margin-top: 8%;
font-size: 14px !important;
}
@keyframes moves {
0% {
opacity: 0;
}
50% {
opacity: 1;
transform: translateY(90);
}
100% {
opacity: 0;
}
}
#bigBox,
#smallBox,
#micro,
#hang,
#refuse,
#camera,
#answer {
display: none;
}
</style>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/*
voice：true语音通话；false视频通话
answer：true已接听模式；false等待接听
role：true被邀请者；false邀请者
reckon：计时；
callInterval：定时器用于自定义时间显示
*/
var voice = false, role = true, answer = true, reckon = 0, callInterval = null;
$(function () {
$('#content').addClass('linear');
// 语音电话
if (voice) {
if (answer) {
$('#tipText').text('等待对方接受语音通话邀请');
$('#refuse').show();
if (role) {
$('#answer').show();
$('#refuseText').text('拒接');
}
}
} else {
if (answer) {
$('#refuse').show();
if (role) {
$('#answer').show();
$('#refuseText').text('拒接');
}
}
}
})
// 麦克风
function microClick() {
var state = $('#microText').text();
if (state == '麦克风已关闭') {
$('#microImg').attr('src', './images/audio-true.png');
$('#microText').text('麦克风已打开');
} else {
$('#microImg').attr('src', './images/audio-false.png');
$('#microText').text('麦克风已关闭');
}
}
// 挂断
function hangClick() {
clearInterval(callInterval);
alert('点击了挂断')
}
// 取消或拒绝
function refuseClick() {
alert('取消或拒绝')
}
// 切换相机
function cameraClick() {
alert('相机切换')
}
// 接听
function answerClick() {
callInterval = setInterval(function () {
changeTime(reckon += 1);
}, 1000)
$('#refuse').hide();
$('#answer').hide();
if (voice) {
$('#micro').show();
$('#hang').show();
} else {
$('#content').removeClass('linear');
$('#content').addClass('trans');
$('#headBox').hide();
$('#smallBox').show();
$('#bigBox').show();
$('#camera').show();
$('#hang').show();
$('#hangImg').addClass('btn-img2');
}
}
// 时间转化
function changeTime(param) {
let result = '';
if (param > 3600) {
//大于1小时
const hour = Math.floor(param / 3600);
result += ((hour < 10 ? '0' + hour : hour) + ":")
if (param % 3600 > 60) {
const min = Math.floor((param % 3600) / 60);
const sec = (param % 3600) % 60;
result += ((min < 10 ? '0' + min : min) + ":" + (sec < 10 ? '0' + sec : sec))
} else {
const sec = param % 3600
result += ('00:' + (sec < 10 ? '0' + sec : sec))
}
} else if (param > 60) {
//大于1分钟
const min = Math.floor(param / 60);
const sec = (param % 60);
result += ('00:' + (min < 10 ? '0' + min : min) + ":" + (sec < 10 ? '0' + sec : sec))
} else {
result += ('00:00:' + (param < 10 ? '0' + param : param))
}
this.callTime = result;
$('#tipText').text(result);
}
</script>
</head>
<body>
<div class="big-box" id="bigBox">
<div class="people">
<img src="https://img2.baidu.com/it/u=1764313044,42117373&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
style="width:100%;margin-top: 50px;">
</div>
</div>
<div class="small-box" id="smallBox">
<div class="people">
<img src="https://img2.baidu.com/it/u=4144002246,2068868174&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
style="width:100%">
</div>
</div>
<div class="content-box" id="content">
<div class="head-box" id="headBox">
<img src="https://img2.baidu.com/it/u=4144002246,2068868174&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
class="head-img">
<div class="side-name">程序员</div>
</div>
<div class="bottom-box">
<div class="tips" id="tipText">等待对方接受视频通话邀请</div>
<div class="row-box">
<div id="micro" onclick="microClick()">
<p class="button-col">
<img id="microImg" src="./images/audio-true.png" class="btn-img">
<span id="microText" class="btn-text">麦克风已打开</span>
</p>
</div>
<div id="hang" onclick="hangClick()">
<p class="button-col">
<img id="hangImg" src="./images/hang-up.png" class="btn-img color-1">
<span class="btn-text">挂断</span>
</p>
</div>
<div id="refuse" onclick="refuseClick()">
<p class="button-col">
<img src="./images/hang-up.png" class="btn-img color-1">
<span id="refuseText" class="btn-text">取消</span>
</p>
</div>
<div id="camera" onclick="cameraClick()">
<p class="button-col">
<img src="./images/swtich-camera.png" class="btn-img color-2">
<span id="cameraText" class="btn-text">切换相机</span>
</p>
</div>
<div id="answer" onclick="answerClick()">
<p class="button-col">
<img src="./images/answer-up.png" class="btn-img color-3">
<span id="answerText" class="btn-text">接听</span>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
完整项目资源，包括图片资源，请至：https://download.csdn.net/download/weixin_45465881/87741212