jaredly/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
	<title>Video recording demo</title>
	<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

<video autoplay></video>

    <script language="javascript" type="text/javascript">

    </script>
<div>
    Status: <span class="label label-warning" id="status"></span>
</div>
    <div id="log" class="well">Here is the log:</div>
    <div id="webcamcontrols">
        <button class="recordbutton btn btn-primary" onclick="startRecording();">RECORD</button>
    </div>

<script src="index.js"></script>
</body>
</html>

## index.js
function stat(x) {
document.getElementById('status').innerHTML = x;
logit(x)
}
function logit(x) {
document.getElementById('log').innerHTML += '<br>\n' + x
}

function onVideoFail(e) {
logit('webcam fail!')
  console.log('webcam fail!', e);
};

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                           navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
stat('got user media; streaming');
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
stat('failed to ge tuser media')
    alert ('failed');
}

function startRecording() {
stat('trying to record')
try {
    streamRecorder = webcamstream.record();
stat('recording!')
} catch (e) {
stat('Failed to record!')
logit('<br>' + e.message)
logit('<pre>' + e.stack + '</pre>')
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    stat('getting recorded data')
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
    stat('got recorded data!')

    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    //jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess);
console.log('Posting!');
}
function onUploadSuccess() {
    alert ('video uploaded');
}
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Video recording demo</title>
	<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
	<link rel="stylesheet" type="text/css" href="index.css">
	</head>
	<body>

	<video autoplay></video>

	<script language="javascript" type="text/javascript">

	</script>
	<div>
	Status: <span class="label label-warning" id="status"></span>
	</div>
	<div id="log" class="well">Here is the log:</div>
	<div id="webcamcontrols">
	<button class="recordbutton btn btn-primary" onclick="startRecording();">RECORD</button>
	</div>

	<script src="index.js"></script>
	</body>
	</html>
	function stat(x) {
	document.getElementById('status').innerHTML = x;
	logit(x)
	}
	function logit(x) {
	document.getElementById('log').innerHTML += '<br>\n' + x
	}

	function onVideoFail(e) {
	logit('webcam fail!')
	console.log('webcam fail!', e);
	};

	function hasGetUserMedia() {
	// Note: Opera is unprefixed.
	return !!(navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\| navigator.msGetUserMedia);
	}

	if (hasGetUserMedia()) {
	// Good to go!
	} else {
	alert('getUserMedia() is not supported in your browser');
	}

	window.URL = window.URL \|\| window.webkitURL;
	navigator.getUserMedia = navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\|
	navigator.msGetUserMedia;

	var video = document.querySelector('video');
	var streamRecorder;
	var webcamstream;

	if (navigator.getUserMedia) {
	navigator.getUserMedia({audio: true, video: true}, function(stream) {
	stat('got user media; streaming');
	video.src = window.URL.createObjectURL(stream);
	webcamstream = stream;
	// streamrecorder = webcamstream.record();
	}, onVideoFail);
	} else {
	stat('failed to ge tuser media')
	alert ('failed');
	}

	function startRecording() {
	stat('trying to record')
	try {
	streamRecorder = webcamstream.record();
	stat('recording!')
	} catch (e) {
	stat('Failed to record!')
	logit('<br>' + e.message)
	logit('<pre>' + e.stack + '</pre>')
	setTimeout(stopRecording, 10000);
	}
	function stopRecording() {
	stat('getting recorded data')
	streamRecorder.getRecordedData(postVideoToServer);
	}
	function postVideoToServer(videoblob) {
	stat('got recorded data!')

	var data = {};
	data.video = videoblob;
	data.metadata = 'test metadata';
	data.action = "upload_video";
	//jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess);
	console.log('Posting!');
	}
	function onUploadSuccess() {
	alert ('video uploaded');
	}