如何解决静音功能在 Agora Web SDK 中不起作用
我正在尝试使用 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);
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);
解决方法
您提供的一些变量和对象存在 JavaScript 范围错误。我会建议修复这些。您还尝试在 HTML 文件中导入两个版本的 SDK（2.x 和 3.x）。
例如：script.js:62 Uncaught ReferenceError: AgoraRTC is not defined。尝试调试您在控制台中看到的所有此类错误。
我建议按照 Agora documentation 设置有效的视频通话以及 muteAudio 和 muteVideo 功能来静音音频和视频。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
