使用H5编写的语音视频通话界面（主要用于移动端）

最新推荐文章于 2025-02-24 14:16:05 发布

三脚猫的喵

最新推荐文章于 2025-02-24 14:16:05 发布

阅读量1.9k

点赞数 2

分类专栏：系统示例代码文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_45465881/article/details/130434981

版权

系统示例代码专栏收录该内容

7 篇文章

订阅专栏

这是一个使用HTML5编写的语音视频通话界面，适用于移动端应用。页面样式和交互逻辑主要由CSS和JavaScript实现，包括接听、挂断、拒绝、切换麦克风和相机的功能。用户界面设计简洁，提供了一定的实时通话计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>