videomail-client
Version:
A wicked npm package to record videos directly in the browser, wohooo!
66 lines (57 loc) • 2.01 kB
HTML
<html>
<head>
<title>videomail-client examples</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
input[type='text'],
.buttons {
margin: 1em 0;
}
#startOver {
display: block;
}
</style>
</head>
<body>
<h1>
Wrap into a form, validation, have a direct submit form and display the record
</h1>
<p>
Direct submit forms means, it sends data right away to the videomail.io server. But
if you prefer to submit to your own server, look at the other example
<a href="contact_form.html">contact_form.html</a>.
</p>
<!-- By default the videomail-client hooks into the form with the id='videomail' -->
<form id="videomail">
<input name="subject" type="text" placeholder="Enter a subject" required />
</form>
<div id="viewVideo" style="display: none">
<h2 class="subject"></h2>
<video class="replay"></video>
<button id="startOver">Start over</button>
</div>
<script src="/js/videomail-client.js"></script>
<script>
var videomailClient = new VideomailClient({
verbose: true,
enablePause: false,
video: { limitSeconds: 3600, width: 460, countdown: false }
})
var startOverButton = document.getElementById('startOver')
var onSubmitted = function (videomail) {
this.replay(videomail, 'viewVideo')
startOverButton.onclick = this.startOver
}
// allow direct submits, means:
// any form data here is submitted directly into the videomail server
// if you do not want that, look at the other example contact_form.html where
// you grab the key from the videomail server and use it in your own form (preferred solution).
videomailClient.on(
videomailClient.events.SUBMITTED,
onSubmitted.bind(videomailClient)
)
videomailClient.show()
</script>
</body>
</html>