浏览器语音视频功能-CSDN博客

本文链接：https://blog.csdn.net/weixin_47021806/article/details/144706582

在这里插入图片描述

需求:
1:查看当前的语音视频频道的队列状况
2:获取到临时的语音视频用户名
3:跳转到指定的语音聊天房间

lc/Pyfile/Pywebback/app/yuyin/templates/zhuye/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}语音主页{% endblock %}</title>
</head>
<body class="bg-gray-1200 text-white">
    <div>
        {% block content %}{% endblock %}
    </div>
    <!-- <div class="max-w-4xl mx-auto py-8 px-4"></div> -->
</body>
</html>

lc/Pyfile/Pywebback/app/yuyin/templates/zhuye/zhuye.html

{% extends "zhuye/base.html" %}

{% block title %}替换掉base中的title{% endblock %}


<!-- 插入各个html   这里就是设置整个页面的主题 -->
{% block content %}
    
    
    <!-- 页面上部分显示   语音列表中的繁忙程度-->
    {% include "zhuye/yuyin_list.html" %}

    <!-- 获取验证码 -->
    {% include "zhuye/getcode.html" %}

    <!-- 进入语音按钮 -->
    {% include "zhuye/get_voice.html" %}
{% endblock %}

lc/Pyfile/Pywebback/app/yuyin/templates/zhuye/yuyin_list.html

{% load static %} <!-- 加载静态文件标签 -->
<link rel="stylesheet" href="{% static 'test/yuyin/yuyin_list.css' %}"> <!-- 引用CSS文件 -->
<!-- 获取频道排队数据列表 -->
<script src="{% static 'test/yuyin/get_channel_list.js' %}"></script>

<div>
    <div>视频语音频道列表</div>
    <div>
        <span>语音频道1</span><span>排队人数:</span><span id="audio1-queue">(当前排队的人数数量)</span>
    </div>
    <div>
        <span>语音频道2</span><span>排队人数:</span><span id="audio2-queue">(当前排队的人数数量)</span>
    </div>
    <div>
        <span>视频语音频道3</span><span>排队人数:</span><span id="video1-queue">(当前排队的人数数量)</span>
    </div>
    <div>
        <span>视频语音频道4</span><span>排队人数:</span><span id="video2-queue">(当前排队的人数数量)</span>
    </div>
</div>
<hr>
<div class="container4">
    <div>
        <span>语音频道1</span><span>排队人数:</span><span id="audio1-queue-summary">(当前排队的人数数量)</span>
        <p>排队列表</p>
        <div id="audio1-queue-list"></div>
    </div>
    <div>
        <span>语音频道2</span><span>排队人数:</span><span id="audio2-queue-summary">(当前排队的人数数量)</span>
        <p>排队列表</p>
        <div id="audio2-queue-list"></div>
    </div>
    <div>
        <span>视频语音频道3</span><span>排队人数:</span><span id="video1-queue-summary">(当前排队的人数数量)</span>
        <p>排队列表