Skip to content

Instantly share code, notes, and snippets.

@philipbreau

philipbreau/gist:7567384

Last active December 28, 2015 21:49
Show Gist options
  • Save philipbreau/7567384 to your computer and use it in GitHub Desktop.
Save philipbreau/7567384 to your computer and use it in GitHub Desktop.
Download ZIP
BridgeIt Camcorder Tutorial
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<script type="text/javascript" src="http://bridgeit.github.io/bridgeit.js/src/bridgeit.js"></script>
</head>
<body>
<style>
.button{
height: 80px;
margin: 10px 0;
padding: 10px;
width: 100%;
border: 1px solid #333;
background: linear-gradient(to bottom, #EEE 0%, #DDD 100%);
text-decoration: none;
color: #333;
font-size: 16px;
line-height: 60px;
font-weight: bold;
display: block;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
var uploadServiceURL = 'http://api.bridgeit.mobi/echo/';
function onAfterVideoCapture(event){
if (event.preview) {
//show the thumbnail preview
var thumbnailElem = document.createElement("img");
thumbnailElem.setAttribute('src', event.preview);
thumbnailElem.style.float = 'right';
}
if (event.response) {
//show the image
var videoURL = event.response;
var videoLink = document.createElement('a');
videoLink.setAttribute('class','button');
videoLink.innerHTML = 'Click to view the video';
videoLink.setAttribute('href', videoURL);
//set the thumbnail img as the link child
videoLink.appendChild(thumbnailElem);
//append the new link after the btn
var btn = document.getElementById('camcorderBtn');
btn.parentNode.appendChild(imageLink);
}
}
</script>
<button id='camcorderBtn' class="button" type="button"
onclick="bridgeit.camcorder('camcorderBtn', 'onAfterVideoCapture', {postURL: uploadServiceURL + 'video-upload/'});">
Record Video</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment