this is my html file
<div id="remote-video-frame">
<div class="mutedVideo" v-if="remotemutedVideo">{{user}}</div>
<div id="remote-video" class="remote-video" v-if="!remotemutedVideo" v-if="remoteJoined" ></div>
<div class="content-center waitremote" v-else>
<div class="pulse"> <i class="fas fa-phone fa-2x"></i> </div>
<p>Waiting {{singleUser}} to response to this video call now.</p>
</div>
</div>
js file
handleVideoToggle() {
if (this.mutedVideo) {
this.localStream.unmuteVideo();
this.mutedVideo = false;
} else {
this.localStream.muteVideo();
this.mutedVideo = true;
}
i declared remotemutedVideo in my js file and tried to declare the state of it in handleVideoToggle but its still wont work, how could i get the mute status from the remote there and show to local that remote user muted their video instead of just getting a black screen
I'm assuming you are using the 3.x Web SDK. You can use this to understand when a user mutes themselves.
https://docs.agora.io/en/All/API%20Reference/web/interfaces/agorartc.stream.html#mutevideo
// Toggle User Avatar
client.on("mute-video", function (evt) {
var remoteId = evt.uid;
if (remoteId != mainStreamId) {
toggleVisibility('#' + remoteId + '_no-video', true);
}
});
client.on("unmute-video", function (evt) {
toggleVisibility('#' + evt.uid + '_no-video', false);
});```