Help with EventListener code

I’m using a webcam recorder script that works successfully.
I’d like the timer (on the html5 video player’s control bar (see attached))
to reset the time to 0:00, when the startRecording button is clicked (and then proceed recording).

So, what I have so far, unsuccessfully is:

var btn-start-recording = document.getElementById('btn-start-recording');
btn-start-recording.addEventListener('onclick', currentTime, true)
};

the start recording button is:

<button id="btn-start-recording" onclick="startRecording()">Start Recording</button>

the function is:

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

Any help will be appreciated

The hyphens are seen as being minus signs when you use them as a part of a variable name.

You’ll want to use underscore instead, or camelCase. For example:

var btn_start_recording = document.getElementById('btn-start-recording');
btn_start_recording.addEventListener('onclick', currentTime, true);

Thank you for your reply.
I added your suggested code like so:

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

var btn_start_recording = document.getElementById('btn-start-recording');
btn_start_recording.addEventListener('onclick', currentTime, true);


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

but no success. I don’t know if my code is correct. I just guessed.
is the code in the correct place? Does it need anything else?

Is this correct?:

('onclick', currentTime, true)

Any additional guidance will be appreciated.

Testing the code on jsfiddle, I see that the script stops at "upload-video" because nothing with that id exists, and beyond that the next problem is that captureCamera() function doesn’t exist.

If currentTime is a function, then it should work. The true value says to use event capturing, which is a troubling technique to use. You should use false instead, or leave it empty, to tell the event listener to use even bubbling instead.

btn_start_recording.addEventListener('onclick', currentTime, false);

There’s some good details about this in the Bubbling and Capturing article.

Thanks again for your reply.
This is still not resetting the current time to 0:00, when the startRecording button is clicked (and then proceed recording). The code I added is line 63 thru 66.
Any help will be welcomed

 <video id=""  autoplay="">
 </video>

 <br><br/>
<button id="btn-start-camera" onclick="startCamera()">WebCam View</button>
<button id="btn-start-recording" onclick="startRecording()">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
<button id="upload-video" onclick="InitUploading()" disabled="">Upload Now</button>
<br>
 </li>
 </ul>
<br/>
 <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'
		                });

				function currentTime();

				var btn_start_recording = document.getElementById('btn-start-recording');
				btn_start_recording.addEventListener('onclick', currentTime, true);

		                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>

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