Ecco la mia soluzione:
Come si vedrà non ho assolutamente fatto uso di jquery o altre librerie che io considero assolutamente inutili, appesantiscono le esecuzioni e rendono il sorgente mal leggibile.
Qui è tutto puro HTML,Javascript e ASP
In questo modo è ben comprensibile e poi ognuno se lo arricchisce a piacere.
Iniziamo con la parte essenziale lato Client
L'operatore deve avviare il video caricato e metterlo in pausa al frame desiderato.codice:<!-- il video da cui deve essere catturato un frame --> <video id="MioVideo" src="MyVideo.mp4" type='video/mp4' controls preload="auto"></video> <!-- bottone che avvia la cattura --> <button class="btn btn-default ButtonPrev" onClick="GrabPoster('MioVideo')">CATTURA</button> <!-- div con oggetto canvas usato per la cattura. Div hidden --> <div style="display:none;"> <canvas id="PosterCanvas"></canvas> <video id="PosterVideo" controls preload="auto" src='' type='video/mp4'></video> </div> <!-- form che invia al server l'immagine da salvare --> <form id="FormPoster" action="UploadPoster.asp" method="post"> <input type="hidden" name="PostImg" id="PostImg" value=""> <input type="hidden" name="PostNome" id="PostNome" value=""> </form> <script> function GrabPoster(IdVideo) { // funzione per catturare e calibrare l'immagine var video = document.getElementById(IdVideo); var canvas = document.getElementById('PosterCanvas'); var context = canvas.getContext('2d'); var ratio = (video.videoWidth / video.videoHeight); var w = 320; //video.videoWidth; var h = parseInt(w / ratio, 10); canvas.width = w; canvas.height = h; context.fillRect(0, 0, w, h); context.drawImage(video,0,0,w,h); var MyPoster=canvas.toDataURL(); document.getElementById("PosterImg").src=MyPoster; document.getElementById("DivPosterImg").style.display=''; var NomeCompleto=document.getElementById(IdVideo).src; OnlyNome=NomeCompleto.substr(NomeCompleto.lastIndexOf("/")+1); // rimuove path OnlyNome=OnlyNome.substr(0,OnlyNome.lastIndexOf("."))+".jpg"; // sostituisce estenzione SavePoster(MyPoster,OnlyNome); // richiama funzione per l'invio al server } function SavePoster(Poster,Nome) { // funzione per l'invio al server document.getElementById('PostImg').value=Poster; document.getElementById('PostNome').value=Nome; document.getElementById('FormPoster').submit(); } </script>
Successivamente premere il bottone CATTURA.
Il controllo passa alla funzione GrabPoster che cattura il frame e richiama la funzione SavePoster per inviare al server.
Molto semplice e sintetico.
Ora passiamo al lato Server che deve ricevere l'immagine in formato stringa, riconvertire in immagine e salvare su disco.
Anche qui semplice e minimale.codice:Poster=request.Form("PostImg") Nome=request.Form("PostNome") PATH_IMAGES="../public/posters/" Set Doc = Server.CreateObject("MSXML2.DomDocument") Set nodeB64 = Doc.CreateElement("b64") nodeB64.DataType = "bin.base64" nodeB64.Text = Mid(Poster, InStr(Poster, ",") + 1) dim bStream set bStream = server.CreateObject("ADODB.stream") bStream.type = 1 bStream.Open() bStream.Write( nodeB64.NodeTypedValue ) call bStream.SaveToFile(Server.Mappath(PATH_IMAGES&Nome), 2 ) bStream.close() set bStream = nothing
Ora, portando avanti questo progetto mi sono scontrato con altre necessità e difficoltà:
1- Cattura diretta in fase di Upload del video
2- Definire l'orientamento dei video per i browser che non riescono a leggerlo.
Per il primo caso ho risolto creando questo processo subito dopo l'upload e funziona bene ma solo su computer. Non è possibile con gli smartphone in quanto è bloccato il preload o l'autoload del video
Per il secondo punto ... ancora non so come fare. Dovrei mettere mano sui meta-tag del video ... almeno credo.

Rispondi quotando