I am working on a Project of group chat and it is working fine but sometimes streaming is not happening. And any user who don't have webcam or webcam blocked in the browser then user not able to join.
I am start streaming on joining of the room, so when any user joins the room streaming will start automatically, but I don't want to do that. I am creating list of users who joined the room and each user have camera icon beside the name in the list. By clicking on that camera icon want to stream for particular user. So if I have started streaming then all the users who joined the room will be able to see my cam. If they click on camera icon beside his name to start streaming then other users should be able to view his cam including me. If again he click on camera icon to disable camera then all the users will not be able to view his cam.
Check below screenshot for more explanation.
By default current user's camera icon will be visible. All the other user's camera icon will be hidden. Cam will be visible on the start of the streaming.
I have tried using below code, but only my cam start streaming not able to view cam on peer side.
myConnection.addStream({
audio: true,
video: true
});
In the current system user can not join if user has no web cam or blocked cam in the browser.
I have created script where user will be able join the room even if they don't have webcam. It will start streaming if user has webcam and peer user will be able to see the current user streaming.
$(document).on("click", ".show-hide-user-cam", function () {
var username = $(this).data("list-username");
$(this).toggleClass("user-active");
var room_id = $(this).data("room-id");
var myConnection = getConnection(allConnections, room_id);
var unique_identifier = $(this).data("list-unique_identifier");
unique_identifier = unique_identifier.split("_");
if ($("#chat-tab-" + room_id + " .show-hide-user-cam.user-active").length) {
$("#chat-tab-" + room_id + " .activity-message").removeClass("height-409").addClass("height-259");
$("#chat-tab-" + room_id + " .video-carousel").removeClass("hide");
} else {
$("#chat-tab-" + room_id + " .activity-message").removeClass("height-259").addClass("height-409");
$("#chat-tab-" + room_id + " .video-carousel").addClass("hide");
}
$("#chat-tab-" + room_id + " .usercam_" + username).not("#my-webcam-container-" + room_id + " .usercam_" + username).toggleClass("hide");
$("#my-webcam-container-" + room_id + " .usercam_" + username).toggleClass("hide");
var streamId = $("#chat-tab-" + room_id + " .usercam_" + username).attr("id");
if (CommonFunctions.getLocalStorage("is_room_streamed_" + room_id) == 0) {
myConnection.addStream({
audio: true,
video: true
});
CommonFunctions.setLocalStorage("is_room_streamed_" + room_id, 1);
} else {
if ($(this).hasClass("user-active")) {
myConnection.attachStreams.forEach(function (stream) {
if (stream.id == streamId) {
stream.unmute('audio');
}
});
} else {
myConnection.attachStreams.forEach(function (stream) {
if (stream.id == streamId) {
stream.mute('audio');
}
});
}
}
});
I have raised issue in GitHub to get more information.
