Javascript中的Agora API Addview函数不'；行不通

我正在尝试使用AgoraAPI

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

我在听了“流订阅”事件后调用它，但它不起作用

我发现它不收听“添加流”事件我不知道为什么>

请注意:

我添加了App\u ID 我加了频道名 我添加了令牌

谢谢你的帮助

我的标枪文件

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

//rtc对象
var rtc={
客户机：空，
加入：假，
发表：错，
localStream:null，
remoteStreams:[]，
参数：{}
};
//加入频道的选项
var选项={
appID:“我的应用程序ID”，
频道：“我的频道名称”，
uid:null，
令牌：“信道令牌”
}
$（“#创建”）。单击（函数（）{
//创建客户机
rtc.client=AgoraRTC.createClient（{mode:“live”，codec:“h264”}）；
//初始化客户端
rtc.client.init（option.appID，函数（）{
console.log（“初始化成功”）；
//角色的价值可以是“主持人”或“观众”。
rtc.client.setClientRole（“主机”）；
//加入频道
rtc.client.join（option.token？option.token:null，option.channel，option.uid？+option.uid:null，函数（uid）{
log（“加入频道：+option.channel+”成功，uid:+uid）；
rtc.params.uid=uid；
//创建本地流
rtc.localStream=AgoraRTC.createStream({
streamID:rtc.params.uid，
音频：是的，
视频：没错，
屏幕：假，
})
//初始化本地流
rtc.localStream.init（函数（）{
log（“初始化本地流成功”）；
//发布本地流
rtc.client.publish（rtc.localStream，函数（err）{
console.log（“发布失败”）；
控制台错误（err）；
})
on（“添加流”，函数（evt）{
var remoteStream=evt.stream；
var id=remoteStream.getId（）；
if（id！==rtc.params.uid）{
rtc.client.subscribe（远程流，函数（err）{
log（“流订阅失败”，错误）；
})
}
log（'流添加的远程uid:'，id）；
});
rtc.client.on（“流订阅”，函数（evt）{
var remoteStream=evt.stream；
var id=remoteStream.getId（）；
//添加远程流的视图。
addView（id）；
//播放远程流。
播放（“远程视频”+id）；
log（'stream-subscribed remote uid:'，id）；
})
}，函数（err）{
错误（“初始化本地流失败”，错误）；
})
}，函数（err）{
console.error（“客户端加入失败”，err）
})
}，（错误）=>{
控制台错误（err）；
});
});
$（“#离开”）。单击（函数（）{
//离开频道
rtc.client.leave（函数（）{
//停止播放本地流
rtc.localStream.stop（）；
//关闭本地流
rtc.localStream.close（）；
//停止播放远程流并删除视图
而（rtc.remoteStreams.length>0）{
var stream=rtc.remoteStreams.shift（）；
var id=stream.getId（）；
stream.stop（）；
移除视图（id）；
}
console.log（“客户端离开通道成功”）；
}，函数（err）{
console.log（“通道离开失败”）；
控制台错误（err）；
})
});
函数addView（id，show）{
如果（！$（“#”+id）[0]）{
$("", {
id:“远程视频面板”+id，
类：“视频视图”，
}).附于（“视频”）；
$("", {
id:“远程视频”+id，
类：“视频占位符”，
}).appendTo（“#远程视频面板+id”）；
$("", {
id:“远程视频信息”+id，
类：“视频配置文件”+（显示？：“隐藏”），
}).appendTo（“#远程视频面板+id”）；
$("", {
id:“视频自动播放”+id，
类：“自动播放回退隐藏”，
}).appendTo（“#远程视频面板+id”）；
}
}
函数removeView（id）{
if（$（“#远程#视频#面板#+id）[0]）{
$（“#远程#视频#面板#”+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>

基本直播
创造
离开

您需要将事件回调移到“加入成功”频道之外。客户端回调需要在与客户端初始化相同的块中发生

如果等待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();
  }
}

//rtc对象
var rtc={
客户机：空，
加入：假，
发表：错，
localStream:null，
remoteStreams:[]，
参数：{}
};
//加入频道的选项
var选项={
appID:“我的应用程序ID”，
频道：“我的频道名称”，
uid:null，
令牌：“信道令牌”
}
$（“#创建”）。单击（函数（）{
//创建客户机
rtc.client=AgoraRTC.createClient({
模式：“现场”，
编解码器：“h264”
});
//初始化客户端
rtc.client.init（option.appID，function（））{
console.log（“初始化成功”）；
//角色的价值可以是“主持人”或“观众”。
rtc.client.setClientRole（“主机”）；
//在加入通道之前定义回调
rtc.client.on（“添加流”，函数（evt）{
var remoteStream=evt.stream；
var id=remoteStream.getId（）；
if（id！==rtc.params.uid）{
rtc.client.subscribe（远程流，函数（err）{
log（“流订阅失败”，错误）；
})
}