Can you tell me if this function is correct?

Can you tell me if this function is correct?
If not, can you tell me why/how it is not?

var recLimit;

function recLimit() {
stopvideo.trigger( "click");
}

Code (JavaScript):

Do you need more info to help me? I was told " with stopvideo, you only need to use trigger and specify the "click" event", but I need more help. I look forward to your assistance

 

All functions are correct, but not all functions work as expected.

 

Well, the reason I ask is I am seeing this on the Console:
“Uncaught TypeError: stopvideo.trigger is not a function at recLimit (webcam.html:259)”
when working with this:

<script><!--Recording Time Limit-->
var recordTimeout;

function stopClickHandler(evt) {
    clearTimeout(recordTimeout);
}

function startClickHandler(evt) {
    stopClickHandler();
    recordTimeout = setTimeout(recLimit,3000);
}

var recLimit;

function recLimit(){
stopvideo.trigger("click");
}

document.querySelector(".start").addEventListener('click', startClickHandler);
document.querySelector(".stop").addEventListener('click', stopClickHandler);
</script>

Code (JavaScript):

I'm trying to add a time limit on recording, with this script that works successfully:

<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")
               
              video.setAttribute("controls","controls")
                        })

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

           ///////////////////////////////////////////////////
              //Reset the Camera
              function resetCamera(){
              location.reload();
               }
/////////////////////////////////////////////////////////

         //   uploading functionality ....

Code (JavaScript):

Any additional help will be appreciated

 

Now that I see the code I realize that this is way above my pay grade.

 

You rang?

@chrisj, are you sure .stop exists in the markup? Generally that would be the first thing to check, though...

1) JS without the markup it's controlling is hard to diagnose.

2) If these elements are scripting only controls, why aren't you creating them in the scripting and letting the markup fall back on HTML's defaults?

3) Avoid making stuff in the global scope. A SIF (self instancing function, also known as a IIFE -- instantly invoking function expression) would greatly help with that, and leveraged properly could also reduce the overall code. Even using the (pointless) 'const' instead of 'var' doesn't mean other scripts might not be screwing with you.

4) If you have this much scripting, get it out of the SCRIPT tag and get it external where it can be cached.

5) removeAttribute with setAttribute is pointless since you could just set. When you SET class you erase ALL of its contents. Technically this is not a job for either tag anymore, as what you should want is classList.toggle.

6) are you 100% certain the first span in EVERY page is going to be the element for a class swap? Seems really unlikely for structural reasons alone. Much less classes like "colorGreen" being utter rubbish defeating the entire reason attributes like COLOR were deprecated way back in 1998. Say WHY it's getting some form of colour for screen media, and NOT what that color is.

7) your indentation is all over the place, makes the code/logic very hard to follow.

If I could see the HTML I could probably say a lot more and dial things in for you.