I'm using this webRTC webcam recorder <video></video> successfully, which has a webcam-view button to start/show the webcam view. And a Start Recording button to begin recording the webcam view.

I've been trying to get the player controls timer to reset to 0:00 upon selecting the Start Recording button (because the timer apparently starts upon webcam view button selection), so that the person recording will have an idea how long the recording is, while recording. I tried adding things to this function, to accomplish that, like video.load; currentTime = 0; etc, without success (maybe those additions were in the wrong place?). Any help/suggestions/guidance will be appreciated.



<script type="text/javascript">
var video = document.querySelector('video');

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);
global_camera = camera;
});
}

function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function (camera) {
callback(camera);
}).catch(function (error) {
alert('Unable to capture camera. To try again - simply refresh your page');
console.error(error);
});
}

function stopRecordingCallback() {
video.src = video.srcObject = null;
video.src = URL.createObjectURL(recorder.getBlob());
PrepareBlob();
document.getElementById("upload-video").disabled = false;

// release camera
recorder.camera.getTracks().forEach(function (track) {
track.stop();
});

recorder.camera.stop();
recorder.destroy();
recorder = null;
}
var recorder; // globally accessible
document.getElementById('btn-start-recording').onclick = function () {
this.disabled = true;
document.getElementById("upload-video").disabled = true;
captureCamera(function (camera) {
setSrcObject(camera, video);
recorder = RecordRTC(camera, {
type: 'video'
});

recorder.startRecording();
video.controls = true;
// release camera on stopRecording
recorder.camera = camera;
document.getElementById('btn-stop-recording').disabled = false;
});
};
document.getElementById('btn-stop-recording').onclick = function () {
this.disabled = true;
document.getElementById('btn-start-recording').disabled = false;

recorder.stopRecording(stopRecordingCallback);
};
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.');

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 = 'UploadWC.html';
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, '');
}
}
</script>


[Edited by chrisjchrisj on 16-Oct-17 14:01]