HTML5講座3回
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
HTML5では
getUserMediaというAPIを使うことで
ブラウザでカメラキャプチャーすることも可能です。
今回使うコードはこちらです
&ref(camera.html);
今回はローカルだとChromeで開くにはパーミッションが必要に...
Chromeでもできるのですが
回避する方法はめんどくさいのでFirefoxで開きます
カメラとマイクを聞かれますので指定します
&ref(camera.png);
キャプチャーが開始されます
&ref(capture.png);
全ソースコードは次のようになります。
<!doctype html>
<html>
<head>
<title>カメラ</title>
<script type="text/javascript">
window.onload = function(){
navigator.getUserMedia = navigator.getUserMedia |...
navigator.mozGetUserMedia ||...
window.URL = window.URL || window.webkitURL;
var video = document.getElementById('myVideo');
var localStream = null;
navigator.getUserMedia(
{video: true, audio: true},
function(stream) { // for success case
console.log(stream);
video.src = window.URL.createObjectURL(st...
},
function(err) { // for error case
console.log(err);
}
);
};
</script>
</head>
<body>
<video id="myVideo" width="400" height="300" autoplay=...
</body>
</html>
やってることは単純で
getUserMediaから得たストリームをvideoタグのsrcに流し込み...
#vote(○[0],△[0],×[0])
終了行:
HTML5では
getUserMediaというAPIを使うことで
ブラウザでカメラキャプチャーすることも可能です。
今回使うコードはこちらです
&ref(camera.html);
今回はローカルだとChromeで開くにはパーミッションが必要に...
Chromeでもできるのですが
回避する方法はめんどくさいのでFirefoxで開きます
カメラとマイクを聞かれますので指定します
&ref(camera.png);
キャプチャーが開始されます
&ref(capture.png);
全ソースコードは次のようになります。
<!doctype html>
<html>
<head>
<title>カメラ</title>
<script type="text/javascript">
window.onload = function(){
navigator.getUserMedia = navigator.getUserMedia |...
navigator.mozGetUserMedia ||...
window.URL = window.URL || window.webkitURL;
var video = document.getElementById('myVideo');
var localStream = null;
navigator.getUserMedia(
{video: true, audio: true},
function(stream) { // for success case
console.log(stream);
video.src = window.URL.createObjectURL(st...
},
function(err) { // for error case
console.log(err);
}
);
};
</script>
</head>
<body>
<video id="myVideo" width="400" height="300" autoplay=...
</body>
</html>
やってることは単純で
getUserMediaから得たストリームをvideoタグのsrcに流し込み...
#vote(○[0],△[0],×[0])
ページ名: