Exemple d'implémentation de la fonction de capture d'écran vidéo à l'aide de Canvas et HTML5

J'ai étudié Canvas pendant cette période, et j'ai soudain pensé à créer une fonction qui puisse prendre des captures d'écran de vidéos, puis extraire les images pour créer des émoticônes, hahahahahaha~~
Méthode de production :
1 .Chargez la vidéo sur la page
Lorsque vous utilisez Canvas pour créer cette fonction de capture d'écran, vous devez d'abord vous assurer que la vidéo a été chargée sur la page, afin qu'elle puisse être utilisée facilement. Si vous utilisez la méthode suivante pour intégrer directement la balise

<video loop controls id="testmp4" width="500" height="400" >    

<source src="test.mp4" type="video/mp4">  

<source src="test.webm" type="video/webm">   

<source src="test.ogg" type="video/ogg">

</video>

Comme mentionné dans mon article "html5 et vidéo", le navigateur précharge la progression de la vidéo et charge les événements. Différents supports affectera la lecture de la vidéo et le déclenchement d’autres événements. Nous utilisons donc ici js pour construire une vidéo afin d'introduire la vidéo.
Soyez prudent lorsque vous introduisez des vidéos de cette manière. Plusieurs sources ne peuvent pas être introduites, vous devez donc d'abord déterminer la prise en charge des formats vidéo par le navigateur.
1.1 Utilisez la méthode canPlayType() de la vidéo pour déterminer le format pris en charge
La méthode canPlayType() doit transmettre un paramètre, qui est le format de la vidéo
Common. valeurs :

video/ogg;
　　　　video/mp4;
　　　　video/webm;

ou inclure l'encodeur :

　　　　video/ogg;codecs="theora,vorbis"
　　　　video/mp4;codecs="avc1.4D401E, mp4a.40.2"
　　　　video/webm;codesc="vp8.0, vorbis"

Valeur de retour : indique le niveau de support de la page Web : "probablement" - le plus susceptible de prendre en charge (uniquement celui-ci est renvoyé lorsque la valeur d'entrée a un encodeur ); "peut-être" - peut être pris en charge ; "" - (chaîne vide) n'est pas pris en charge

function videoType(video){

    var returnType='';

    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){

    　　returnType= 'mp4';

    }else if(video.canPlayType(&#39;video/ogg&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/ogg&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;ogg&#39;; 　　 
    <br>　　 
    }else if(video.canPlayType(&#39;video/webm&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/webm&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;webm&#39;; 　　 <br>　　 }<br>　　 return returnType; 

}

Cette fonction peut déterminer le format pris en charge par ; le navigateur pour la vidéo.
1.2 Utiliser js pour charger dynamiquement les balises vidéo
Après avoir déterminé les formats pris en charge par le navigateur, puisque j'utilise Chrome, mon navigateur prend en charge les vidéos au format mp4, puis nous créons dynamiquement une vidéo étiqueter.

var videoElem;

var videop;

function createVideo(){

     videoElem=document.createElement("video");//创建video

     videop=document.getElementById("videopanel");//获取video的外层容器

     videop.appendChild(videoElem);

     var vtype=videoType(videoElem);//判断浏览器支持的格式

     if(vtype==""){

        videop.innerHtml('不支持video')

    }else{

        videoElem.setAttribute('src',"text."+vtype);
    }
}

Puisque nous voulons créer une fonction de capture d'écran ici, une simple vidéo n'a pas d'interface de capture d'écran, nous devons donc la copier sur le canevas et lire la vidéo sur le canevas, donc ici nous Masquez d’abord la vidéo (affichage : aucun).
2. Utilisez le canevas pour copier la vidéo
Maintenant que la vidéo a été lue sur le navigateur, nous allons la copier sur le canevas. Créez d'abord le canevas, puis obtenez le contexte du canevas. . Ce ne sera pas dit. Comment dessiner une vidéo sur toile, ici nous devons utiliser une fonction. Utilisation de la fonction drawImage

1.drawImage(img,x,y) : dessinez une image à la position (x,y) du canevas

2.drawImage(img,x, y , width, height) : Dessinez une image avec la largeur, la largeur et la hauteur à la position (x, y) du canevas

3.drawImage(img,sx,sy,swidth,sheight,x,y ; , largeur, hauteur) : dessinez une capture d'écran de la largeur et de la hauteur de l'image à la position (sx, sy) de la toile à la position (x, y). L'image doit être mise à l'échelle en fonction de la largeur et de la hauteur lorsqu'elle est dessinée. la toile.

Ce qui précède est l'utilisation de drawImage. Cette fonction est très puissante.

Revenant à la prise de captures d'écran, nous avons maintenant créé la vidéo-contexte sur le navigateur sur le navigateur, puis nous dessinons la vidéo ici :

contextVideo.drawImage(videoElem,0,0);

Ensuite, nous pouvons voir qu'un l'image est dessinée dans le canevas, mais la vidéo change constamment, nous devons donc utiliser la fonction setInterval pour dessiner en continu l'image en utilisant la vidéo comme source.

setInterval(function(){<br>    contextVideo,drawImage(videoElem,0,0);<br>},100)

La taille de l'intervalle de temps ici affectera le gel de la lecture vidéo. ​

À ce stade, nous avons déplacé la vidéo vers la toile pour l'afficher. Ensuite, faites une capture d'écran.

3. Faites une capture d'écran pour afficher le panneau de canevas

Ici, nous devons dessiner un autre canevas sur la page - contextImg, puis utiliser à nouveau la méthode drawImage pour prendre une capture d'écran.

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height);

Ce code dessine la première toile sur la deuxième toile.
4. Créez un bouton de capture d'écran
Créez un bouton, puis liez l'événement de clic. Après avoir cliqué, la fonction de l'étape précédente sera appelée, afin que vous puissiez faire une capture d'écran.
Une fois la photo prise, vous pouvez cliquer avec le bouton droit sur l'image pour l'enregistrer, puis l'importer dans PS pour créer un package d'émoticônes.

Ce qui précède est le contenu de l'exemple de fonction de capture d'écran vidéo implémentée par canvas et html5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !