Access camera from a browser

Question

Is it possible to access the camera  built-in on Apples  from a browser    Optimal solution would be client-side javascript  Looking to avoid using Java or Flash

User · Answer

There is a really cool solution from Danny Markov for that. It uses navigator.getUserMedia method and should work in modern browsers. I have tested it successfully with Firefox and Chrome. IE didn't work:

Here is a demo:

https://tutorialzine.github.io/pwa-photobooth/

Link to Danny Markovs description page:

http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/

Link to GitHub:

https://github.com/tutorialzine/pwa-photobooth/

User · Answer

The HTML5 spec does allow accessing the webcamera  but last I checked  it is far from finalized  and has very  very little browser support    This is a link to get you started  http   www html5rocks com en tutorials getusermedia intro   You ll probably have to use flash if you want it to work cross-browser   W3 draft

User · Answer

lt style type  quot text css quot  gt           container               margin  0px auto              width  500px              height  375px              border  10px  333 solid                      videoElement             width  500px            height  375px            background-color   777                 lt  style gt       lt div id  quot container quot  gt               lt video autoplay  quot true quot  id  quot videoElement quot  gt  lt  video gt           lt  div gt           lt script type  quot text javascript quot  gt            var video   document querySelector  quot  videoElement quot              navigator getUserMedia   navigator getUserMedia  navigator webkitGetUserMedia  navigator mozGetUserMedia  navigator msGetUserMedia  navigator oGetUserMedia                 if navigator getUserMedia                navigator getUserMedia  video true   handleVideo  videoError                              function handleVideo stream                video srcObject stream              video play                               function videoError e                              lt  script gt

User · Answer

SIMPLE JAVASCRIPT VANILLA     x000D   x000D  var video   document querySelector   videoElement     if  navigator mediaDevices getUserMedia        navigator mediaDevices getUserMedia   video  true             then function  stream                video srcObject   stream                      catch function  err0r                console log  Something went wrong                   x000D   lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset  utf-8  gt   lt meta content  stuff  to  help  search  engines  not  name  keywords  gt   lt meta content  What this page is about   name  description  gt   lt meta content  Display Webcam Stream  name  title  gt   lt title gt Display Webcam Stream lt  title gt   lt style gt     container     align-self  center     margin-left  350px     align-items  center     justify-content  center  position  relative      width  1000px      height  1000px         background-color  black         padding  3px         videoElement      transform  rotate 90deg      align-self  center     height  50a0px     left  20     width  700px     position absolute     padding  1px     top  120px       lt  style gt   lt  head gt      lt body gt   lt div id  container  gt       lt video autoplay  true  id  videoElement  gt       lt  video gt   lt  div gt   lt script src  index js  gt    lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

As of 2017  WebKit announces support for WebRTC on Safari  Now you can access them with video and standard javascript WebRTC  E g   var video   document createElement  video    video setAttribute  playsinline        video setAttribute  autoplay        video setAttribute  muted        video style width    200px   video style height    200px       Setting up the constraint    var facingMode    user      Can be  user  or  environment  to access back or front camera  NEAT   var constraints       audio  false    video       facingMode  facingMode            Stream it to video element    navigator mediaDevices getUserMedia constraints  then function success stream      video srcObject   stream        Have a play with it

User · Answer

Video Tutorial  Accessing the Camera with HTML5  amp  appMobi API will be helpful for you   Also  you may try the getUserMedia method  supported by Opera 12

User · Answer

You can use HTML5 for this    lt video autoplay gt  lt  video gt   lt script gt    var onFailSoHard   function e        console log  Reeeejected    e              Not showing vendor prefixes    navigator getUserMedia  video  true  audio  true   function localMediaStream        var video   document querySelector  video        video src   window URL createObjectURL localMediaStream           Note  onloadedmetadata doesn t fire in Chrome when using it with getUserMedia         See crbug com 110938      video onloadedmetadata   function e             Ready to go  Do some stuff              onFailSoHard    lt  script gt    Source

User · Answer

Possible with HTML5   http   www html5rocks com en tutorials getusermedia intro

[javascript] Access camera from a browser

Examples related to javascript

Examples related to camera