Media Recorder Demo!

📚 Please see the Docs within the project’s README.md for installation, specification and project examples.
This example uses the index-umd.js file. In this example the following components are within the mrec object, which can be accessed globally. For example, you can toggle the modal by using mrec.toggleModal() or window.mrec.toggleModal(). You should not use this method in prodution, as a user may manipulate your app.
For other installation methods see the docs.

Examples

You can run the buttons sequentially to see the effect.
  1. ⮕ no webcam stream loaded / empty modal
  2. ⮕ starts a webcam stream w/o recording it
  3. ⮕ same as set modal content to "#video-preview". You should see yourself.
  4. ⮕ stops all active webcam streams
  5. ⮕ starts a webcam stream (if not active) and starts recording
  6. ⮕ Same as 3. This time you get recorded.
  7. ⮕ stops the recording, creates the videofile, stops the webcam stream
  8. ⮕ same as set modal content to "#video-preview". You see your recording.
  9. ⮕ uploads* the recording (filename defaults to ISO 8601 timestamp)
* You need to have a server-side endpoint for this function. PHP example: 
      $target_path = "uploads/" . basename($_FILES["vidfile"]["name"] . ".mp4");
      move_uploaded_file($_FILES["vidfile"]["tmp_name"], $target_path );