CODEWITHSUNDEEP
javascripthtmlagora.iovideochatagora-web-sdk-ng
Yash Trivedi
Yash Trivedi

Reputation: 19

Mute functionality not working in Agora Web SDk

I am trying to make simple 1:1 video conferencing app with Agora web SDK, i started with their basic demo and currently am trying to implement audio/video mute/unmute functionality. I read and tried other SO answers on the same but they too didn't worked.

Here is my index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Call Demo</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<h1>
    Video Call Demo<br><small style="font-size: 14pt">Powered by Agora.io</small>
</h1>

<h4>My Feed :</h4>
<div id="me"></div>
<button onclick="myFunc()">Mute</button> <!-- button for muting -->

<p id="demo"></p> <!-- this works for onclick action of above button -->

<h4>Remote Feeds :</h4>
<div id="remote-container">

</div>
<h4>Canvas :</h4>
<div id="canvas-container">

</div>

<script src="scripts/AgoraRTCSDK-2.4.0.js"></script>
<script src="scripts/script.js"></script>
<script src="https://cdn.agora.io/sdk/release/AgoraRTCSDK-3.2.1.js"></script>
</body>
</html>

Here is script.js file where actual logic is implemented

/**
 * @name handleFail
 * @param err - error thrown by any function
 * @description Helper function to handle errors
 */
let handleFail = function(err){
    console.log("Error : ", err);
};

// Queries the container in which the remote feeds belong
let remoteContainer= document.getElementById("remote-container");
let canvasContainer =document.getElementById("canvas-container");
/**
 * @name addVideoStream
 * @param streamId
 * @description Helper function to add the video stream to "remote-container"
 */
function addVideoStream(streamId){
    let streamDiv=document.createElement("div"); // Create a new div for every stream
    streamDiv.id=streamId;                       // Assigning id to div
    streamDiv.style.transform="rotateY(180deg)"; // Takes care of lateral inversion (mirror image)
    remoteContainer.appendChild(streamDiv);      // Add new div to container
}
/**
 * @name removeVideoStream
 * @param evt - Remove event
 * @description Helper function to remove the video stream from "remote-container"
 */
function removeVideoStream (evt) {
    let stream = evt.stream;
    stream.stop();
    let remDiv=document.getElementById(stream.getId());
    remDiv.parentNode.removeChild(remDiv);
    console.log("Remote stream is removed " + stream.getId());
}

function addCanvas(streamId){
    let canvas=document.createElement("canvas");
    canvas.id='canvas'+streamId;
    canvasContainer.appendChild(canvas);
    let ctx = canvas.getContext('2d');
    let video=document.getElementById(`video${streamId}`);

    video.addEventListener('loadedmetadata', function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
    });

    video.addEventListener('play', function() {
        const $this = this; //cache
        (function loop() {
            if (!$this.paused && !$this.ended) {
                ctx.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);
}

// Client Setup
// Defines a client for RTC
let client = AgoraRTC.createClient({
    mode: 'live',
    codec: "h264"
});

// Client Setup
// Defines a client for Real Time Communication
client.init("d2684f11650c446faaeb289d973e2dd3",() => console.log("AgoraRTC client initialized") ,handleFail);

let localStream = AgoraRTC.createStream({
    // streamID: uid,
    audio: true,
    video: true,
    screen: false,
    camera: {
        camId: '',
        micId: '',
        stream: {}
    }
});
// The client joins the channel
client.join(null,"any-channel",null, (uid)=>{

    localStorage.streamID = uid
    // Stream object associated with your web cam is initialized
    // let localStream = AgoraRTC.createStream({
    //     streamID: uid,
    //     audio: true,
    //     video: true,
    //     screen: false
    // });

    // Associates the stream to the client
    localStream.init(function() {

        //Plays the localVideo
        localStream.play('me');
        //Publishes the stream to the channel
        client.publish(localStream, handleFail);

    },handleFail);


},handleFail);
//When a stream is added to a channel
client.on('stream-added', function (evt) {
    client.subscribe(evt.stream, handleFail);
});
//When you subscribe to a stream
client.on('stream-subscribed', function (evt) {
    let stream = evt.stream;
    addVideoStream(stream.getId());
    stream.play(stream.getId());
    addCanvas(stream.getId());
});

// this is the function for muting
function myFunc(){
    document.getElementById("demo").innerHTML="yay" // p tag works
    let x = localStream.muteVideo(); // from docs
    console.log(x);
    // taken from one of the answers but it isn't working
    client.on("mute-video", function (evt) {
        const remoteId = evt.uid;
        localStream.camera.stream.muteVideo();
    });
}
//When a person is removed from the stream
client.on('stream-removed',removeVideoStream);
client.on('peer-leave',removeVideoStream);

Upvotes: 1

Views: 1162

Answers (1)

Akshat Gupta
Akshat Gupta

Reputation: 582

There are JavaScript scope errors for a few variables and objects you have given. I would recommend fixing those. You have also tried to import two versions of the SDK (2.x and 3.x) in the HTML file.

For example: script.js:62 Uncaught ReferenceError: AgoraRTC is not defined. Try to debug all such errors you see in the console.

I would recommend following the Agora documentation for setting up a working video call and the muteAudio and the muteVideo functions for muting audio and video.

Upvotes: 0

Related Questions