Share
Ce que vous allez créerAujourd'hui, j'aimerais expérimenter l'API Media Capture and Streams, développée conjointement au W3C par le groupe de travail Web Communications en temps réel et le groupe de travail API de périphérique. Certains développeurs le savent peut-être simplement getUserMedia, interface principale permettant aux pages Web d'accéder à des périphériques de capture de supports tels que des webcams et des microphones.
Vous pouvez trouver le code source de ce projet sur mon GitHub. De plus, voici une démo de travail que vous pourrez expérimenter. Dans la dernière version d’aperçu de Windows 10, Microsoft a pour la première fois pris en charge les API de capture de supports dans le navigateur Microsoft Edge. Une grande partie de ce code provient de l'exemple Photo Capture que l'équipe de développement Edge a produit sur leur site de test de disque..
Pour ceux d'entre vous qui souhaitent plonger un peu plus loin, Eric Bidelman a publié un article de qualité dans HTML5 Rocks, qui s'inscrit dans l'historique de cette API..
La méthode getUserMedia () est un bon point de départ pour comprendre les API de capture de média. le getUserMedia () appel prend MediaStreamConstraints comme argument d'entrée, qui définit les préférences et / ou les exigences pour les périphériques de capture et les flux de média capturés, tels que l'appareil photo mode confronté, volume du microphone et résolution vidéo.
À travers MediaStreamConstraints, vous pouvez également choisir le périphérique capturé en utilisant son Reference de l'appareil, qui peut être dérivé de la enumerateDevices () méthode. Une fois que l'utilisateur a accordé son autorisation, le getUserMedia () appel retournera une promesse avec un objet MediaStream si le MediaStreamConstraints peut être rencontré.
Tout cela sans avoir besoin de télécharger un plugin! Dans cet exemple, nous allons plonger dans l'API et créer des filtres ordonnés sur la vidéo et les images que nous allons capturer. Est-ce que votre navigateur le supporte? bien getUserMedia () existe depuis Chrome 21, Opera 18 et Firefox 17, et fonctionne maintenant dans Edge.
La détection des fonctionnalités implique une simple vérification de l’existence de navigator.getUserMedia. C'est un gros projet de vérifier dans chaque navigateur, donc je suggérerais simplement d'utiliser Modernizr pour le vérifier. Voici comment ça fonctionne:
Accentsconagua
if (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', navigateur); getUM (video: true, fonction (//… //…)Sans Modernizr, comme illustré dans cet exemple, vous devez utiliser:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (! navigator.getuserMedia) Console.log ('Vous utilisez un navigateur qui ne prend pas en charge l'API de capture de média'); Dans notre code HTML, vous pouvez repérer la balise video en haut de la page. Vous remarquerez qu'il est également configuré pour la lecture automatique. Sans cela, la vidéo serait définitivement figée sur la première image..
Il n'y a pas actuellement de source pour le jeu de médias, mais nous allons l'injecter via JavaScript d'ici peu.
Cette nouvelle fonctionnalité peut offrir un certain nombre de nouvelles opportunités aux développeurs, mais elle peut également constituer un risque pour la sécurité de l'utilisateur final. Par conséquent, la première chose que vous remarquerez au lancement de cette application Web est qu’elle demande la permission d’utiliser votre webcam..
GetUserMedia accepte quelques paramètres. Le premier est un objet spécifiant les détails et les exigences pour chaque type de média auquel vous souhaitez accéder. Pour accéder à la webcam, le premier paramètre doit être video: true. En outre, pour utiliser le microphone et la caméra, transmettez video: true, audio: true.
C'est là que les choses deviennent vraiment intéressantes. Nous utilisons également la méthode MediaDevices.enumerateDevices dans cet exemple. Cela permet de collecter des informations sur les périphériques d'entrée / de sortie multimédia disponibles sur votre système, tels que les microphones, les caméras et les haut-parleurs. C’est une promesse qui renverra plusieurs propriétés, y compris le type d’appareil, telles que entrée vidéo, entrée audio, ou sortie audio. De plus, il peut générer un identifiant unique sous la forme d’une chaîne avec un identifiant unique (videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =), et enfin une étiquette décrivant le dispositif, telle que Caméra HD FaceTime (intégrée). Cependant, il s’agit toujours d’une technologie expérimentale et n’est même pas encore répertoriée sur CanIUse.com.
dans le initalizeVideoStream fonction, vous pouvez voir que nous récupérons la balise video de notre page et définissons sa source sur le flux que nous transmettons. Le flux lui-même est un blob. Si le navigateur ne supporte pas le srcObject attribut, il retombe de créer une URL sur le flux multimédia et définit cette.
// initializeVideoStream () - Fonction de rappel lorsque getUserMedia () renvoie avec un objet mediaStream // 1. Définissez mediaStream sur la balise video // 2. Utilisez l'attribut 'srcObject' pour déterminer s'il faut utiliser l'API standard ou le version héritée var initializeVideoStream = fonction (flux) mediaStream = flux; var video = document.getElementById ('videoTag'); if (typeof (video.srcObject)!! == 'indéfini') video.srcObject = mediaStream; else video.src = URL.createObjectURL (mediaStream); if (webcamList.length> 1) document.getElementById ('switch'). disabled = false; ; Je ne suis pas très doué pour prendre des photos, je compte donc souvent sur les filtres fournis par Instagram. Mais si vous pouviez appliquer vos propres filtres à votre vidéo ou à votre image statique? Bien, vous pouvez!
J'ai créé une fonction simple pour le flux vidéo, ce qui me permet d'appliquer des filtres CSS en temps réel. Celui de l'image est presque identique.
// changeCssFiltersOnVid () - Parcourir les filtres CSS appliqués au flux vidéo // 1. Saisissez une référence à la balise video // 2. Conservez les classes CSS originales tout en ajoutant les filtres // 3. Parcourez tous les filtres. var changeCssFilterOnVid = function () var el = document.getElementById ('videoTag'); el.className = 'view - video__video'; var effet = filters [index ++% filters.length] if (effect) el.classList.add (effect); console.log (el.classList); Au sommet de la classe, j'ai un tableau de filtres à parcourir en boucle. Ils sont stockés sous forme de chaîne, ce qui correspond à des classes avec des noms identiques en CSS.
// filtres CSS var index = 0; var filters = ['niveaux de gris', 'sépia', 'flou', 'inverti', 'luminosité', 'contraste', "];
Et dans le CSS:
/ * image * filtres vidéo * / .grayscale -webkit-filter: niveaux de gris (1); -moz-filter: niveaux de gris (1); -ms-filter: niveaux de gris (1); filtre: niveaux de gris (1); .sepia -webkit-filter: sépia (1); -moz-filter: sépia (1); -ms-filter: sépia (1); filtre: sépia (1); .blur -webkit-filter: blur (3px); -moz-filter: flou (3px); -ms-filter: flou (3px); filtre: flou (3px);
Vous pouvez voir plus d'exemples de la manière dont cela fonctionne et modifier les valeurs en temps réel sur la page du lecteur de test Edge..
En fouillant dans le code, vous pouvez voir d'autres fonctionnalités avec lesquelles vous n'êtes pas immédiatement familiarisé. La première chose qui a attrapé mon œil était navigator.msSaveBlob. Le constructeur Blob vous permet de créer et de manipuler facilement un blob (essentiellement un fichier) directement sur le client. Il est supporté dans IE 10+.
La méthode msSaveBlob vous permet de sauvegarder cet objet blob (dans ce cas, notre image instantanée) sur le disque. Il a également une méthode similaire, msSaveOrOpenBlob, qui vous permet également d’ouvrir l’image à partir du navigateur..
// savePhoto () - Fonction invoquée lorsque l'utilisateur clique sur l'élément de la toile // 1. Si msSaveBlob est pris en charge, récupérez le blob de la photo sur la toile et enregistrez le fichier image // 2. Sinon, configurez l'attribut de téléchargement de l'ancre élément et téléchargez le fichier image var savePhoto = function () if (photoReady) var canvas = document.getElementById ('canvasTag'); if (navigator.msSaveBlob) var imgData = canvas.msToBlob ('image / jpeg'); navigator.msSaveBlob (imgData, 'myPhoto.jpg'); else var imgData = canvas.toDataURL ('image / jpeg'); var link = document.getElementById ('saveImg'); link.href = imgData; link.download = 'myPhoto.jpg'; link.click (); canvas.removeEventListener ('click', savePhoto); document.getElementById ('photoViewText'). innerHTML = "; photoReady = false;;Si le navigateur prend en charge cette méthode, la quantité de code à écrire pour enregistrer une image sera réduite..
Ce n'est que le début. Nous pouvons également utiliser WebGL avec cela, ce qui permet d'appliquer encore plus de filtres et d'avoir un flux vidéo / audio en temps réel intégré dans des environnements hautement interactifs. Ce sera peut-être mon prochain projet…
De plus, vous pouvez vous connecter à l'API Web Audio pour appliquer une modulation de fréquence à votre sortie audio. Cet exemple du tuner Web Audio l’illustre bien. Certaines personnes sont plus axées sur l'apprentissage visuel, alors consultez également cet exemple Microsoft..
Enfin, à mesure que les navigateurs mobiles adoptent de plus en plus cette technologie, vous pourrez utiliser ces API JavaScript pour établir des liens avec le matériel sous-jacent et le faire fonctionner sur les appareils mobiles, quelle que soit la plate-forme. C'est un bon moment pour être un développeur Web, et j'espère qu'après l'avoir utilisé, vous comprendrez pourquoi je suis si enthousiaste d'en faire partie..
N'hésitez pas à consulter le code source et à voir un exemple de travail.
Microsoft propose de nombreuses formations gratuites sur de nombreuses rubriques JavaScript open source et nous avons pour mission de créer davantage avec Microsoft Edge. En voici quelques unes à consulter:
Et quelques outils gratuits pour commencer: Code Visual Studio, Azure Trial et des outils de test inter-navigateurs, tous disponibles pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
