Est-il possible d'appliquer des effets visuels personnalisés (tels que des niveaux de gris) au flux d'entrée d'une balise en HTML5/Javascript? Mon objectif est d'être en mesure d'afficher la sortie d'une webcam filtrée à l'utilisateur, mais l'utilisateur devrait être en mesure de choisir parmi une variété de filtres, pas seulement en niveaux de gris.Filtrage vidéo HTML5/Javascript
Toute aide est grandement appréciée et j'accepte toujours une réponse!
Le moyen de le faire est de saisir chaque image d'un élément video et de le traiter, puis de l'afficher avec canvas. Here's an example Je l'ai fait récemment pour mon livre (avertissement: je sais qu'il y a quelques problèmes avec cet exemple dans IE9 actuellement), qui a utilisé un filtre de niveaux de gris de HTML5 Rocks. La boucle principale ressemble à ceci, supposons video est une référence à l'élément et context est un contexte de toile 2d, requestAnimFrame comes from Paul Irish:
function draw() {
if(video.paused || video.ended) return false;
context.clearRect(0,0,720,480);
context.drawImage(video,0,0,720,480);
context.putImageData(grayscale(context.getImageData(0,0,720,480)),0,0);
requestAnimFrame(draw);
}
La fonction getUserMedia() que Alex W mentionne seulement disponible actuellement dans Opera et Chrome, peut lire quelques articles de blog à ce sujet et voir quelques démos here. Une fois que vous avez un flux multimédia, vous pouvez l'insérer dans un élément video et faire exactement la même chose que ci-dessus.
Il ressemble à ceci est possible grâce à l'API Media utilisateur Get et WebGL:
http://dev.w3.org/2011/webrtc/editor/getusermedia.html
Voici un exemple (avec des liens vers de nombreuses ressources utiles):
Cette solution est OK, mais l'image résultante est plus bloquante et a une résolution inférieure à la sortie de la webcam d'origine. Est-ce qu'il y a un moyen de réparer ceci? – danielmhanover
@DanielH. Utilisez n'importe quel élément de résolution 'canvas' que vous voulez. – robertc
Cet exemple est très lent, probablement parce qu'il n'est pas accéléré par le GPU. Y at-il un moyen pour le GPU d'accélérer les effets visuels sur les toiles? – danielmhanover