Recording video and audio

Question

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 = '';
}

You can send the media via WebSockets(you will have to continuously grab frames) or use an existing [library for recording](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP). — Benjamin Trent, Jun 12 '14 at 16:16
In this example you get the video blob in the variable 'localMediaStream', send, parse and save it on the server using php or any other scripting language .. — Qarib Haider, Jun 22 '14 at 13:37

octavn · Answer 1 · 2022-11-01T06:28:45.193

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.

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

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

edited May 23 '17 at 12:00

Community

1
1

answered Jun 22 '14 at 16:56

saifwilljones

33
2
6

score -2 · Answer 3 · answered Jun 17 '14 at 06:45

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

Recording video and audio

3 Answers3