ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - improve RTMP Streamer UI

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2024-07-29 09:50:07 +02:00
الأصل 8efe82fa95
التزام 0178935b2a
8 ملفات معدلة مع 171 إضافات و23 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

6
public/js/Room.js
عرض الملف

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.5.28
* @version 1.5.29
*
*/
@@ -1794,7 +1794,7 @@ function handleButtons() {
rc.stopRTMP();
};
streamerRtmpButton.onclick = () => {
openURL(`/rtmp?v=${videoSelect.value}&a=${microphoneSelect.value}`, true);
rc.openRTMPStreamer();
};
startRtmpURLButton.onclick = () => {
rc.startRTMPfromURL(rtmpStreamURL.value);
@@ -4318,7 +4318,7 @@ function showAbout() {
imageUrl: image.about,
customClass: { image: 'img-about' },
position: 'center',
title: 'WebRTC SFU v1.5.28',
title: 'WebRTC SFU v1.5.29',
html: `
<br />
<div id="about">

9
public/js/RoomClient.js
عرض الملف

@@ -9,7 +9,7 @@
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.5.28
* @version 1.5.29
*
*/
@@ -8056,6 +8056,13 @@ class RoomClient {
// RTMP common
// ##############################################
openRTMPStreamer() {
const color = encodeURIComponent(themeCustom.color);
const options = `&t=${selectTheme.value}` + (themeCustom.keep ? `&c=${color}` : '');
const url = `/rtmp?v=${videoSelect.value}&a=${microphoneSelect.value}${options}`;
openURL(url, true);
}
isRTMPVideoSupported(video) {
if (video.endsWith('.mp4') || video.endsWith('.webm')) return true;
return false;

80
public/js/RtmpStreamer.js
عرض الملف

@@ -14,6 +14,8 @@ const closePopup = document.getElementById('closePopup');
const qs = new URLSearchParams(window.location.search);
const videoId = filterXSS(qs.get('v'));
const audioId = filterXSS(qs.get('a'));
const theme = filterXSS(qs.get('t'));
const color = filterXSS(qs.get('c'));
console.log('Video/Audio id', {
video: videoId,
@@ -252,12 +254,90 @@ function copyRTMP() {
showPopup('Copied: ' + rtmpInput.value, 'success');
}
function setCustomTheme() {
document.documentElement.style.setProperty('--body-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--select-bg', `${color}`);
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.body.style.background = `radial-gradient(${color}, ${color})`;
}
function setTheme() {
switch (theme) {
case 'elegant':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #434343)');
document.documentElement.style.setProperty('--select-bg', '#333333');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #000000, #434343)';
break;
case 'dark':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #1a1a1a)');
document.documentElement.style.setProperty('--select-bg', '#1a1a1a');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.85)');
document.body.style.background = 'linear-gradient(135deg, #000000, #1a1a1a)';
break;
case 'grey':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
document.documentElement.style.setProperty('--select-bg', '#2a2a2a');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #1a1a1a, #4f4f4f)';
break;
case 'green':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--select-bg', '#002a22');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 42, 34, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #002a22, #004d40)';
break;
case 'blue':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #00274d, #004d80)');
document.documentElement.style.setProperty('--select-bg', '#00274d');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 39, 77, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #00274d, #004d80)';
break;
case 'red':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
document.documentElement.style.setProperty('--select-bg', '#2a0d0d');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(42, 13, 13, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #2a0d0d, #4d1a1a)';
break;
case 'purple':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
document.documentElement.style.setProperty('--select-bg', '#2a001d');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(42, 0, 29, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #2a001d, #4d004a)';
break;
case 'orange':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--select-bg', '#3d1a00');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(61, 26, 0, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #3d1a00, #ff8c00)';
break;
case 'pink':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
document.documentElement.style.setProperty('--select-bg', '#4d001d');
document.documentElement.style.setProperty('--tab-btn-active', '#ff66b2');
document.body.style.background = 'linear-gradient(135deg, #4d001d, #ff66b2)';
break;
case 'yellow':
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
document.documentElement.style.setProperty('--select-bg', '#4d3b00');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 59, 0, 0.7)');
document.body.style.background = 'linear-gradient(135deg, #4d3b00, #ffc107)';
break;
default:
break;
}
}
startCameraButton.addEventListener('click', startCameraStreaming);
startScreenButton.addEventListener('click', startScreenStreaming);
stopButton.addEventListener('click', stopRTMP);
copyButton.addEventListener('click', copyRTMP);
closePopup.addEventListener('click', hidePopup);
window.addEventListener('load', color ? setCustomTheme : setTheme);
// Stop RTMP streaming when the browser tab is closed
window.addEventListener('beforeunload', async (event) => {
if (mediaRecorder) {