Agora API Addview 函数在 Javascript 中不起作用
我正在尝试使用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>
慕桂英4014372浏览 31回答 1
1回答
-
慕的地10843
您需要将事件回调移至加入频道成功之外。客户端回调需要在与客户端初始化相同的块内发生。通过等待 joinChannel 成功，为时已晚，引擎在添加侦听器之前就触发了该事件。使用上面的 JS 代码，它应该如下所示：// rtc objectvar rtc = { client: null, joined: false, published: false, localStream: null, remoteStreams: [], params: {}};// Options for joining a channelvar 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(); }}
随时随地看视频慕课网APP
相关分类
Html5