...
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 {
...
}
} |
12.5. Удаление кнопок переключения качества
clearQualityState() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
clearQualityState: function () {
qualityButtons.forEach((state, qName) => {
state.btn.remove();
});
qualityButtons.clear();
},
...
}
} |
12.6. Добавление видео дорожки
addVideoTrack() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
addVideoTrack: function (track, asyncCallback) {
const trackButton = document.createElement("button");
trackButtons.set(track.mid, trackButton);
trackButton.innerText = "Track №" + track.mid + ": " + track.contentType;
trackButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
trackButton.style.color = QUALITY_COLORS.AVAILABLE;
const self = this;
trackButton.addEventListener('click', async function () {
console.log("Clicked on track button track.mid " + track.mid);
if (trackButton.style.color === QUALITY_COLORS.SELECTED) {
return
}
lock();
asyncCallback().then(() => {
self.showVideoTrack(track);
}).finally(() => {
unlock();
});
});
trackDisplay.appendChild(trackButton);
},
...
}
} |
12.7. Удаление видео дорожки
removeVideoTrack() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
removeVideoTrack: function (track) {
const trackButton = trackButtons.get(track.mid);
if (trackButton) {
trackButton.remove();
trackButtons.delete(track.mid);
}
},
...
}
} |
12.8. Добавление видео элемента и назначение видео дорожки как источника проигрывания
setVideoSource() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
setVideoSource: function (remoteVideoTrack, onResize, onMute) {
if (!this.muteButton) {
const newVideoMuteBtn = document.createElement("button");
this.muteButton = newVideoMuteBtn;
newVideoMuteBtn.innerText = "mute";
newVideoMuteBtn.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
newVideoMuteBtn.addEventListener('click', async function () {
newVideoMuteBtn.disabled = true;
try {
if (newVideoMuteBtn.innerText === "mute") {
await onMute(true);
newVideoMuteBtn.innerText = "unmute";
} else if (newVideoMuteBtn.innerText === "unmute") {
await onMute(false);
newVideoMuteBtn.innerText = "mute";
}
} finally {
newVideoMuteBtn.disabled = false;
}
});
videoMuteDisplay.appendChild(newVideoMuteBtn);
}
if (videoElement) {
videoElement.remove();
videoElement = null;
}
if (!remoteVideoTrack) {
return;
}
videoElement = document.createElement("video");
hideItem(videoElement);
videoElement.setAttribute("style", "display:none; border: solid; border-width: 1px");
const stream = new MediaStream();
streamDisplay.appendChild(videoElement);
videoElement.srcObject = stream;
videoElement.onloadedmetadata = function (e) {
videoElement.play();
};
videoElement.addEventListener("resize", function (event) {
showItem(resolutionLabel);
if (videoElement) {
resolutionLabel.innerText = videoElement.videoWidth + "x" + videoElement.videoHeight;
resizeVideo(event.target);
onResize();
}
});
stream.addTrack(remoteVideoTrack);
if (Browser().isSafariWebRTC()) {
videoElement.setAttribute("playsinline", "");
videoElement.setAttribute("webkit-playsinline", "");
setWebkitEventHandlers(videoElement);
} else {
setEventHandlers(videoElement);
}
},
...
}
} |
12.9. Удаление видео элемента
removeVideoSource() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
removeVideoSource: function () {
if (videoElement) {
videoElement.remove();
videoElement = null;
}
if (this.muteButton) {
this.muteButton.remove();
this.muteButton = null;
}
hideItem(resolutionLabel);
trackNameDisplay.innerText = "track not set";
},
...
}
} |
12.10. Отображение видео элемента и информации о видео дорожке
showVideoTrack() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
showVideoTrack: function (track) {
if (videoElement) {
showItem(videoElement);
}
for (const [mid, btn] of trackButtons.entries()) {
if (mid === track.mid) {
btn.style.color = QUALITY_COLORS.SELECTED;
} else if (btn.style.color === QUALITY_COLORS.SELECTED) {
btn.style.color = QUALITY_COLORS.AVAILABLE;
}
}
trackNameDisplay.innerText = "Current video track: " + track.mid;
showItem(trackNameDisplay);
},
...
}
} |
12.11. Обновление информации о качестве
updateQuality() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
updateQuality: function (qualityName, available) {
const value = qualityButtons.get(qualityName);
if (value) {
const qualityButton = value.btn;
value.available = available;
if (qualityButton.style.color === QUALITY_COLORS.SELECTED) {
return;
}
if (available) {
qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
} else {
qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE;
}
}
},
...
}
} |
12.12. Добавление кнопки выбора качества
addQuality() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
addQuality: function (qualityName, available, onPickQuality) {
const qualityButton = document.createElement("button");
qualityButtons.set(qualityName, {btn: qualityButton, available: available});
qualityButton.innerText = qualityName;
qualityButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
if (available) {
qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
} else {
qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE;
}
qualityDisplay.appendChild(qualityButton);
qualityButton.addEventListener('click', async function () {
console.log("Clicked on quality button " + qualityName);
if (qualityButton.style.color === QUALITY_COLORS.SELECTED || qualityButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
return;
}
lock();
onPickQuality().finally(() => unlock());
});
},
...
}
} |
12.13. Нажатие на кнопку выбора качества
pickQuality() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
pickQuality: function (qualityName) {
repickQuality(qualityName);
}
...
}
} |
12.14. Завершение работы плеера
dispose() code
| Code Block |
|---|
|
const createVideoPlayer = function (participantDiv) {
...
return {
...
dispose: function () {
streamDisplay.remove();
},
...
}
} |
13. Получение дорожки из комнаты для отображения
remoteTrackProvider() code
| Code Block |
|---|
|
const remoteTrackProvider = function (room) {
return {
getVideoTrack: async function () {
return await room.getRemoteTrack("VIDEO", false);
},
getAudioTrack: async function () {
return await room.getRemoteTrack("AUDIO", true);
}
}
} |
14. Вспомогательные функции
14.1. Изменение размера видео под размеры плеера
resizeVideo(), downScaleToFitSize() code
| Code Block |
|---|
|
const resizeVideo = function (video, width, height) {
// TODO: fix
if (video) {
return;
}
if (!video.parentNode) {
return;
}
if (video instanceof HTMLCanvasElement) {
video.videoWidth = video.width;
video.videoHeight = video.height;
}
const display = video.parentNode;
const parentSize = {
w: display.parentNode.clientWidth,
h: display.parentNode.clientHeight
};
let newSize;
if (width && height) {
newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h);
} else {
newSize = downScaleToFitSize(video.videoWidth, video.videoHeight, parentSize.w, parentSize.h);
}
display.style.width = newSize.w + "px";
display.style.height = newSize.h + "px";
//vertical align
let margin = 0;
if (parentSize.h - newSize.h > 1) {
margin = Math.floor((parentSize.h - newSize.h) / 2);
}
display.style.margin = margin + "px auto";
console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
}
const downScaleToFitSize = function (videoWidth, videoHeight, dstWidth, dstHeight) {
var newWidth, newHeight;
var videoRatio = videoWidth / videoHeight;
var dstRatio = dstWidth / dstHeight;
if (dstRatio > videoRatio) {
newHeight = dstHeight;
newWidth = Math.floor(videoRatio * dstHeight);
} else {
newWidth = dstWidth;
newHeight = Math.floor(dstWidth / videoRatio);
}
return {
w: newWidth,
h: newHeight
};
} |
14.2. Создание элемента для отображения текстовой информации
createInfoDisplay() code
| Code Block |
|---|
|
const createInfoDisplay = function (parent, text) {
const div = document.createElement("div");
if (text) {
div.innerHTML = text;
}
div.setAttribute("style", "width:auto; height:30px;");
div.setAttribute("class", "text-center");
if (parent) {
parent.appendChild(div);
}
return div;
} |
14.3. Создание элемента-контейнера
createContainer() code
| Code Block |
|---|
|
const createContainer = function (parent) {
const div = document.createElement("div");
div.setAttribute("style", "width:auto; height:auto;");
div.setAttribute("class", "text-center");
if (parent) {
parent.appendChild(div);
}
return div;
} |
14.4. Скрытие и отображение элемента на странице
showItem(), hideItem() code
| Code Block |
|---|
|
const showItem = function (tag) {
if (tag) {
tag.style.display = "block";
}
}
const hideItem = function (tag) {
if (tag) {
tag.style.display = "none";
}
} |