HTML 5 registrazione video e memorizzazione di un flusso

Utilizzo di Html 5 Voglio registrare video e salvare lo streaming in un file locale. Dato sotto è il codice. Con un clic del pulsante, la telecamera viene già richiamata e acquisisce il video nel tag "VIDEO" dell'HTML. Posso archiviare lo stream in un file locale? O posso memorizzarlo come file MP4?HTML 5 registrazione video e memorizzazione di un flusso

<!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>

Desidero salvare lo stream con un clic di pulsante di salvataggio.

fonte

2013-08-29 Nithin

RecordRTC: registrazione WebRTC audio/video

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

Registrazione audio sia per Chrome e Firefox
Video/Gif per Chrome; (Firefox ha un po 'di problemi di bit, saranno recuperati a breve)

Demo: https://www.webrtc-experiment.com/RecordRTC/

la creazione di video .webm da getUserMedia()

http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

Demo: http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

Acquisizione audio & video in HTML5

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

fonte

2013-08-29 11:32:45 l2aelba

Buoni collegamenti, soluzioni interessanti. Tuttavia, si noti che si tratta ancora di soluzioni alternative che si basano sulla creazione di istantanee di elementi canvas e sulla codifica dei frame uno ad uno con whammy. – georg

@georg aggiornato - html5rocks aggiunto – l2aelba

è disattivato in chrome e il video non è supportato in firfox come posso registrare il mio suono in chrome e video in firfox –

Attualmente non esiste una produzione pronto HTML5 solo soluzione per la registrazione video sul web. Le attuali soluzioni disponibili sono i seguenti:

HTML Media Capture

Opere su dispositivi mobili e utilizza il sistema operativo' acquisizione video app per catturare video e upload/POST a un server web. Otterrete i file .mov su iOS (questi non sono riproducibili su Android ho provato) e .mp4 e .3gp su Android. Almeno i codec saranno gli stessi: H.264 per video e AAC per audio nel 99% dei dispositivi.

Immagine per gentile concessione di https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/

Flash e un server multimediale sul desktop.

Registrazione video in Flash funziona così: i dati audio e video viene catturato dalla webcam e microfono, è codificato utilizzando Sorenson Spark o H.264 (video) e Nellymoser Asao o Speex (audio) allora è in streaming (RTMP) su un server multimediale (Red5, AMS, Wowza) dove viene salvato nei file .flv o .f4v.

La proposta della registrazione MediaStream

The MediaStream Recording is a proposal by the the Media Capture Task Force (a joint task force between the WebRTC and Device APIs working groups) for a JS API who's purpose is to make basic video recording in the browser very simple.

Non supportato dai principali browser. Quando verrà implementato (se lo sarà) molto probabilmente finirai con diversi tipi di file (almeno .ogg e .webm) e codec audio/video a seconda del browser.

soluzioni commerciali

Ci sono alcune saas e soluzioni software là fuori che gestirà alcuni o tutti i addpipe.com tra cui sopra, HDFVR, Nimbb e Cameratag.

Ulteriori approfondimenti:

HTML Media Capture video recording prompts in iOS9
HTML5 Video Recording copre sia HTML Media Capture e registrazione MediaStream.
Pipe è un saas per la registrazione video che gestisce anche la conversione finale a .mp4

fonte

2015-10-08 15:55:05

MediaRecorder API è la soluzione che state cercando,

Firefox ha sostenuto che da qualche tempo, e la buzz è Chrome lo implementerà nella sua prossima versione (chrome 48), ma suppongo che potrebbe ancora essere necessario abilitare la bandiera sperimentale, di conseguenza la bandiera non sarà necessaria dalla versione 49 di Chrome, per maggiori informazioni dai un'occhiata a questo chrome issue.

Nel frattempo, un esempio di come farlo 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>

fonte

2015-12-14 03:28:43 mido

Questa è ancora una buona risposta? L'esempio non funziona in nessuno dei miei browser ... – Jim

@jim, probabilmente è un problema con https, puoi provare https://mido22.github.io/MediaRecorder-sample/ – mido

Qualche idea del motivo per cui ricevo " NotSupportedError: Operation is not supported "sulla riga 47, che è' recorder = new MediaRecorder (stream, {mimeType: 'video/mp4'}); '? – Utkanos

HTML 5 registrazione video e memorizzazione di un flusso

risposta

Problemi correlati