videomail-client
Version:
A wicked npm package to record videos directly in the browser, wohooo!
72 lines (59 loc) • 2.71 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="email"], input[type="text"], fieldset, textarea, .buttons, #startOver {
margin: 1em 0;
display: block;
}
</style>
</head>
<body>
<h1>Have Videomail optional in forms</h1>
<p>Another form example where the videomail input itself is optional.</p>
<!-- Once you set the method to POST, then two request will be made internally. -->
<!-- The first one to the videomail server and the second one to the specified action -->
<form action="/contact" method="post" id="optionalVideomailForm">
<input name='from' type='email' placeholder='Enter your email address' required/>
<input name='subject' type='text' placeholder='Enter a subject' required/>
<div id="videomail"></div>
<textarea id='body' name='body' placeholder='Enter your message' cols='40' rows='5' required></textarea>
</form>
<!-- Placed outside the form by intention to ensure code works with that scenario as well -->
<input type="button" value="Submit">
<div id="viewVideo" style="display:none">
<h2 class="subject"></h2>
<h3 class="status"></h3>
<p class="body"></p>
<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,
video: {limitSeconds: 120, width: 320, countdown: false},
enableAutoValidation: false,
selectors: {
submitButtonSelector: 'body input[value="Submit"]',
formId: 'optionalVideomailForm'
}
})
var startOverButton = document.getElementById('startOver')
var onSubmitted = function (videomail, response) {
var statusHeader = document.querySelector('h3.status')
// status has been generated on server side, see gulp task 'connect'
statusHeader.innerHTML = response.status
this.replay(videomail, 'viewVideo')
startOverButton.onclick = this.startOver
}
videomailClient.on(
videomailClient.events.SUBMITTED,
onSubmitted.bind(videomailClient)
)
videomailClient.show()
</script>
</body>
</html>