tianyunperfect
/
python-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!-- templates/room.html -->
<!DOCTYPE html>
<html>
<head>
    <title>语音聊天室 - {{ room_id }}</title>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        #userList {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<h1>语音聊天室 {{ room_id }}</h1>
<div id="joinForm">
    <input type="text" id="username" placeholder="输入你的名字">
    <button onclick="joinRoom()">加入房间</button>
</div>
<div id="chatRoom" style="display: none;">
    <button id="micButton" onclick="toggleMic()">🎤 点击说话</button>
    <div id="status"></div>
    <h3>房间用户列表：</h3>
    <div id="userList"></div>
</div>

<script>
    const room_id = "{{ room_id }}";
    let isMute = true;
    let localStream;
    let socket;
    const peers = {};
    let username = '';

    function joinRoom() {
        username = document.getElementById('username').value.trim();
        if (!username) {
            alert('请输入你的名字');
            return;
        }
        document.getElementById('joinForm').style.display = 'none';
        document.getElementById('chatRoom').style.display = 'block';
        initSocket();
    }

    // 初始化WebSocket连接
    function initSocket() {
        socket = io('https://chatroom.tianyunperfect.cn', {
            transports: ['websocket', 'polling'],
            upgrade: true,
            reconnection: true,
            reconnectionAttempts: 5,
            path: '/socket.io'
        });

        socket.on('connect', () => {
            console.log('Connected to server');
            document.getElementById('status').innerHTML = "已连接到服务器";
            socket.emit("join", { room: room_id, username: username });
        });

        socket.on('connect_error', (error) => {
            console.error('Connection error:', error);
            document.getElementById('status').innerHTML = "连接错误: " + error.message;
        });

        socket.on('disconnect', (reason) => {
            console.log('Disconnected:', reason);
            document.getElementById('status').innerHTML = "已断开连接: " + reason;
        });

        socket.on('update_user_list', (users) => {
            updateUserList(users);
        });

        // 其他事件处理...
    }

    function updateUserList(users) {
        const userList = document.getElementById('userList');
        userList.innerHTML = '';
        users.forEach(user => {
            const userElement = document.createElement('div');
            userElement.textContent = user;
            userList.appendChild(userElement);
        });
    }

    // 添加错误处理
    window.onerror = function(message, source, lineno, colno, error) {
        console.error('Caught error:', error);
        document.getElementById('status').innerHTML = "发生错误: " + message;
    };

      // 获取麦克风权限
      async function init() {
        try {
          localStream = await navigator.mediaDevices.getUserMedia({
            audio: true,
          });
          document.getElementById("status").innerHTML = "麦克风已就绪";
          document.getElementById("micButton").disabled = false;
        } catch (err) {
          console.error("Error accessing microphone:", err);
          document.getElementById("status").innerHTML = "无法访问麦克风: " + err.message;
          document.getElementById("micButton").disabled = true;
        }
      }

      // 切换麦克风状态
      async function toggleMic() {
        if (!localStream) {
          console.error("No localStream available");
          document.getElementById("status").innerHTML = "麦克风未就绪，请刷新页面重试";
          return;
        }

        isMute = !isMute;
        const button = document.getElementById("micButton");
        button.textContent = isMute ? "🎤 点击说话" : "🔴 正在说话";

        localStream
          .getAudioTracks()
          .forEach((track) => (track.enabled = !isMute));

        if (!isMute) {
          createPeerConnections();
        }
      }

      // 创建与房间内其他用户的对等连接
      async function createPeerConnections() {
        for (let peerId in peers) {
          if (peerId !== socket.id) {
            const peer = new RTCPeerConnection();
            peers[peerId] = peer;

            localStream
              .getTracks()
              .forEach((track) => peer.addTrack(track, localStream));

            peer.onicecandidate = (e) => {
              if (e.candidate) {
                socket.emit("candidate", {
                  candidate: e.candidate,
                  room: room_id,
                  target: peerId,
                });
              }
            };

            try {
              const offer = await peer.createOffer();
              await peer.setLocalDescription(offer);

              socket.emit("offer", {
                sdp: offer,
                room: room_id,
                target: peerId,
              });
            } catch (err) {
              console.error("Error creating or sending offer:", err);
              document.getElementById("status").innerHTML = "创建连接时出错，请刷新页面重试";
            }
          }
        }
      }

      // WebRTC信令处理
      socket.on("offer", async (data) => {
        if (data.sender === socket.id) return;

        const peer = new RTCPeerConnection();
        peers[data.sender] = peer;

        peer.onicecandidate = (e) => {
          if (e.candidate) {
            socket.emit("candidate", {
              candidate: e.candidate,
              target: data.sender,
              room: room_id,
            });
          }
        };

        peer.ontrack = (e) => {
          const audio = document.createElement("audio");
          audio.srcObject = e.streams[0];
          audio.autoplay = true;
          document.body.appendChild(audio);
        };

        await peer.setRemoteDescription(data.sdp);
        const answer = await peer.createAnswer();
        await peer.setLocalDescription(answer);

        socket.emit("answer", {
          sdp: answer,
          target: data.sender,
          room: room_id,
        });
      });

      socket.on("answer", (data) => {
        if (data.sender === socket.id) return;
        const peer = peers[data.sender];
        if (peer) {
          peer.setRemoteDescription(data.sdp);
        }
      });

      socket.on("candidate", (data) => {
        if (data.sender === socket.id) return;
        const peer = peers[data.sender];
        if (peer) {
          peer.addIceCandidate(new RTCIceCandidate(data.candidate));
        }
      });

      socket.on("user_joined", (userId) => {
        peers[userId] = null;
        if (!isMute) {
          createPeerConnections();
        }
      });

      socket.on("user_left", (userId) => {
        if (peers[userId]) {
          peers[userId].close();
          delete peers[userId];
        }
      });

      init();
</script>
</body>
</html>