このガイドに従って、HTML5 でウェブカメラからビデオをキャプチャしようとしています。
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
次のコードをコピーして貼り付けましたが、Chrome がカメラの使用許可を求めません。
<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>
ガイドで「ビデオをキャプチャ」をクリックすると機能しますが、ウェブカメラが表示されます...
別のWebサイトにも同様のコードがありますが、それでもうまくいきません
http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
<!-- HTML code -->
<video id="sourcevid" autoplay>Put your fallback message here.</video>
/* JavaScript code */
window.addEventListener('DOMContentLoaded', function() {
// Assign the <video> element to a variable
var video = document.getElementById('sourcevid');
// Replace the source of the video element with the stream from the camera
if (navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
// Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
// navigator.getUserMedia({video: true}, successCallback, errorCallback);
function successCallback(stream) {
video.src = stream;
}
function errorCallback(error) {
console.error('An error occurred: [CODE ' + error.code + ']');
return;
}
} else {
console.log('Native web camera streaming (getUserMedia) is not supported in this browser.');
return;
}
}, false);
これまでのところ、サンプル コードはどれも機能していないため、何か不足しているのか、何かが変更されているのではないかと考えていました。