1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Can you tell me if this function is correct?

Discussion in 'JavaScript' started by chrisj, Mar 22, 2019.

  1. #1
    Can you tell me if this function is correct?
    If not, can you tell me why/how it is not?
    SEMrush
    
    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
     
    Last edited: Mar 22, 2019
    chrisj, Mar 22, 2019 IP
    SEMrush
  2. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,262
    Likes Received:
    286
    Best Answers:
    6
    Trophy Points:
    290
    #2
    All functions are correct, but not all functions work as expected.
     
    mmerlinn, Mar 22, 2019 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    602
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    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
     
    chrisj, Mar 23, 2019 IP
  4. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,262
    Likes Received:
    286
    Best Answers:
    6
    Trophy Points:
    290
    #4
    Now that I see the code I realize that this is way above my pay grade.
     
    mmerlinn, Mar 23, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,977
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #5
    You rang? :p

    @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.
     
    deathshadow, Apr 5, 2019 IP