How to remove Infinity:NaN:NaN

Only in Firefox, when I play a video, from the web recorder script - html5 player, I see Infinity:NaN:NaN once the video is played. It replaces the played time on the controls, for example it replaces 00:15, once the video has played. Upon researching/googling I see NaN means ‘not a number’, but I couldn’t find anything on removing that or keeping it from displaying. Any ideas/suggestions will be appreciated. Here’s the webcam script:

<script>
            const video = document.querySelector('video')
            const startvideo = document.querySelector('.start')
            const stopvideo = document.querySelector('.stop')
            const upload = document.querySelector('.upload')
            const initRecorder = stream => {
            const recorder = new MediaRecorder(stream)
            let blob
              video.srcObject = stream
              startvideo.removeAttribute('disabled')
              video.addEventListener('loadedmetadata', () => {
              video.play()
              })
              recorder.addEventListener('dataavailable', ({ data }) => {
              video.srcObject = null
              video.src = URL.createObjectURL(data)
              // Create a blob from the data for upload
              blob = new Blob([data], { type: 'video/webm' })
              })

              startvideo.addEventListener('click', () => {
              stopvideo.removeAttribute('disabled')

              show()
              reset()
              start()
              recorder.start()
		 				  // Get the video element with id="myVideo"
							document.getElementsByTagName("span")[0].removeAttribute("class")
							document.getElementsByTagName("span")[0].setAttribute("class", "colorred")
		        	//document.getElementById("demo").innerHTML ="Recording...."
							})

							stopvideo.addEventListener('click', () => {
              upload.removeAttribute('disabled')
              recorder.stop()
              stop()
							document.getElementsByTagName("span")[0].removeAttribute("class")
							document.getElementsByTagName("span")[0].setAttribute("class", "colorgreen")
							//document.getElementById("demo").innerHTML ="recorded Successfully ..."
              video.setAttribute("controls","controls")
							})

							// Upload the video blob as form data ............................
              upload.addEventListener('click', () => {
              uploadBlob(blob)
            })
          }

					  //   uploading functionality

            	var blob, fileName, fileObject;
              function uploadBlob(blob) {
                  prepareBlob(blob);
            			InitUploading();
              }
            //////////////////////////////////preparing blob metadat////////////////////
            function prepareBlob(blob){
            	    	// 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('saveWC.php', formData, function (progress) {
            							 if (progress !== 'Upload Complete') {
            									 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 = '../upload.html';

                    return;

                            }
                        };
                        request.upload.onloadstart = function () {
                            callback('Upload Begins...');
                        };
                        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);
                    }
   

              navigator
                .mediaDevices
                .getUserMedia({audio: true, video: true })
                .then(initRecorder)
                .catch(console.error)

         </script>

See attached image:

Hi there ChrisjChrisj,

You must give members all the relevant code of your problem. :winky:

Without it they will just be wasting their time with wild guesses. :wonky:

p.s.

Nice picture though. :rofl:

coothead

1 Like

Here is some information about it being a browser bug,

Video navigation/time bar now only shows NaN:NaN

This may be an issue that JavaScript cannot fix, if the browser if what is at fault here.

Thanks

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