Menu
Using Html 5 I want to record video and save the stream into a local file. Given below is the code. In a button click it already invokes the camera and captures the video in the 'VIDEO' tag of HTML. Can I store the stream into a local file? Or can I store it as MP4 file?
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function enter() { if (navigator.mozGetUserMedia) { navigator.myGetMedia=navigator.mozGetUserMedia; navigator.myGetMedia({video: true}, connect, error); } else { alert("NO"); } function connect(stream) { var video = document.getElementById("my_video"); video.src = window.URL ? window.URL.createObjectURL(stream) : stream; video.play(); var canvas = document.getElementById("c"); } function error(e) { console.log(e); } } </script> </head> <body> <canvas width="640" height="480" id="c"></canvas> <input type="button" value="RECORD" onClick="enter()"/> <input type="button" value="SAVE" /> <video id="my_video" width="640" height="480"/> </body> </html> I want to save the stream upon a save button click.
234
Select Create > Record screen from your navigation bar in Stream. If needed for your recording, make sure your device's camera and microphone are enabled. Select to start recording. You'll then be prompted to choose what you want to record: your entire screen, an application window, or browser tab.
The <video> HTML element embeds a media player which supports video playback into the document.
RecordRTC: WebRTC audio/video recording
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
Demo : https://www.webrtc-experiment.com/RecordRTC/
Creating .webm video from getUserMedia()
http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
Demo : http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html
Capturing Audio & Video in HTML5
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
94
MediaRecorder API is the solution you are looking for,
Firefox has been supporting it for some time now, and the buzz is is Chrome is gonna implement it in its next release (Chrome 48), but guess you still might need to enable the experimental flag, apparently the flag won't be need from Chrome version 49, for more info check out this Chrome issue.
Meanwhile, a sample of how to do it in Firefox:
var video, reqBtn, startBtn, stopBtn, ul, stream, recorder; video = document.getElementById('video'); reqBtn = document.getElementById('request'); startBtn = document.getElementById('start'); stopBtn = document.getElementById('stop'); ul = document.getElementById('ul'); reqBtn.onclick = requestVideo; startBtn.onclick = startRecording; stopBtn.onclick = stopRecording; startBtn.disabled = true; ul.style.display = 'none'; stopBtn.disabled = true; function requestVideo() { navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stm => { stream = stm; reqBtn.style.display = 'none'; startBtn.removeAttribute('disabled'); video.src = URL.createObjectURL(stream); }).catch(e => console.error(e)); } function startRecording() { recorder = new MediaRecorder(stream, { mimeType: 'video/mp4' }); recorder.start(); stopBtn.removeAttribute('disabled'); startBtn.disabled = true; } function stopRecording() { recorder.ondataavailable = e => { ul.style.display = 'block'; var a = document.createElement('a'), li = document.createElement('li'); a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join(''); a.href = URL.createObjectURL(e.data); a.textContent = a.download; li.appendChild(a); ul.appendChild(li); }; recorder.stop(); startBtn.removeAttribute('disabled'); stopBtn.disabled = true; }<div> <button id='request'> Request Camera </button> <button id='start'> Start Recording </button> <button id='stop'> Stop Recording </button> <ul id='ul'> Downloads List: </ul> </div> <video id='video' autoplay></video>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
