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

[mirotalksfu] - add RTMP server and multi-source streaming!, update dep

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2024-06-29 18:49:10 +02:00
الأصل aaf5fe44ed
التزام 3929212631
52 ملفات معدلة مع 3986 إضافات و132 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

63
public/views/Room.html
عرض الملف

@@ -38,6 +38,7 @@
<meta id="ogUrl" property="og:url" content="https://sfu.mirotalk.com" />
<!-- StyleSheet -->
<link rel="stylesheet" href="../css/Root.css" />
<link rel="stylesheet" href="../css/Room.css" />
<link rel="stylesheet" href="../css/VideoGrid.css" />
<link rel="stylesheet" href="../css/GroupChat.css" />
@@ -215,6 +216,9 @@ access to use this app.
<button id="tabVideoShareBtn" class="fab fa-youtube tablinks">
<p class="tabButtonText">Media</p>
</button>
<button id="tabRTMPStreamingBtn" class="fa-solid fa-satellite-dish tablinks">
<p class="tabButtonText">RTMP</p>
</button>
<button id="tabProfileBtn" class="fas fa-user tablinks">
<p class="tabButtonText">Profile</p>
</button>
@@ -941,7 +945,64 @@ access to use this app.
<i class="fas fa-times"></i>
<p>Close Video or Audio</p>
</button>
<br />
</div>
<div id="tabRTMPStreaming" class="tabcontent">
<div id="rtmpUrlLive">
<div class="input-container">
<input
id="rtmp-url"
type="text"
value=""
placeholder="rtmp://server:port/app/streamKey"
readonly
/>
<button id="copyRtmpUrlButton" class="fas fa-paste"></button>
</div>
<div id="rtmpFromFile">
<table class="file-table">
<thead>
<tr>
<th>Video Files:</th>
</tr>
</thead>
<tbody id="file-list">
<!-- File items will be dynamically added here -->
</tbody>
</table>
<div id="file-name"></div>
<!-- <hr /> -->
<button id="startRtmpButton" class="hidden">
<i class="fa-solid fa-play"></i>&nbsp;Start RTMP File Streaming
</button>
<button id="stopRtmpButton" class="hidden">
<i class="fas fa-stop-circle"></i>&nbsp;Stop RTMP File Streaming
</button>
<hr />
</div>
<div id="rtmpFromUrl">
<p>Stream from URL:</p>
<input
id="rtmpStreamURL"
type="text"
value=""
placeholder="https://domain/path/file.mp4"
/>
<button id="startRtmpURLButton" class="hidden">
<i class="fa-solid fa-play"></i>&nbsp;Start RTMP URL Streaming
</button>
<button id="stopRtmpURLButton" class="hidden">
<i class="fas fa-stop-circle"></i>&nbsp;Stop RTMP URL Streaming
</button>
<hr />
</div>
<div id="rtmpFromStream">
<button id="streamerRtmpButton" class="hidden">
<i class="fa-solid fa-satellite-dish"></i>&nbsp;RTMP Streamer
</button>
<hr />
</div>
</div>
</div>
<div id="tabProfile" class="tabcontent">

97
public/views/RtmpStreamer.html Normal file
عرض الملف

@@ -0,0 +1,97 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Title and Icon -->
<title id="title">MiroTalk RTMP Streamer</title>
<link id="icon" rel="shortcut icon" href="../images/logo.svg" />
<link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
id="description"
name="description"
content="MiroTalk SFU powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser."
/>
<meta
id="keywords"
name="keywords"
content="webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
/>
<!-- https://ogp.me -->
<meta id="ogType" property="og:type" content="app-webrtc" />
<meta id="ogSiteName" property="og:site_name" content="MiroTalk SFU" />
<meta id="ogTitle" property="og:title" content="Click the link to make a call." />
<meta
id="ogDescription"
property="og:description"
content="MiroTalk SFU calling provides real-time video calls, messaging and screen sharing."
/>
<meta id="ogImage" property="og:image" content="https://sfu.mirotalk.com/images/mirotalksfu.png" />
<meta id="ogUrl" property="og:url" content="https://sfu.mirotalk.com" />
<!-- StyleSheet -->
<link rel="stylesheet" href="../css/Root.css" />
<link rel="stylesheet" href="../css/RtmpStreamer.css" />
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- JS scripts -->
<script defer src="../js/Brand.js"></script>
<script defer src="../js/RtmpStreamer.js"></script>
</head>
<body>
<div id="popup" class="popup hidden">
<span id="popupMessage"></span>
<button id="closePopup">X</button>
</div>
<div class="container">
<h1>MiroTalk RTMP Streamer</h1>
<div class="input-group-inline">
<input
id="apiSecret"
type="password"
value="mirotalkRtmpApiSecret"
placeholder="API Secret"
title="Enter the API secret here"
/>
</div>
<div class="input-group-inline">
<input
id="rtmp"
type="text"
value=""
placeholder="rtmp://server:port/app/streamKey"
readonly
title="This is your RTMP live URL. It cannot be edited."
/>
<button id="copy" title="Click to copy the RTMP URL">Copy</button>
</div>
<video id="video" width="640" height="480" autoplay></video>
<div class="button-group">
<button id="startCamera" title="Click to start camera streaming">Start Camera Streaming</button>
<button id="startScreen" title="Click to start screen streaming">Start Screen Streaming</button>
<button id="stop" disabled title="Click to stop streaming">Stop Streaming</button>
</div>
</div>
<footer>
<p>&copy; 2024 MiroTalk SFU, all rights reserved</p>
</footer>
</body>
</html>