il modo migliore per creare video dall'animazione html5

Question

Volevo fare una breve introduzione per un podcast video. Essendo uno sviluppatore web geniale e non avendo già accesso o conoscenza degli strumenti di animazione, ho pensato che avrei potuto provare a fare l'introduzione usando varie tecniche html5. Il problema è: come posso trasformarlo in un video clip che posso facilmente inserire in iMovie?

Se necessario, penso che questo può essere realizzato se utilizzo solo canvas esportando un png ogni frame usando getImageData. L'unico inconveniente è che sono limitato solo alla tela. Speravo di utilizzare l'intera gamma di nuove tecniche html5/css3/svg. Non ho bisogno di questa funzionalità per funzionare per l'uso generale del web, solo per me stesso, quindi sarei felice per tutto ciò che richiede l'installazione ecc. Per farlo funzionare.

Se è necessario, suppongo di poter utilizzare probabilmente uno strumento per la cattura di schermate video, ma speravo in una completa catena open source.

Alla fine, mi aspetto che creerò una serie di png e useremo ffmpeg per metterli insieme, speravo solo di trovare un ottimo modo per farlo in modo automatico e open source.

Aggiornamento Voglio solo chiarire che quello che sto cercando di fare è usare HTML5 invece di qualcosa di simile a flash, ma non sto cercando di servirlo ad altre persone su Internet, voglio convertire al video, e non ha mai bisogno di lasciare il mio computer, che in realtà è un mac, non un server Linux. Se Flash può farlo, perché non html, giusto? Sembra essere ciò che le persone stanno cercando di rivendicare. Il problema è che posso prendere un SWF e convertirlo in video standard, ma come lo fai con le animazioni di javascript o CSS3? Ovviamente uno strumento di cattura dello schermo può fare il lavoro, ma quelli sono in genere una bassa frequenza dei fotogrammi e non possono essere eseguiti a livello di codice a mia conoscenza.

Il tipo di cosa più vicino che posso pensare che non è uno strumento di screenshot sarebbe qualcosa come webkit2png, solo invece di un singolo png, ci vorrebbero 60 png al secondo. Ad un certo punto, potrei effettivamente provare a implementare esattamente questo, ma volevo vedere se qualcun altro avesse qualcosa di buono.

Esempio Così ho effettivamente appena fatto un intro con il costruito in iMovie carte titolo. This is a good example di rozzamente il genere di cosa che vorrei fare. In realtà dovrebbe essere abbastanza semplice con un po 'di lavoro di animazione CSS3. Quello che ho non è male, ma mi piacerebbe usare una grafica personalizzata, con un migliore controllo font/layout.

Answer 1

Finora la cosa migliore che ho trovato finora che non mi richiede di scrivere codice C utilizza titanio per desktop. È dotato di una funzione takeScreenshot disponibile dal codice javascript. La funzione takeScreenshot ottiene uno screenshot dell'intero desktop, ma dovrebbe essere facile automatizzare il ritaglio.Con una miriade di librerie di animazioni javascript, dovrei essere in grado di hackerare il modo di ottenere uno screenshot ad ogni frame, anche se non può accadere in tempo reale.

Anche se non sarà possibile utilizzare le animazioni CSS, questa è probabilmente la soluzione più flessibile in ogni caso, dato che tutto ciò che posso fare con le animazioni CSS che posso fare con javascript, e avrò più controllo sul frame rate , ecc.

Inoltre, questo dovrebbe consentirmi di utilizzare tutte le funzioni del browser, combinando html/css/js/svg/canvas.

Answer 2

Che ne dici di registrare lo schermo con qualcosa come http://danicsoft.com/software/copernicus/?

Answer 3

Well Techsmith Snagit acquisisce in AVI, o la loro applicazione premium camtasia (genera un video Flash e un avvio di una pagina Web) funzionerebbe. Perché non creare semplicemente una diapositiva Powerpoint delle funzionalità che desideri toccare e utilizzare un set di pagine HTML di demo reali che desideri illustrare in profondità. Questo è l'approccio che sto prendendo.

Answer 4

Esiste un tutorial con il codice che utilizza javascript e PHP per create a video from your canvas animation. Il programma salva frame per frame dell'animazione della tela come in un film, e quindi puoi convertire questa pila di frame in un formato video specifico con il codec di tua scelta.

Codice dalla pagina collegata.

(function() { 
    var canvas = document.getElementById('c'), 
     c = canvas.getContext('2d'), 
     w = canvas.width, h = canvas.height, 
     p = [], clr, n = 200; 

    clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ]; 

    for (var i = 0; i < n; i++) { 
     // generate particle with random initial velocity, radius, and color 
     p.push({ 
      x: w/2, 
      y: h/2, 
      vx: Math.random()*12-6, 
      vy: Math.random()*12-6, 
      r: Math.random()*4+3, 
      clr: Math.floor(Math.random()*clr.length) 
     }); 
    } 

    function frame() { 
     // cover the canvas with 50% opacity (creates fading trails) 
     c.fillStyle = 'rgba(0,0,0,0.5)'; 
     c.fillRect(0, 0, w, h); 

     for (var i = 0; i < n; i++) { 
      // reduce velocity to 99% 
      p[i].vx *= 0.99; 
      p[i].vy *= 0.99; 

      // adjust position by the current velocity 
      p[i].x += p[i].vx; 
      p[i].y += p[i].vy; 

      // detect collisions with the edges 
      if (p[i].x < p[i].r || p[i].x > w-p[i].r) { 
       // reverse velocity (direction) 
       p[i].vx = -p[i].vx; 
       // adjust position again (in case it already passed the edge) 
       p[i].x += p[i].vx; 
      } 
      // see above 
      if (p[i].y < p[i].r || p[i].y > h-p[i].r) { 
       p[i].vy = -p[i].vy; 
       p[i].y += p[i].vy; 
      } 

      // draw the circle at the new postion 
      c.fillStyle = clr[p[i].clr]; // set color 
      c.beginPath(); 
      c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false); 
      c.fill(); 
     } 
    } 

    // execute frame() every 30 ms 
    setInterval(frame, 30); 
}()); 

Answer 5

Hai ragione, secondo me, il modo migliore per farlo è quello di creare immagini dai dati della tela e quindi compilare tutte quelle immagini in un video tramite un modulo (fluent-ffmpeg ad esempio, che è un pacchetto nodo js). È piuttosto semplice, ma fai attenzione a FPS (frame rate) se crei quelle immagini il più velocemente possibile, potresti cambiare il fps del tuo video, ad esempio se usi ricorsivamente requestAnimationFrame() sarai a 60fps. Quindi, invece di leggere un video html5 dovresti impostare il tempo ogni 1/30s (ad esempio se vuoi un video a 30fps) e creare un'immagine dal tempo corrente fino alla fine del video. E se non hai solo una tela, se applichi le animazioni sul tuo video tramite più tele, puoi creare una nuova tela vuota e disegnare su di essa tutti i dati della tela per creare solo un'immagine invece di un'immagine per ogni tela.

Ciao da Francia

Answer 6

avevo lavorato su uno strumento che fa qualcosa di simile alle vostre esigenze. Fondamentalmente usa cutycapt (o qualsiasi altro strumento per convertire l'HTML con i CSS in un'immagine) e prende una serie di schermate a seconda del frame rate richiesto.

Per far sì che funzioni, le animazioni devono essere puramente animazioni CSS e lo strumento interpola le proprietà CSS del fotogramma intermedio analizzando il CSS.

https://github.com/bpsagar/css2video

io non sono sicuro se lo strumento è completo, fatemi sapere se siete interessati.