109 أسطر
4.4 KiB
HTML
109 أسطر
4.4 KiB
HTML
<!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" />
|
|
|
|
<!-- https://cdnjs.com/libraries/font-awesome -->
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
|
|
|
|
<!-- Axios -->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/xss/dist/xss.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 fadein">
|
|
<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"><i class="fas fa-paste"></i> Copy</button>
|
|
</div>
|
|
|
|
<video id="video" width="640" height="480"></video>
|
|
|
|
<div class="button-group">
|
|
<button id="startCamera" title="Click to start camera streaming">
|
|
<i class="fas fa-video"></i> Start Streaming
|
|
</button>
|
|
<button id="startScreen" title="Click to start screen streaming">
|
|
<i class="fas fa-desktop"></i> Start Streaming
|
|
</button>
|
|
<button id="stop" disabled title="Click to stop streaming">
|
|
<i class="fas fa-stop-circle"></i> Stop Streaming
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<p>© 2024 MiroTalk SFU, all rights reserved</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|