How to eliminate the file name from displaying?

The webRTC webcam video recorder script, for a web page, that I’m working with, creates a webm video file format.
When the video is played the filename is displayed with the playing video. What can be done so the file name doesn’t appear when any video is played? Any help is welcomed. Here’s the code:

<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>

Is that the code for playing the video? It looks more like the recording and uploading part, though it’s not something I am very familiar with.

thanks, I believe I’ve got it

It would be helpful if you could explain describe the solution you came up with, so that it becomes a useful resource for other members searching the forum. Without that, the whole thread may as well be disposed of.

1 Like

I concluded that it was the player that shows the file name.

Would you be interested in commenting on this posting of mine. I still haven’t been able to resolve it. Thanks.

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