...
Code Block |
---|
|
const createOneToManyParticipantView = function () {
...
return {
...
dispose: function () {
player.dispose();
for (const element of audioElements.values()) {
element.remove();
}
audioElements.clear();
},
...
}
} |
12. Создание объекта видео плеера
createVideoPlayer() code
Code Block |
---|
|
const createVideoPlayer = function (participantDiv) {
const streamDisplay = createContainer(participantDiv);
const resolutionLabel = createInfoDisplay(streamDisplay, "0x0");
hideItem(resolutionLabel);
const trackNameDisplay = createInfoDisplay(streamDisplay, "track not set");
hideItem(trackNameDisplay);
const videoMuteDisplay = createContainer(streamDisplay);
const qualityDisplay = createContainer(streamDisplay);
const trackDisplay = createContainer(streamDisplay);
let videoElement;
const trackButtons = new Map();
const qualityButtons = new Map();
const lock = function () {
...
}
const unlock = function () {
...
}
const setWebkitEventHandlers = function (video) {
...
}
const setEventHandlers = function (video) {
...
}
const repickQuality = function (qualityName) {
...
}
return {
rootDiv: streamDisplay,
muteButton: null,
autoButton: null,
dispose: function () {
...
},
clearQualityState: function () {
...
},
addVideoTrack: function (track, asyncCallback) {
...
},
removeVideoTrack: function (track) {
...
},
setVideoSource: function (remoteVideoTrack, onResize, onMute) {
...
},
removeVideoSource: function () {
...
},
showVideoTrack: function (track) {
...
},
updateQuality: function (qualityName, available) {
...
},
addQuality: function (qualityName, available, onPickQuality) {
...
},
pickQuality: function (qualityName) {
...
}
}
} |
12.1. Блокировка и разблокировка кнопок плеера для асинхронных операций
lock(), unlock() code
Code Block |
---|
|
const createVideoPlayer = function (participantDiv) {
...
const lock = function () {
for (const btn of trackButtons.values()) {
btn.disabled = true;
}
for (const state of qualityButtons.values()) {
state.btn.disabled = true;
}
}
const unlock = function () {
for (const btn of trackButtons.values()) {
btn.disabled = false;
}
for (const state of qualityButtons.values()) {
state.btn.disabled = false;
}
}
...
return {
...
}
} |
12.2. Настройка обработчиков событий плеера для Safari
setWebkitEventHandlers() code
Code Block |
---|
|
const createVideoPlayer = function (participantDiv) {
...
const setWebkitEventHandlers = function (video) {
let needRestart = false;
let isFullscreen = false;
// Use webkitbeginfullscreen event to detect full screen mode in iOS Safari
video.addEventListener("webkitbeginfullscreen", function () {
isFullscreen = true;
});
video.addEventListener("pause", function () {
if (needRestart) {
console.log("Media paused after fullscreen, continue...");
video.play();
needRestart = false;
} else {
console.log("Media paused by click, continue...");
video.play();
}
});
video.addEventListener("webkitendfullscreen", function () {
video.play();
needRestart = true;
isFullscreen = false;
});
}
...
return {
...
}
} |
12.3. Настройка обработчиков событий плеера для других браузеров
setEventHandlers() code
Code Block |
---|
|
const createVideoPlayer = function (participantDiv) {
...
const setEventHandlers = function (video) {
// Ignore play/pause button
video.addEventListener("pause", function () {
console.log("Media paused by click, continue...");
video.play();
});
}
...
return {
...
}
} |
12.4. Перерисовка кнопок переключения качества
repickQuality) code
Code Block |
---|
|
const createVideoPlayer = function (participantDiv) {
...
const repickQuality = function (qualityName) {
for (const [quality, state] of qualityButtons.entries()) {
if (quality === qualityName) {
state.btn.style.color = QUALITY_COLORS.SELECTED;
} else if (state.btn.style.color === QUALITY_COLORS.SELECTED) {
if (state.available) {
state.btn.style.color = QUALITY_COLORS.AVAILABLE;
} else {
state.btn.style.color = QUALITY_COLORS.UNAVAILABLE;
}
}
}
}
...
return {
...
}
} |