[mirotalksfu] - add RTMP server and multi-source streaming!, update dep
هذا الالتزام موجود في:
Miroslav Pejic
@@ -31,56 +31,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--body-bg: radial-gradient(#393939, #000000);
|
||||
--border: 1px solid rgb(255 255 255 / 32%);
|
||||
--border-radius: 1rem;
|
||||
--msger-width: 800px;
|
||||
--msger-height: 700px;
|
||||
--msger-bubble-width: 85%;
|
||||
--msger-bg: radial-gradient(#393939, #000000);
|
||||
--wb-width: 800px;
|
||||
--wb-height: 600px;
|
||||
--wb-bg: radial-gradient(#393939, #000000);
|
||||
--select-bg: #2c2c2c;
|
||||
--left-msg-bg: #252d31;
|
||||
--right-msg-bg: #056162;
|
||||
--private-msg-bg: #6b1226;
|
||||
--box-shadow: 0px 8px 16px 0px rgb(0 0 0);
|
||||
--btns-hover-scale: scale(1.1);
|
||||
--settings-bg: radial-gradient(#393939, #000000);
|
||||
--tab-btn-active: rgb(42 42 42 / 70%);
|
||||
--btns-bg-color: rgba(0, 0, 0, 0.7);
|
||||
/* buttons bar horizontal */
|
||||
--btns-top: 50%;
|
||||
--btns-right: 0%;
|
||||
--btns-left: 10px;
|
||||
--btns-margin-left: 0px;
|
||||
--btns-width: 60px;
|
||||
--btns-flex-direction: column;
|
||||
/* buttons bar horizontal
|
||||
--btns-top: 95%;
|
||||
--btns-right: 25%;
|
||||
--btns-left: 50%;
|
||||
--btns-margin-left: -160px;
|
||||
--btns-width: 320px;
|
||||
--btns-flex-direction: row;
|
||||
*/
|
||||
|
||||
--transcription-height: 680px;
|
||||
--transcription-width: 420px;
|
||||
--transcription-bg: radial-gradient(#393939, #000000);
|
||||
|
||||
--vmi-wh: 15vw;
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
|
||||
--videoObjFit: cover;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
font-family: 'Comfortaa';
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
top: 0 !important;
|
||||
@@ -441,6 +391,77 @@ th {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# RTMP settings
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.file-table {
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: var(--border);
|
||||
table-layout: fixed; /* Ensures equal column width */
|
||||
}
|
||||
.file-table th,
|
||||
.file-table td {
|
||||
border: none;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-table th {
|
||||
background: var(--select-bg);
|
||||
}
|
||||
.file-table tbody {
|
||||
display: block;
|
||||
max-height: 80px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.file-table tbody::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.file-table tbody::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.file-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-item:hover,
|
||||
.file-item.selected {
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
#file-name {
|
||||
margin-top: 20px;
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#rtmpStreamURL,
|
||||
#rtmp-url {
|
||||
margin-top: 5px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: var(--select-bg) !important;
|
||||
}
|
||||
|
||||
.input-container button {
|
||||
flex: 1;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Dropdown menu
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
51
public/css/Root.css
Normal file
51
public/css/Root.css
Normal file
@@ -0,0 +1,51 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Comfortaa:wght@500&display=swap');
|
||||
|
||||
:root {
|
||||
--body-bg: radial-gradient(#393939, #000000);
|
||||
--border: 1px solid rgb(255 255 255 / 32%);
|
||||
--border-radius: 1rem;
|
||||
--msger-width: 800px;
|
||||
--msger-height: 700px;
|
||||
--msger-bubble-width: 85%;
|
||||
--msger-bg: radial-gradient(#393939, #000000);
|
||||
--wb-width: 800px;
|
||||
--wb-height: 600px;
|
||||
--wb-bg: radial-gradient(#393939, #000000);
|
||||
--select-bg: #2c2c2c;
|
||||
--left-msg-bg: #252d31;
|
||||
--right-msg-bg: #056162;
|
||||
--private-msg-bg: #6b1226;
|
||||
--box-shadow: 0px 8px 16px 0px rgb(0 0 0);
|
||||
--btns-hover-scale: scale(1.1);
|
||||
--settings-bg: radial-gradient(#393939, #000000);
|
||||
--tab-btn-active: rgb(42 42 42 / 70%);
|
||||
--btns-bg-color: rgba(0, 0, 0, 0.7);
|
||||
/* buttons bar horizontal */
|
||||
--btns-top: 50%;
|
||||
--btns-right: 0%;
|
||||
--btns-left: 10px;
|
||||
--btns-margin-left: 0px;
|
||||
--btns-width: 60px;
|
||||
--btns-flex-direction: column;
|
||||
/* buttons bar horizontal
|
||||
--btns-top: 95%;
|
||||
--btns-right: 25%;
|
||||
--btns-left: 50%;
|
||||
--btns-margin-left: -160px;
|
||||
--btns-width: 320px;
|
||||
--btns-flex-direction: row;
|
||||
*/
|
||||
|
||||
--transcription-height: 680px;
|
||||
--transcription-width: 420px;
|
||||
--transcription-bg: radial-gradient(#393939, #000000);
|
||||
|
||||
--vmi-wh: 15vw;
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
|
||||
--videoObjFit: cover;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
font-family: 'Comfortaa';
|
||||
}
|
||||
206
public/css/RtmpStreamer.css
Normal file
206
public/css/RtmpStreamer.css
Normal file
@@ -0,0 +1,206 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Comfortaa:wght@500&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Comfortaa'; /*, Arial, sans-serif;*/
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: var(--body-bg);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: var(--body-bg);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
video {
|
||||
border: 0.1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.input-group-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#apiSecret {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#rtmp {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#copyButton {
|
||||
flex: 1;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.input-group-inline > * {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
flex: 1;
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type='text'][readonly] {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #2c2c2c;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: indianred;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.popup.success {
|
||||
background-color: mediumseagreen;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popup.error {
|
||||
background-color: indianred;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popup.warning {
|
||||
background-color: gold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popup.info {
|
||||
background-color: cornflowerblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popup.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#closePopup {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* Media Queries for Responsiveness */
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
input,
|
||||
button {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.input-group-inline {
|
||||
flex-direction: column;
|
||||
}
|
||||
input,
|
||||
button {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#copyButton {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
input,
|
||||
button {
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم