How to record webcam and audio using webRTC and a server-based Peer connection
I believe using kurento or other MCUs just for recording videos would be bit of overkill, especially considering the fact that Chrome has MediaRecorder API support from v47 and Firefox since v25. So at this junction, you might not even need an external js library to do the job, try this demo I made to record video/ audio using MediaRecorder:
Demo - would work in chrome and firefox (intentionally left out pushing blob to server code)
Github Code Source
If running firefox, you could test it in here itself( chrome needs https
):
'use strict'
let log = console.log.bind(console), id = val => document.getElementById(val), ul = id('ul'), gUMbtn = id('gUMbtn'), start = id('start'), stop = id('stop'), stream, recorder, counter = 1, chunks, media;
gUMbtn.onclick = e => { let mv = id('mediaVideo'), mediaOptions = { video: { tag: 'video', type: 'video/webm', ext: '.mp4', gUM: { video: true, audio: true } }, audio: { tag: 'audio', type: 'audio/ogg', ext: '.ogg', gUM: { audio: true } } }; media = mv.checked ? mediaOptions.video : mediaOptions.audio; navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => { stream = _stream; id('gUMArea').style.display = 'none'; id('btns').style.display = 'inherit'; start.removeAttribute('disabled'); recorder = new MediaRecorder(stream); recorder.ondataavailable = e => { chunks.push(e.data); if (recorder.state == 'inactive') makeLink(); }; log('got media successfully'); }).catch(log);}
start.onclick = e => { start.disabled = true; stop.removeAttribute('disabled'); chunks = []; recorder.start();}
stop.onclick = e => { stop.disabled = true; recorder.stop(); start.removeAttribute('disabled');}
function makeLink() { let blob = new Blob(chunks, { type: media.type }), url = URL.createObjectURL(blob), li = document.createElement('li'), mt = document.createElement(media.tag), hf = document.createElement('a'); mt.controls = true; mt.src = url; hf.href = url; hf.download = `${counter++}${media.ext}`; hf.innerHTML = `donwload ${hf.download}`; li.appendChild(mt); li.appendChild(hf); ul.appendChild(li);}
button { margin: 10px 5px; } li { margin: 10px; } body { width: 90%; max-width: 960px; margin: 0px auto; } #btns { display: none; } h1 { margin-bottom: 100px; }
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><h1> MediaRecorder API example</h1>
<p>For now it is supported only in Firefox(v25+) and Chrome(v47+)</p><div id='gUMArea'> <div> Record: <input type="radio" name="media" value="video" checked id='mediaVideo'>Video <input type="radio" name="media" value="audio">audio </div> <button class="btn btn-default" id='gUMbtn'>Request Stream</button></div><div id='btns'> <button class="btn btn-default" id='start'>Start</button> <button class="btn btn-default" id='stop'>Stop</button></div><div> <ul class="list-unstyled" id='ul'></ul></div><script src="https://code.jquery.com/jquery-2.2.0.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Record video and audio and upload to the server
I know this answer comes late, but now there's a standard forming to do this natively: MediaRecorder, supported in Chrome and Firefox right now.
There is a sample for the client side functionality you want here.
You can then take the blob and upload it as part of a POST request to the server. This way you get WebM which you could still transcode on the server (e.g. using ffmpeg).
Related Topics
How to Auto-Scroll to End of Div When Data Is Added
How to Prevent Submitting the HTML Form's Input Field Value If It Empty
Formdata.Append("Key", "Value") Is Not Working
Jquery Select Option Click Handler
Get Caret Index in Contenteditable Div Including Tags
How to Auto-Submit an Upload Form When a File Is Selected
Get the Text Content from a Contenteditable Div Through JavaScript
Difference Between Element.Value and Element.Getattribute("Value")
JSON Object Undefined in Internet Explorer 8
When Is the Comma Operator Useful
Prevent Form Submission with Enter Key
Retrieving File Names Out of a Multi-File Upload Control with JavaScript
How to Determine Which HTML Page Element Has Focus
Capture Frames from Video with HTML5 and JavaScript
Programmatically Play Video with Sound on Safari and Mobile Chrome