时间戳

首页 > 解决方案 > 静音功能在 Agora Web SDK 中不起作用

javascript - 静音功能在 Agora Web SDK 中不起作用

问题描述

我正在尝试使用 Agora Web SDK 制作简单的 1:1 视频会议应用程序，我从他们的基本演示开始，目前正在尝试实现音频/视频静音/取消静音功能。我阅读并尝试了其他相同的答案，但它们也没有奏效。

这是我的 index.html 文件

<!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>

这是实现实际逻辑的 script.js 文件

/**
 * @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);

标签： javascripthtmlagora.iovideochatagora-web-sdk-ng

解决方案

您给出的一些变量和对象存在 JavaScript 范围错误。我建议修复这些。您还尝试在 HTML 文件中导入两个版本的 SDK（2.x 和 3.x）。

例如：script.js:62 Uncaught ReferenceError: AgoraRTC is not defined。尝试调试您在控制台中看到的所有此类错误。

我建议遵循Agora 文档来设置有效的视频通话以及静音音频和视频muteAudio的muteVideo功能。

推荐阅读