首页 > 解决方案 > 我使用 agoraIO web app sdk 创建了该应用,但无法加入视频通话

问题描述

我正在使用 agora io web sdk 创建一个 Web 应用程序来创建视频通话客户端。我已按照这些步骤操作,但我仍然无法通过输入另一个 appID 来加入频道。

注意:我没有在此处的脚本中写 my_app_id 但我在原始脚本页面上正确地写了它

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="AgoraRTCSDK-2.5.0"></script>

  <link rel="stylesheet" href="agora.css" />
  <link rel="stylesheet" href="bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="http://cdn.agora.io/sdk/web/AgoraRTCSDK-2.5.0.js"></script>

  <script language="javascript">
    document.onmousedown = disableclick;
    status = "Right Click Disabled";
    Function disableclick(e) {
      if (event.button == 2) {
        alert(status);
        return false;
      }
    }
  </script>

</head>

<body oncontextmenu="return false" align="center">
  <h1 id="h"><u>AGORA CONFERENCE</u></h1>

  <script>
    var client = AgoraRTC.createClient({
      mode: 'live',
      codec: "h264"
    });
    client.init('my_app_ID', function() {
      console.log("AgoraRTC client initialized");

    }, function(err) {
      console.log("AgoraRTC client init failed", err);
    });

    client.join(null, anand, null, function(uid) {
      console.log("User " + uid + " join channel successfully");

    }, function(err) {
      console.log("Join channel failed", err);
    });

    localStream = AgoraRTC.createStream({
      streamID: uid,
      audio: true,
      video: true,
      screen: false
    });


    localStream.init(function() {
      console.log("getUserMedia successfully");
      localStream.play('agora_local');

    }, function(err) {
      console.log("getUserMedia failed", err);
    });

    client.publish(localStream, function(err) {
      console.log("Publish local stream error: " + err);
    });

    client.on('stream-published', function(evt) {
      console.log("Publish local stream successfully");
    });

    client.on('stream-added', function(evt) {
      var stream = evt.stream;
      console.log("New stream added: " + stream.getId());

      client.subscribe(stream, function(err) {
        console.log("Subscribe stream failed", err);
      });
    });
    client.on('stream-subscribed', function(evt) {
      var remoteStream = evt.stream;
      console.log("Subscribe remote stream successfully: " + stream.getId());
      stream.play('agora_remote' + stream.getId());
    })

    localStream.init(function() {
      console.log("getUserMedia successfully");
      // Use agora_local as the ID of the dom element
      localStream.play('agora_local');

    }, function(err) {
      console.log("getUserMedia failed", err);
    });


    client.on('stream-subscribed', function(evt) {
      var remoteStream = evt.stream;
      console.log("Subscribe remote stream successfully: " + stream.getId());
      // Use agora_remote + stream.getId() as the ID of the dom element
      remoteStream.play('agora_remote' + stream.getId());
    })


    client.leave(function() {
      console.log("Leavel channel successfully");
    }, function(err) {
      console.log("Leave channel failed");
    });
  </script>
  <br><br><br>
  <div id="div_device" class="panel panel-default"></div>
  </p1>

  <body>
    <div id="div">
      <div id="div_device" class="panel panel-default">
        <div class="select">
          <label for="audioSource">Audio source: </label>
          <select id="audioSource"></select>
          <label for="videoSource">Video source: </label>
          <select id="videoSource"></select>
        </div>
      </div>

    </div>


    <div id="div_join" class="panel panel-default">

      <br><br><br>

      <div class="panel-body">
        App ID: <input id="appId" type="text" value="" size="36"></input>
        Channel: <input id="channel" type="text" value="1000" size="4"></input>
        Host: <input id="video" type="checkbox" checked></input>
        <button id="join" onclick="join()">Join</button>
        <button id="leave" onclick="leave()">Leave</button>
        <button id="publish" onclick="publish()">Publish</button>
        <button id="unpublish" onclick="unpublish()">Unpublish</button>
        <button id="subscribe" onclick="subscribe()">Subscribe</button>
      </div>

      <div id="agora_local" id="agora_remote">

      </div>
  </body>

</html>

标签: javascriptwebweb-applicationssdkagora.io

解决方案


在 Agora.io 的平台内加入同一个频道,每个客户端需要使用相同的 AppId 和 ChannelName。如果您有不同的 AppID 和相同的频道名称,它将不起作用,因为后端会认为这是两个唯一的频道,每个 AppId 一个。


推荐阅读