静音功能在 Agora Web SDK 中不起作用
Posted
技术标签:
【中文标题】静音功能在 Agora Web SDK 中不起作用【英文标题】：Mute functionality not working in Agora Web SDk 【发布时间】：2021-06-20 09:08:35 【问题描述】：我正在尝试使用 Agora Web SDK 制作简单的 1:1 视频会议应用程序，我从他们的基本演示开始，目前正在尝试实现音频/视频静音/取消静音功能。我阅读并尝试了相同的其他 SO 答案，但它们也没有奏效。
这是我的 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);
【问题讨论】：
【参考方案1】：您提供的一些变量和对象存在 javascript 范围错误。我建议修复这些。您还尝试在 HTML 文件中导入两个版本的 SDK（2.x 和 3.x）。
例如：script.js:62 Uncaught ReferenceError: AgoraRTC is not defined。尝试调试您在控制台中看到的所有此类错误。
我建议您使用 Agora documentation 来设置有效的视频通话，使用 muteAudio 和 muteVideo 功能来静音音频和视频。
【讨论】：
以上是关于静音功能在 Agora Web SDK 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Facebook 应用邀请在使用 Facebook SDK 4.X 的 iOS8 中不起作用？