JAVASCRIPT

javascript record video in browser

<input type="file" accept="video/*" capture="camera" id="recorder"><video id="player" controls></video><script>  var recorder = document.getElementById('recorder');  var player = document.getElementById('player');  recorder.addEventListener('change', function(e) {    var file = e.target.files[0];    // Do something with the video file.    player.src = URL.createObjectURL(file);  });</script>

video recording using html , js

<div id="wap">
  <div class="form-group">
    <label>Record Your Video</label>
    <br>
    <video autoplay="" muted id="stream-elem"  width="100%" height="350px">
    <source src="" type=""  >
    </video>
    <div id="recwap"></div>
    <button onclick="startrecording()" type="button" id="start-stream" class="btn btn-success">Start Recording</button>
    <button onclick="endrecording()" type="button" id="stop-media" class="btn btn-primary">Stop Recording</button>
  </div>
</div>

<script>
var recorder;
var blobContainer = [];
const settings = {
video: true,
audio: true
}
// $('#recorded').hide();
function startrecording(){
    var videoElem = document.getElementById('stream-elem');
    var endBtn = document.getElementById('stop-media');
    $('#stop-media').show();
    $('#stream-elem').show();
    $("#recordv").remove();

    blobContainer = [];
    navigator.mediaDevices.getUserMedia(settings).then((stream) => {
        // console.log(stream);
        videoElem.srcObject = stream

        recorder = new MediaRecorder(stream)
        // console.log(recorder);
        recorder.start();

        recorder.ondataavailable = function (e) {
            
            blobContainer.push(e.data)
        }

        recorder.onerror = function (e) {
            return console.log(e.error || new Error(e.name));
        }
        
        recorder.onstop = function (e) {
            $('#stream-elem').hide();
            var newVideoEl = document.createElement('video')
            newVideoEl.autoplay = true
            newVideoEl.controls = true
            newVideoEl.id = 'recordv'
            newVideoEl.innerHTML = `<source src="${window.URL.createObjectURL(new Blob(blobContainer))}" type="video/mp4">`;
            var recwap = document.getElementById('recwap')
            recwap.appendChild(newVideoEl);	
        }



    })
}   



function endrecording(){
    var videoElem = document.getElementById('stream-elem');
    videoElem.pause();
    recorder.stop();
}
 
</script>