How to reset webRTC player timer

I’m using this webRTC webcam recorder successfully, however, when the webcam view (is accessed) appears on the web page, the video controls timer/seconds begins. I’d like it so that the timer is reset to zero upon Start Recording being selected, so that the person recording will have an idea how long the recording is, while recording. Or, simply show somthing about recording-in-progress.I tried adding things to this function, to accomplish that, without success:

        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();
        }

Here’s the full code below, any help/suggestions will be appreciated.

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/B51F6407-4467-B34C-9213-B4C02467636C/main.js"
        charset="UTF-8"></script>
    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/B51F6407-4467-B34C-9213-B4C02467636C/main.js"
        charset="UTF-8"></script>
    <title>Video Recording | RecordRTC</title>
    <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>

<body>
    <style>
        html,
        body {
            margin: 0!important;
            padding: 0!important;
            width: 100%;
        }

        video {
            width: 50%;
            float: left;
        }
    </style>
    <header id="header"></header>
    <h1>Simple Video Recording using RecordRTC</h1>

    <br>
    <!--
    <button id="btn-start-camera" onclick="startCamera()">Re-Record</button>
    <button id="btn-stop-camera" onclick="stopCamera()" disabled>Stop Camera</button>
    -->
    <button id="btn-start-recording" onclick="startRecording()">Start Recording</button>
    <button id="btn-stop-recording" onclick="stopRecording()" disabled>Stop Recording</button>
	<button id="btn-start-camera" onclick="startCamera()">Reset Cam</button>
    <button id="upload-video" onclick="InitUploading()" disabled>UPLOAD</button>

    <hr>
    <video autoplay></video>
    <!--
    <video controls autoplay id="recorded_video"></video>
    -->
    <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-ended');
                        return;
                    }
                    alert(request.responseText);
                    return;
                }
            };
            request.upload.onloadstart = function () {
                callback('PHP upload started...');
            };
            request.upload.onprogress = function (event) {
                callback('PHP upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
            };
            request.upload.onload = function () {
                callback('progress-about-to-end');
            };
            request.upload.onload = function () {
                callback('PHP upload ended. Getting file URL.');
            };
            request.upload.onerror = function (error) {
                callback('PHP upload failed.');
            };
            request.upload.onabort = function (error) {
                callback('PHP 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>

</body>

</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.