JezK

Edit File: participantVideo.php

<?php
include("header.php");
$token = isset($_REQUEST['token']) ? $_REQUEST['token'] : '';
$channelName = isset($_REQUEST['channel_name']) ? $_REQUEST['channel_name'] : '';
$bid=isset($_REQUEST['bid']) ? $_REQUEST['bid'] : '';
?>
<style>
    #localVideo,
    #remotevideo {
        width: 500px;
        height: 65vh;
        border: 1px solid #ddd;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
	.video-box {
        background-color: #fff;
        margin: 1rem;
        padding: 1rem;
  		text-align: -webkit-center;
    }

#videos {
        display: flex;
        justify-content: space-around;
        border-radius: 0.8rem;
        background-color: #fff;
    }

#h3wait {
        display: none;
    }

#btnleave {
        visibility: hidden;
    }

#btnUnmuteAudio, #btnMuteAudio{
        position: absolute;
        bottom: 15%;
        left: 5%;
        background-color: #fff;
        border-radius: 0.8rem;
    }
</style>
<section>
<div class="video-box">
    <div id="videos">
        <div class="text-center video_div">
            <h2>Local Video</h2>
            <div id="localVideo"></div>
            
            <button id="btnMuteAudio" class="btn border" style="display:flex;" onclick="muteAudio()">
				<i style="font-size: 2rem;" class="fa fa-microphone-slash"></i>
            </button>
            <button id="btnUnmuteAudio" class="btn border" style="display:none;" onclick="unmuteAudio()"> 
				<i style="font-size: 2rem;" class="fa fa-microphone"></i>

</button>
        </div>
        <div class="text-center">
            <h2>Remote Video</h2>
            <div id="remotevideo">
                <h3 id="h3wait">Waiting for Host to join...</h3>
            </div>
            
        </div>
                
    </div>
<button id="btnleave" class="btn btn-danger w-25 m-3" onclick="leaveChannel()">End Call</button>
                </div>
</section>
<?php include("footer.php"); ?>

const localvideo = async () => {

// console.log(token, 'token')
        await rtc.client.join(appID, channelName, token, callerId);
        // const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
        // const videoTrack = await AgoraRTC.createCameraVideoTrack();
        // await rtc.client.publish([videoTrack, audioTrack]);
        // let videoPlay = document.getElementById('localVideo');
        // videoTrack.play(videoPlay);

// Create and assign the audio and video tracks
        rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
        rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();

// Publish the tracks
        await rtc.client.publish([rtc.localVideoTrack, rtc.localAudioTrack]);

// Play the local video
        const videoPlay = document.getElementById('localVideo');
        rtc.localVideoTrack.play(videoPlay);

};

const remotevideo = () => {
        rtc.client.on("user-published", async (user, mediaType) => {
            await rtc.client.subscribe(user, mediaType);
            if (mediaType === "video") {
                const remoteVideoTrack = user.videoTrack;
                let remotePlay = document.getElementById('remotevideo');
                remoteVideoTrack.play(remotePlay);
                remotePlay.style.display = 'block';
                document.getElementById('h3wait').style.display  = 'none';
                await bookingCompleted('<?php echo $bid; ?>');
            }
            if (mediaType === "audio") {
                // Handle audio track
                const remoteAudioTrack = user.audioTrack;
                let remotePlay = document.getElementById('remotevideo');
                remoteAudioTrack.play(); // No DOM element required for audio
                remotePlay.style.display = 'block';
                // Hide the waiting message
                document.getElementById('h3wait').style.display = 'none';
            }

// Listen for when a user unpublishes media
            rtc.client.on("user-unpublished", (user, mediaType) => {
                console.log("Remote user unpublished media:", user);

// If the remote user stops publishing video or audio
                // if (mediaType === "video" || mediaType === "audio") {
                //     // Show the waiting message again
                //     document.getElementById('h3wait').style.display = 'block';
                // }
            });
        });
    };

window.onload = function() {
        joinChannel();
    };

function joinChannel() {
        console.log('join')
        localvideo();
        remotevideo();
        let btnleave = document.getElementById('btnleave');
        btnleave.style.visibility = 'visible';
        let btnjoin = document.getElementById('btnjoin');
        btnjoin.style.visibility = 'hidden';
        // Show mute/unmute buttons
        document.getElementById('btnMuteAudio').style.display = 'flex';
        document.getElementById('btnUnmuteAudio').style.display = 'none';

document.getElementById('h3wait').style.display = 'block';
    }

function leaveChannel() {
        rtc.client.leave();
        window.location = 'appointment.php';
    }

function checkModel(){
        console.log('checkModel');  
    }

function muteAudio() {
        if (rtc.localAudioTrack) {
            rtc.localAudioTrack.setEnabled(false);
            isAudioMuted = true;
            document.getElementById('btnMuteAudio').style.display = 'none';
            document.getElementById('btnUnmuteAudio').style.display = 'flex';
        	document.getElementById('h3wait').style.display = 'none';
        }
    }