Twilio-Video: нет звука / нет звука, но видео работает
Я пытаюсь понять, как создать комнату Go с Twilio-Video. Видеосвязь работает хорошо, поэтому я предполагаю, что токен действителен. Но звука нет. В обе стороны. Соответствующий JS приведен ниже.
Я уже просмотрел различные руководства и связанные вопросы, но я не могу понять, где я ошибаюсь. Я предполагаю, что токен также действителен, поскольку видеосвязь работает. На протестированных мною устройствах другие приложения для видеочата работают хорошо. Я даже тестировал разные браузеры, но безуспешно.
let room;
// Called after page load.
const joinRoom = async (token, roomName) => {
const Video = Twilio.Video;
const localTracks = await Video.createLocalTracks({
audio: true,
video: { width: 1280, height: 720 },
});
try {
room = await Video.connect(token, {
name: roomName,
tracks: localTracks,
});
} catch (error) {
console.log(error);
}
const localMediaContainer = document.getElementById("local-media-container");
localTracks.forEach((localTrack) => {
localMediaContainer.appendChild(localTrack.attach());
});
try {
room.participants.forEach(onParticipantConnected);
room.on("participantConnected", onParticipantConnected);
room.on("participantDisconnected", onParticipantDisconnected);
} catch (error) {
console.log(error);
}
// Mute audio button
const muteBtn = document.getElementById('mute-btn');
const unmuteBtn = document.getElementById('unmute-btn');
muteBtn.onclick = function(event) {
try {
room.localParticipant.audioTracks.forEach(track => {
track.track.disable();
});
} catch (error) {
console.log(error);
}
muteBtn.classList.add('d-none');
unmuteBtn.classList.remove('d-none');
};
unmuteBtn.onclick = function(event) {
try {
room.localParticipant.audioTracks.forEach(track => {
track.track.enable();
});
} catch (error) {
console.log(error);
}
unmuteBtn.classList.add('d-none');
muteBtn.classList.remove('d-none');
};
// Stop video button
const stopVideoBtn = document.getElementById('stop-video-btn');
const startVideoBtn = document.getElementById('start-video-btn');
stopVideoBtn.onclick = function(event) {
try {
room.localParticipant.videoTracks.forEach(track => {
track.track.disable();
});
} catch (error) {
console.log(error);
}
stopVideoBtn.classList.add('d-none');
startVideoBtn.classList.remove('d-none');
};
startVideoBtn.onclick = function(event) {
try {
room.localParticipant.videoTracks.forEach(track => {
track.track.enable();
});
} catch (error) {
console.log(error);
}
startVideoBtn.classList.add('d-none');
stopVideoBtn.classList.remove('d-none');
};
};
const onParticipantDisconnected = (participant) => {
const participantDiv = document.getElementById("peer-media-container");
participantDiv.innerHTML = '<div class="d-flex flex-row w-100 h-100 align-items-center justify-content-center text-center text-white">Call ended.</div>';
};
const onParticipantConnected = (participant) => {
const participantDiv = document.getElementById("peer-media-container");
const trackSubscribed = (track) => {
participantDiv.innerHTML = "";
participantDiv.appendChild(track.attach());
};
participant.on("trackSubscribed", trackSubscribed);
participant.tracks.forEach((publication) => {
if (publication.isSubscribed) {
trackSubscribed(publication.track);
}
});
const trackUnsubscribed = (track) => {
track.detach().forEach((element) => element.remove());
};
participant.on("trackUnsubscribed", trackUnsubscribed);
};
const onLeaveButtonClick = (event) => {
room.localParticipant.tracks.forEach((publication) => {
const track = publication.track;
track.stop();
const elements = track.detach();
elements.forEach((element) => element.remove());
});
room.disconnect();
close();
};