[PHP] Een HTML Canvas animatie met audio omzetten naar mp4

[Arcane Apex]

Ik vroeg mij af of het mogelijk is om aan de server-side een HTML Canvas animatie met audio te converteren naar een video. (.mp4 of .webm bijvoorbeeld)

Ik weet dat het mogelijk is om HTML pagina's die CSS bevatten op te slaan als .jpg of .pdf aan de server-side, dus je zou denken dat een frame van het canvas-element in ieder geval wel als afbeelding opgeslagen kan worden. Als je die frames dan achter elkaar zou zetten heb je een video.

Echter, zelfs al zou dat lukken. Dan zit je nog met het probleem van de audio. Want hoe krijg je de audio dan in het videobestand, immers dingen zoals geluidseffecten kunnen op specifieke tijden afgespeeld worden en die tijden kunnen door Javascript bepaald worden.

Ik heb al best wat oplossingen gevonden voor de video-kant van het verhaal, maar dat zijn voornamelijk client-side oplossingen. Wat betekent dat je een browser open moet hebben om de video te renderen. Daarnaast nemen die oplossingen audio niet in acht.

Vandaar dat ik hier kom vragen of iemand eventueel server-side oplossingen weet.

[Djordjo]

Waar heb je op gezocht en wat voor oplossingen heb je al specifiek gevonden? Een oplossingsrichting met een (headless) browser lijkt me niet meer dan logisch.

[Arcane Apex]

Een oplossing die ik heb gevonden is RecordRTC, echter is dit een client-side oplossing.

[ Voor 41% gewijzigd door Arcane Apex op 10-04-2019 22:33 ]

[Djordjo]

Google op "html render to video music" geeft me deze link. Op die pagina wordt hetzelfde probleem als jij schetst beschreven, met een uitgebreide zoektocht naar een werkende oplossing.

[BernardV]

Ik zou eens kijken naar een “screen recorder with system audio” dan ben je er lijkt me?

[Arcane Apex]

En werkt dat ook puur server-side?

[Djordjo]

Als je met puur server-side bedoelt dat er geen render-engine gebruikt mag worden (typische functionaliteit van een client): Nee.

[EddoH]

Arcane Apex schreef op woensdag 10 april 2019 @ 22:02:
Ik vroeg mij af of het mogelijk is om aan de server-side een HTML Canvas animatie met audio te converteren naar een video. (.mp4 of .webm bijvoorbeeld)

Ik weet dat het mogelijk is om HTML pagina's die CSS bevatten op te slaan als .jpg of .pdf aan de server-side, dus je zou denken dat een frame van het canvas-element in ieder geval wel als afbeelding opgeslagen kan worden. Als je die frames dan achter elkaar zou zetten heb je een video.

Echter, zelfs al zou dat lukken. Dan zit je nog met het probleem van de audio. Want hoe krijg je de audio dan in het videobestand, immers dingen zoals geluidseffecten kunnen op specifieke tijden afgespeeld worden en die tijden kunnen door Javascript bepaald worden.

Ik heb al best wat oplossingen gevonden voor de video-kant van het verhaal, maar dat zijn voornamelijk client-side oplossingen. Wat betekent dat je een browser open moet hebben om de video te renderen. Daarnaast nemen die oplossingen audio niet in acht.

Vandaar dat ik hier kom vragen of iemand eventueel server-side oplossingen weet.

Je hebt per definitie een client-achtige oplossing nodig. Je server serveert data. De browser parsed deze data en voert dit uit of geeft dit weer. Om de uitvoer hiervan op te nemen kun je niet zomaar de browser stap overslaan natuurlijk. Je zult sowieso de/een browser render engine beschikbaar moeten hebben. Je kunt dus kijken naar een client-achtige oplossing die je op de server zelf draait, en dus requests naar de server zelf doet.

[Arcane Apex]

Ik ben een stap verder door de oplossing van JorgD, namelijk door het gebruik van een headless browser. Dankjewel JorgD. Hierdoor kan ik de frames van de canvas-animatie opslaan als PNG-bestanden en daaruit maak ik dan een video. Dat gaat allemaal goed.

Echter het audiogedeelte is me nog niet gelukt. De reden is dat ik vooralsnog geen Javascript functionaliteit of library heb kunnen vinden die audio kan capturen van een canvas element of website als geheel. Bijna alle functies en libraries die ik heb kunnen vinden die native Javascript zijn, zijn voor het recorden van microfoonaudio, maar daar heb ik niet zoveel aan.

Wat ik wil is met een Javascript-functie een audiocapture of audiorecording beginnen die de audio-output van het canvaselement opslaat als .wav or .mp3 .

Dus zeg maar zo:

code:

startAudioCapture(); // Start recording

// Tussen deze twee functies speelt de canvasanimatie af met al zijn dynamisch gegeneerde geluiden.

stopAudioCapture(); // Stop recording

Het resultaat wil ik dan in een .wav of .mp3 opslaan en versturen naar de server.

[iH8]

Crosspost vanuit je andere topic voor de geintresseerden:

Een HTML canvas element kan helemaal geen audio afspelen, dat is onmogelijk.

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

Maar geen audio dus. Native kunnen alleen HTMLMediaElements zoals <video> en <audio> audio afspelen. Voor die tijd zat je vast aan plugins zoals Flash en Silverlight. Ik zou mezelf eens verdiepen in de materie zodat je begrijpt wat er nu audio af aan het spelen is en dan je vraag even aanpassen of opnieuw stellen ofzo. Zo kan niemand je helpen.

[Arcane Apex]

Ik ben wederom weer een stap verder. Ook ditmaal had JorgD het juiste idee. Ik heb namelijk de link die je hebt gepost eens goed doorgelezen en heb daarnaast ook veel eigen research gedaan. En dan kom ik net als de schrijver van het artikel in die link uit op Sox om het audiogedeelte af te handelen.

Wederom bedankt. Ik heb mijn code nu werkend. Er moeten hier en daar alleen nog zaken geperfectioneerd, geoptimaliseerd en opgeschoond worden, maar de basis staat er.

Nogmaals bedankt.