云视频会议12.12活动

<!DOCTYPE html>
<html>
<head>
    <title>Video Call</title>
</head>
<body>
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>

    <script>
        const localVideo = document.getElementById('localVideo');
        const remoteVideo = document.getElementById('remoteVideo');
        const startButton = document.getElementById('startButton');
        const callButton = document.getElementById('callButton');
        const hangupButton = document.getElementById('hangupButton');

        let localStream;
        let remoteStream;
        let peerConnection;

        const servers = {
            iceServers: [
                { urls: 'stun:stun.l.google.com:19302' }
            ]
        };

        startButton.onclick = async () => {
            localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            localVideo.srcObject = localStream;
        };

        callButton.onclick = () => {
            peerConnection = new RTCPeerConnection(servers);
            peerConnection.onicecandidate = event => {
                if (event.candidate) {
                    // Send the candidate to the remote peer
                }
            };
            peerConnection.ontrack = event => {
                remoteVideo.srcObject = event.streams[0];
            };
            localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
            // Create and send an offer to the remote peer
        };

        hangupButton.onclick = () => {
            peerConnection.close();
            peerConnection = null;
        };
    </script>
</body>
</html>