media-recorder-js
Version:
WebRTC media recorder library for Javascript
99 lines (85 loc) • 4.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Stream Recorder by Quickblox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="https://docsdev.quickblox.com/themes/quickblox/templates/main_resources/favicon.ico">
<link rel="stylesheet" href="css/spectre.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="content">
<header class="title wrap">
<h1 class="title_main text-center">Media Stream Recorder
<span class="title_sub">by Quickblox</span>
</h1>
</header>
<aside class="toast wrap">
This demo requires Firefox 49, Chrome 49, Chrome for Android 53, Opera 41 or later. The https is required.
</aside>
<main>
<div class="columns wrap">
<div class="column col-6 col-xs-12">
<div class="card j-card">
<div class="card-image">
<div class="video-responsive">
<video class=" j-video_local video" controls muted></video>
</div>
</div>
<div class="source">
<div class="form-group">
<select id="j-audioSource" class="invisible form-select select-sm">
</select>
</div>
<div class="form-group">
<select id="j-videoSource" class="invisible form-select select-sm">
</select>
</div>
<div class="form-group">
<select id="j-mimeTypes" class="invisible form-select select-sm">
</select>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Recording</h5>
<div class="btn-group btn-group-block">
<button class="btn j-start">Start</button>
<button class="btn j-pause" disabled>Pause</button>
<button class="btn j-resume" disabled>Resume</button>
<button class="btn j-stop" disabled>Stop</button>
</div>
</div>
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="card j-result-card">
<div class="card-image">
<div class="video-responsive">
<video class="j-video_result video" controls></video>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Record</h5>
<div class="btn-group btn-group-block">
<button class="btn j-clear" disabled>Clear</button>
<button class="btn j-download" disabled>Download</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="footer">
<p class="lead ">
See <a href="../docs/index.html" target="_blank">docs</a> and <a href="https://github.com/QuickBlox/javascript-media-recorder/" target="_blank">source code</a>
</p>
</footer>
<div class="j-notify notify toast toast-danger"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="../qbMediaRecorder.js"></script>
<script src="main.js"></script>
</body>
</html>