How can I receive remote stream using [agora.io] - webrtc

Question

I can't receive any data from the remote stream and the div with the id of the remote streams that I've created with Javascript doesn't show I don't understand why ! The Javascript code doesn't work on the browser it's a little bit strange it's my first time coming across with this kind of problem please help me solve it.
This is the code :
// 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

Answer 1

The local stream needs to be created, initialised, played and published within the join function.
This is the corrected code for the rtc.client.join() function:
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);
});
Get back to us for any further queries.

Answer 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()
}
}