The web video recorder script (below) works successfully (but not in IE).
I found this code that is supposed to alert an IE user to “try Chrome”, added in to the web recorder script, and tried a test in IE11, but didn’t see the alert. Any help will be appreciated:
function init() {
console.log('init');
try {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
} catch (e) {
window.alert('Your browser does not support WebVideo, try Google Chrome');
}
}
Here is the web video recorder script without the above window.alert function. Can you tell me if something needs to be changed with the alert?
And then suggest the ideal spot to place the alert in the script below, please?
<script>
var video = document.querySelector('video');
var recorded_video = video;
var recorder; // globally accessible
var global_camera;
function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function (camera) {
callback(camera);
}).catch(function (error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
}
function startCamera() {
//document.getElementById('btn-start-camera').disabled = true;
document.getElementById('btn-start-recording').disabled = false;
//document.getElementById('btn-stop-camera').disabled = false;
captureCamera(function (camera) {
setSrcObject(camera, video);
video.play();
global_camera = camera;
video.controls = false;
});
}
function startRecording() {
recorder = RecordRTC(global_camera, {
type: 'video'
});
recorder.camera = global_camera;
document.getElementById('btn-start-recording').disabled = true;
document.getElementById('btn-stop-recording').disabled = false;
video.controls = true;
recorder.startRecording();
}
function stopRecording() {
document.getElementById('btn-stop-recording').disabled = true;
document.getElementById('upload-video').disabled = false;
document.getElementById('btn-start-recording').disabled = false;
video.controls = true;
recorder.stopRecording(stopRecordingCallback);
}
function stopCamera() {
if (recorder)
stopRecording();
// release camera
global_camera.getTracks().forEach(function (track) {
track.stop();
});
global_camera.stop();
}
function stopRecordingCallback() {
recorded_video.src = URL.createObjectURL(recorder.getBlob());
PrepareBlob();
document.getElementById("upload-video").disabled = false;
recorder.destroy();
recorder = null;
stopCamera();
}
var blob, fileName, fileObject;
function PrepareBlob() {
// get recorded blob
blob = recorder.getBlob();
// generating a random file name
fileName = getFileName('webm');
// we need to upload "File" --- not "Blob"
fileObject = new File([blob], fileName, {
type: 'video/webm'
});
}
function InitUploading() {
uploadToPHPServer(fileObject, function (response, fileDownloadURL) {
if (response !== 'ended') {
document.getElementById('header').innerHTML = response; // upload progress
return;
}
document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL +
'" target="_blank">' +
fileDownloadURL + '</a>';
alert('Successfully uploaded recorded blob.');
// preview uploaded file
video.src = fileDownloadURL;
// open uploaded file in a new tab
window.open(fileDownloadURL);
});
}
function uploadToPHPServer(blob, callback) {
// create FormData
var formData = new FormData();
formData.append('video-filename', blob.name);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');
makeXMLHttpRequest('save.php', formData, function (progress) {
if (progress !== 'upload-ended') {
callback(progress);
return;
}
var initialURL = 'uploads/' + blob.name;
callback('ended', initialURL);
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText === 'success') {
callback('Upload Complete');
return;
}
alert(request.responseText);
window.location.href = '/index.com/';
return;
}
};
request.upload.onloadstart = function () {
callback('Upload started...');
};
request.upload.onprogress = function (event) {
callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
};
request.upload.onload = function () {
callback('Progress Ending');
};
request.upload.onload = function () {
callback('Upload Complete');
};
request.upload.onerror = function (error) {
callback('Upload Failed.');
};
request.upload.onabort = function (error) {
callback('Upload aborted.');
};
request.open('POST', url);
request.send(data);
}
// this function is used to generate random file name
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth();
var date = d.getUTCDate();
return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}
function getRandomString() {
if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
}
startCamera();
</script>