我正在尝试使用Agora API一切都很好，但我的 Javascript 中创建容器以查看我的网络摄像头的 Addview 功能不起作用我在听完“stream-subscribed”事件后调用它，但它不起作用。我发现它不监听“stream-added”事件我不知道为什么>请注意：我添加了 App_ID 我添加了频道名称 我添加了令牌感谢帮助我的网页<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Basic Live Broadcast</title><link rel="stylesheet" href="/css/common.css" /></head><body><button id="create"> create</button><button id="leave">leave</button><script src="/vendor/jquery.min.js"></script><script src="/vendor/materialize.min.js"></script><script src="/node_modules/agora-rtc-sdk/AgoraRTCSDK.min.js"></script><script src="/js/agora_ver4.js"></script></body></html>
1 回答
慕的地10843
TA贡献1785条经验 获得超8个赞
您需要将事件回调移至加入频道成功之外。客户端回调需要在与客户端初始化相同的块内发生。
通过等待 joinChannel 成功，为时已晚，引擎在添加侦听器之前就触发了该事件。
使用上面的 JS 代码，它应该如下所示：
// rtc object
var rtc = {
client: null,
joined: false,
published: false,
localStream: null,
remoteStreams: [],
params: {}
};
// Options for joining a channel
var option = {
appID: "MY_APP_ID",
channel: "MY_Channel_Name",
uid: null,
token: "Channel_Token"
}
$('#create').click(function() {
// Create a client
rtc.client = AgoraRTC.createClient({
mode: "live",
codec: "h264"
});
// Initialize the client
rtc.client.init(option.appID, function() {
console.log("init success");
// The value of role can be "host" or "audience".
rtc.client.setClientRole("host");
// define callbacks before joining the channel
rtc.client.on("stream-added", function(evt) {
var remoteStream = evt.stream;
var id = remoteStream.getId();
if (id !== rtc.params.uid) {
rtc.client.subscribe(remoteStream, function(err) {
console.log("stream subscribe failed", err);
})
}
console.log('stream-added remote-uid: ', id);
});
rtc.client.on("stream-subscribed", function(evt) {
var remoteStream = evt.stream;
var id = remoteStream.getId();
// Add a view for the remote stream.
addView(id);
// Play the remote stream.
remoteStream.play("remote_video_" + id);
console.log('stream-subscribed remote-uid: ', id);
})
// Join a channel
rtc.client.join(option.token ? option.token : null, option.channel, option.uid ? +option.uid : null, function(uid) {
console.log("join channel: " + option.channel + " success, uid: " + uid);
rtc.params.uid = uid;
// Create a local stream
rtc.localStream = AgoraRTC.createStream({
streamID: rtc.params.uid,
audio: true,
video: true,
screen: false,
})
// Initialize the local stream
rtc.localStream.init(function() {
console.log("init local stream success");
// Publish the local stream
rtc.client.publish(rtc.localStream, function(err) {
console.log("publish failed");
console.error(err);
})
}, function(err) {
console.error("init local stream failed ", err);
})
}, function(err) {
console.error("client join failed", err)
})
}, (err) => {
console.error(err);
});
});
$('#leave').click(function() {
// Leave the channel
rtc.client.leave(function() {
// Stop playing the local stream
rtc.localStream.stop();
// Close the local stream
rtc.localStream.close();
// Stop playing the remote streams and remove the views
while (rtc.remoteStreams.length > 0) {
var stream = rtc.remoteStreams.shift();
var id = stream.getId();
stream.stop();
removeView(id);
}
console.log("client leaves channel success");
}, function(err) {
console.log("channel leave failed");
console.error(err);
})
});
function addView(id, show) {
if (!$("#" + id)[0]) {
$("<div/>", {
id: "remote_video_panel_" + id,
class: "video-view",
}).appendTo("#video");
$("<div/>", {
id: "remote_video_" + id,
class: "video-placeholder",
}).appendTo("#remote_video_panel_" + id);
$("<div/>", {
id: "remote_video_info_" + id,
class: "video-profile " + (show ? "" : "hide"),
}).appendTo("#remote_video_panel_" + id);
$("<div/>", {
id: "video_autoplay_" + id,
class: "autoplay-fallback hide",
}).appendTo("#remote_video_panel_" + id);
}
}
function removeView(id) {
if ($("#remote_video_panel_" + id)[0]) {
$("#remote_video_panel_" + id).remove();
}
}
- 1 回答
- 0 关注
- 47 浏览
添加回答
举报
0/150
提交
取消