Recording video and audio

Question

Fiddle

I followed this fiddle. In this it has the video and audio capturing. But it won't let me record the video and send it to php for further processing using ffmpeg and save it. I want to know that how am i able to record the video and send it to php and save it ?

var btnVideoCapture = document.getElementById('btn-capture-video');
btnVideoCapture.addEventListener('click', showUserMedia, false);

var btnScreenshot = document.getElementById('btn-screenshot');
btnScreenshot.addEventListener('click', snapshot, false);

var btnStopVideo = document.getElementById('btn-stop-video');
btnStopVideo.addEventListener('click', stopUserMedia, false);

var onFailSoHard = function (e) {
    console.log('Reeeejected!', e);
};
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;


function showUserMedia() {
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            audio: true,
            video: true
        }, function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.controls = true;
            localMediaStream = stream;
        }, onFailSoHard);
        // console.log('Good to go!');
    } else {
        video.src = 'somevideo.webm'; // fallback.
        //console.log('getUserMedia() is not supported in your browser');
    }
}

function snapshot() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
        document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
}

function stopUserMedia() {
    video.pause();
    localMediaStream.stop();
    video.src = '';
}

Answer 1

The code you posted only accesses the webcam and displays the video stream in the <video> element ( showUserMedia() function). It doesn't record the video or POSTs the data to a web server.

To record the video (and audio) you need to use the Media Recorder API which is now supported by Chrome (49+) and Firefox(30+). Both browsers record to .webm and you can POST the file to a web server for further processing.

This article covers the spec in detail and here's a live demo + GitHub project .

Answer 2

Take a look at RecordRTC

You may want to take a look at this too: How to record webcam and audio using webRTC and a server-based Peer connection

I think this serves your specific need : https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP

Here's an example of recording video and audio: opentokrtc.com

Answer 3

1- First you would do recording using javascript 2- then set a hidden mutipart hidden form in page 3- When a video has recorded then you trigger an event which render the recorded video to form. 4 - then here you can manually submit this video to PHP script