如何使用 [agora.io] 接收远程流

Posted 2023-03-14

【中文标题】如何使用 [agora.io] 接收远程流

【英文标题】：How can I receive remote stream using [agora.io]

【发布时间】：2020-05-20 15:37:47

【问题描述】：

我无法从远程流中接收任何数据，并且我使用 javascript 创建的具有远程流 ID 的 div 没有显示我不明白为什么！ Javascript代码在浏览器上不起作用有点奇怪这是我第一次遇到这种问题请帮助我解决它。

这是代码：

// Local stream

// rtc object
var rtc = 
  client: null,
  joined: false,
  published: false,
  localStream: null,
  remoteStreams: [],
  params: 
;

// Options for joining a channel
var option = 
  mode: "rtc",
  codec: "h264",
  appID: "22a27d03d0edf54749a03597d72ad82aaa78",
  channel: "qiossa",
  uid: null,
  token: "006a27d03d0edf54749a03597d72ad82aaaIADHJF46Q3g4Jn+mjfRgh5Le76OO2BpUfEuvw1Qv+35XKFwgy+4AAAAAEACfOV6k44bGXgEAAQCIh8Ze"
;


// Create a client
rtc.client = AgoraRTC.createClient(mode: option.mode, codec: option.codec);

// Initialize the client
rtc.client.init(option.appID, function () 
  console.log("init success");
  , (err) => 
  console.error(err);
);


// Join a channel
rtc.client.join(option.token, option.channel, option.uid, function (uid) 
  console.log("join channel: " + option.channel + " success, uid: " + uid);
  rtc.params.uid = uid;
, function(err) 
  console.error("client join failed", err);
);

// 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");
  // play stream with html element id "local_stream"
  rtc.localStream.play("local_stream");
, function (err) 
  console.error("init local stream failed ", err);
);


// Publish the local stream
rtc.client.publish(rtc.localStream, function (err) 
  console.log("publish failed");
  console.error(err);
);

//*************************************************************************************************************//

// Remote stream

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.

  let streamDiv=document.createElement("div"); // Create a new div for every stream
  streamDiv.id= id;                            // Assigning id to div
  streamDiv.style.transform="rotateY(180deg)"; // Takes care of lateral inversion (mirror image)
  remoteContainer.appendChild(streamDiv);

  // Play the remote stream.
  remoteStream.play("remote_video_" + id);
  console.log("stream-subscribed remote-uid: ", id);
);

Photo of the problem

【参考方案1】：

需要在 join 函数中创建、初始化、播放和发布本地流。 这是 rtc.client.join() 函数的更正代码：

rtc.client.join(option.token, option.channel, option.uid, (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");
  // play stream with html element id "local_stream"
  rtc.localStream.play("local_stream");
, function (err) 
  console.error("init local stream failed ", err);
);


// Publish the local stream
rtc.client.publish(rtc.localStream, function (err) 
  console.log("publish failed");
  console.error(err);
);
, function(err) 
  console.error("client join failed", err);
);

如有任何进一步的疑问，请联系我们。

【讨论】：

我试过但没用。我将尝试在答案中发送带有代码的屏幕截图

【参考方案2】：

console problems

// Local stream

// rtc object
var rtc = 
  client: null,
  joined: false,
  published: false,
  localStream: null,
  remoteStreams: [],
  params: 
;

// Options for joining a channel
var option = 
  mode: "rtc",
  codec: "h264",
  appID: "",
  channel: "qiossa",
  uid: null,
  token: "006a27d03d0edf54749a03597d72ad82aaaIADkVIvop7lo0OEkm/7Tuz/Tp4M+TXhFd9DkLAAwu9fNllwgy+4AAAAAEAD4aAmV2FzKXgEAAQBjT8pe"
;


// Create a client
rtc.client = AgoraRTC.createClient(mode: option.mode, codec: option.codec);

// Initialize the client
rtc.client.init(option.appID, function () 
  console.log("init success");
  , (err) => 
  console.error(err);
);


// Join a channel
rtc.client.join(option.token, option.channel, option.uid, 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");
  // play stream with html element id "local_stream"
  rtc.localStream.play("local_stream");
, function (err) 
  console.error("init local stream failed ", err);
);


// Publish the local stream
rtc.client.publish(rtc.localStream, function (err) 
  console.log("publish failed");
  console.error(err);
);


, function(err) 
  console.error("client join failed", err);
);


//*************************************************************************************************************//

// Remote stream

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);
);


rtc.client.on("stream-removed", function (evt) 
  var remoteStream = evt.stream;
  var id = remoteStream.getId();
  // Stop playing the remote stream.
  remoteStream.stop("remote_video_" + id);
  // Remove the view of the remote stream. 
  removeView(id);
  console.log("stream-removed remote-uid: ", id);
);

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