web-dev-qa-db-ja.com

ブラウザからカメラにアクセスする

ブラウザからカメラ（Appleに内蔵）にアクセスすることはできますか？

最適なソリューションは、クライアント側のJavaScriptです。 JavaまたはFlash。

javascriptcamera
32
Justin

HTML5仕様ではWebcameraにアクセスできますが、最後に確認したところ、最終化にはほど遠い状態であり、ブラウザーのサポートはほとんどありません。

これは、始めるためのリンクです： http://www.html5rocks.com/en/tutorials/getusermedia/intro/

クロスブラウザで動作させるには、おそらくフラッシュを使用する必要があります。

W3ドラフト

14
xbonez

2017年現在、 WebKitはSafariでのWebRTCのサポートを発表

videoおよび標準のJavaScript WebRTCを使用してそれらにアクセスできるようになりました

例えば。

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;
});

それで遊んでください。

8
vadi taslim

そのためのダニー・マルコフからの本当にクールなソリューションがあります。 navigator.getUserMediaメソッドを使用し、最新のブラウザーで動作するはずです。 FirefoxとChromeで正常にテストしました。 IEは機能しませんでした：

デモは次のとおりです。

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

Danny Markovsの説明ページへのリンク：

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

GitHubへのリンク：

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

5
alex

HTML5で可能です。

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

2
Justin

これにはHTML5を使用できます。

<video autoplay></video>
<script>
  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);
</script>

ソース

1
Daniil Ryzhkov

ビデオチュートリアル：HTML5およびappMobi APIを使用してカメラにアクセスするが役立ちます。

また、getUserMediaメソッドを試すこともできます（Opera 12でサポート）

enter image description here

1
blasteralfred Ψ