Как запустить потоковое аудио / видео по запросу пользователя в RTCMulticonnection v3
Я работаю над проектом группового чата, и он работает нормально, но иногда потоковая передача не происходит. И любой пользователь, у которого в браузере не заблокирована веб-камера или веб-камера, не сможет присоединиться.
Я начинаю потоковую передачу при присоединении к комнате, поэтому, когда любой пользователь присоединяется к комнате, потоковая передача начнется автоматически, но я не хочу этого делать. Я создаю список пользователей, которые присоединились к комнате, и у каждого пользователя есть значок камеры рядом с именем в списке. Нажав на эту иконку камеры, хотите транслировать для конкретного пользователя. Так что, если я начал трансляцию, то все пользователи, которые присоединились к комнате, смогут видеть мою камеру. Если они нажмут на значок камеры рядом с его именем, чтобы начать трансляцию, тогда другие пользователи смогут увидеть его камеру, включая меня. Если он снова нажмет на значок камеры, чтобы отключить камеру, то все пользователи не смогут просматривать его камеру.
Проверьте ниже скриншот для более подробного объяснения.
По умолчанию значок камеры текущего пользователя будет виден. Все остальные значки камеры пользователя будут скрыты. Камера будет видна в начале потокового видео.
Я попытался использовать приведенный ниже код, но только моя камера начала потоковую передачу, не в состоянии просмотреть камеру со стороны сверстника.
myConnection.addStream({
audio: true,
video: true
});
В текущей системе пользователь не может присоединиться, если у пользователя нет веб-камеры или заблокирована камера в браузере.
Я создал скрипт, где пользователь сможет присоединиться к комнате, даже если у него нет веб-камеры. Он начнет потоковую передачу, если у пользователя есть веб-камера, и равноправный пользователь сможет видеть текущую пользовательскую потоковую передачу.
$(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');
}
});
}
}
});
Я поднял вопрос в GitHub, чтобы получить больше информации.