#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    66
    Rep Power
    20

    Help with limiting the recording time


    This record-video script works successfully. How can I limit the recording time once the ‘Start’ button is selected?

    This part of the code seems to be incorrect. Can you help me with it?

    Code:
    function recLimit() {
    stopvideo.trigger( "click");
    }
    Here's more of it:


    Code:
    <script>
    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(startClickHandler);
    document.querySelector(".stop").addEventListener(stopClickHandler);
    </script>

    And more of the web recording script:

    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")
    				
                  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 ....
    Any help is appreciated
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Somerville, MA
    Posts
    52
    Rep Power
    72
    You may want to take a look at this event:

    Code:
    MediaRecorder.ondataavailable
    From the MDN docs:
    If a timeslice property was passed into the MediaRecorder.start() method that started media capture, a dataavailable event is fired every timeslice milliseconds. That means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). So if the method call looked like this — recorder.start(1000); — the dataavailable event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. You can use timeslice alongside MediaRecorder.stop() and MediaRecorder.requestData() to produce multiple same-length blobs plus other shorter blobs as well.
    Web Developer/Designer here
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    66
    Rep Power
    20
    Thank you for your reply/information.
    Can you provide an example pertaining to my code and "You can use timeslice alongside MediaRecorder.stop()", please?
    I am not well-versed in javascript. Any additional guidance is welcomed.

IMN logo majestic logo threadwatch logo seochat tools logo