javascript - Agora API Addview 函数在 Javascript 中不起作用

Question

我正在尝试使用Agora API

一切都很好，但我的 Javascript 中创建容器以查看我的网络摄像头的 Addview 函数不起作用

我在听完“stream-subscribed”事件后调用它，但它不起作用。

我发现它不监听“stream-added”事件我不知道为什么>

请注意:

我添加了App_ID我添加了 channel 名称我添加了 token

感谢帮助

我的 Javescript 文件

// 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"); 
    // 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);
                })

                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);
                })
            }, 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();
    }
  }

我的html

<!DOCTYPE html>
<html lang="en">
<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>

Answer 1

您需要将事件回调移至加入 channel 成功之外。客户端回调需要在与客户端初始化相同的 block 内发生。

通过等待 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();
  }
}