2013-03-14 5 views
10

でウェブカメラにアクセスする方法私は<code><video></code>によってHTML5へのアクセスが、純粋なJavaScriptでアクセスウェブカメラを必要とすることが可能である知っているJavaScriptを 経由でウェブカメラを開く必要はjavascriptの

は、誰かが私を助けたり、私にいくつかのアイデアを与えることができます ?

私はJavaScriptを使用してWebカメラにアクセスする必要があります。私の英語は申し訳ありませんが、私はGoogleの翻訳者を使用しています。

私はタグを使用することはできません

'<ビデオ>'

+2

私は混乱しています.... – jAndy

+2

ウェブカメラにはjavascriptなどでアクセスする必要がありますか? –

+4

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

答えて

22

私がコメントとして述べたように、私はあなたの表現について混乱しています。あなたは、 "HTML5"がウェブカメラにアクセスできることを知っていますが、あなたはそれを純粋なJavascriptで必要としています。

あなたが知っていない場合はまあ、HTML5リアルタイムコミュニケーションのために短いなどと呼ばのWebRTCを導入しました。その一部に、 navigator.getUserMedia() navigator.mediaDevices.getUserMedia(constraints)という新しいものも導入されました。つまり、ユーザーマシンにアクセスできるECMAscriptオブジェクトです。WebCamおよびマイクロフォンデバイス。

ご覧のとおり、ショー全体がHTML5ロールアウト/スペックに埋め込まれているため、ここでHTML5とJavascriptを分離することはできません。

さらに読書:

+0

ありがとう、完璧に働いた! –

2

this great tutorial from HTML5rocksがあります。

基本的に、getUserMediaはブラウザに許可を求めてからカメラを使用させます。

あなたはそれがまだひどくサポートされていること、またAPIが再び変更される可能性があることに注意する必要があります。特にインターネット経由でストリームを送信する場合は特に注意してください。

2

今これを行うためのいくつかのJavaScriptライブラリがあります。

+0

HTML5ベースではありません。どちらもFlashが必要です。 –

+0

@dystroy so? OPは答えにHTML5ベースのソリューションのみを含めるように指定していませんでした。彼はHTML5タグを持っていますが、彼の質問の文章ではHTML5タグは必須ではありません。 –

+2

私は短い答えでは明白ではないかもしれないことをあらかじめ整えていました。私は答えが悪いと言っていませんでした。これは、質問がはっきりしていなくても、私は「** html5 **にアクセスしてください。ただし**純粋なjavascript **にアクセスする必要があります」と読んでいます。 –

6

のみHTML5フォールバックの状況でフラッシュを使用していますJSライブラリです:コードから

https://github.com/jhuckaby/webcamjs

サンプル:

<script src="webcam.js"></script> 

<div id="my_camera" style="width:320px; height:240px;"></div> 
<div id="my_result"></div> 

<script language="JavaScript"> 
    Webcam.attach('#my_camera'); 

    function take_snapshot() { 
     Webcam.snap(function(data_uri) { 
      document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>'; 
     }); 
    } 
</script> 

<a href="javascript:void(take_snapshot())">Take Snapshot</a>