Teaching Newbies since 2014

kauress

  • Home
  • Javascript ❤
    • JavaScript
    • Node.js
  • WebDev Tuts
  • screencasts
  • Resources
  • VR & AR
  • Contact
  • Github
  • Twitter
  • YouTube
  • RSS
  • C++
You are here: Home / Javascript ❤ / JavaScript / Stream video with getUserMedia()

April 13, 2020 by: Kauress

Stream video with getUserMedia()

Request the user to start their webcam stream [code] var video= document.querySelector(“#videoElement”); if(navigator.mediaDevices.getUserMedia){ navigator.mediaDevices.getUserMedia({ video: true }) .then(function (stream) { video.srcObject = stream; }) .catch(function (error) { console.log(“Error streaming”); }); } [/code]
  1. Using the getUserMedia() API which allows you to access a user’s camera and mic without any plugins
  2. Streams have inputs (video) and outputs (video)
  3. The if-conditional checks if the getUserMedia is supported
  4. Syntax: navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback)
  5. The getUserMedia() method takes one argument called the MediaStreamConstraints object which allows you to specify the constrains/specifications of the media . In this case video is set to true
  6. Media.getUserMedia() returns then method which returns a promise which will take 2 parameter:
  • a callback function which resolves to a media stream object, in this case video
  • failure function for a failure
  1. If there is is an error, or the user refuses to give permission to access the webcam then ‘error’ is logged to the console
Pose Recognition with posenet #machinelearning
Ml5.js #machinelearning library for newbies

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2021 ·Kauress