HTMLCanvasElement : méthode captureStream()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La méthode captureStream() de l'interface HTMLCanvasElement retourne un objet MediaStream contenant une CanvasCaptureMediaStreamTrack qui réalise une capture vidéo en temps réel du contenu du canevas.
Syntaxe
captureStream()
captureStream(frameRate)
Paramètres
frameRateFacultatif-
Une valeur à virgule flottante en double précision qui indique la fréquence de capture de chaque image. Si elle n'est pas définie, une nouvelle image est capturée à chaque modification du canevas ; si elle est définie à
0, les images ne sont pas capturées automatiquement ; elles ne le sont que lorsque la méthoderequestFrame()de la piste renvoyée est appelée.
Valeur de retour
Une référence à un objet MediaStream contenant une seule
CanvasCaptureMediaStreamTrack.
Exceptions
NotSupportedErrorDOMException-
Levée si la valeur de
frameRateest négative. SecurityErrorDOMException-
Levée si le bitmap du canevas n'est pas d'origine sûre ; au moins une partie de son contenu a été, ou pourrait avoir été, chargée depuis un site différent de celui d'où provient le document.
Exemple
// Rechercher l'élément canevas à capturer
const canvasElt = document.querySelector("canvas");
// Obtient le flux
const stream = canvasElt.captureStream(25); // 25 FPS
// Traite le flux
// Par exemple : l'envoyer vers un autre ordinateur via une
// RTCPeerConnection pc est une RTCPeerConnection créée ailleurs
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
Spécifications
| Specification |
|---|
| Media Capture from DOM Elements # dom-htmlcanvaselement-capturestream |
Compatibilité des navigateurs
Voir aussi
- La méthode
HTMLMediaElement.captureStream(), qui permet de capturer un flux depuis un élément multimédia. - L'interface
MediaStream - L'API Media Capture et Streams