ブラウザからカメラ(Appleに内蔵)にアクセスすることはできますか?
最適なソリューションは、クライアント側のJavaScriptです。 JavaまたはFlash。
HTML5仕様ではWebcameraにアクセスできますが、最後に確認したところ、最終化にはほど遠い状態であり、ブラウザーのサポートはほとんどありません。
これは、始めるためのリンクです: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
クロスブラウザで動作させるには、おそらくフラッシュを使用する必要があります。
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;
});
それで遊んでください。
そのためのダニー・マルコフからの本当にクールなソリューションがあります。 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へのリンク:
これには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>
ビデオチュートリアル:HTML5およびappMobi APIを使用してカメラにアクセスするが役立ちます。
また、getUserMedia
メソッドを試すこともできます(Opera 12でサポート)