2

JsでwebCamを開く方法を知りたいだけですが、APIや他のライブラリへのリンクは必要ありません。常に独自のコードを作成していますが、行く方法が見つからないためです.1行または2行のコードが欲しいだけですjs を使用してウェブカメラを開く方法について説明し、どのブラウザで動作するかについて説明します。

4

4 に答える 4

15

ScriptCamのようなサードパーティのライブラリを使用することをお勧めしますが、独自のコードを書きたいと宣言したので、新しいユーザー メディア API の使用について説明します。

これは、W3C Working Draft HTML Media Capture withで導入されましたgetUserMedia()。次のブラウザは実験的にサポートしています。

  • クロム
  • オペラ

Chrome 18 以降では、サイトにアクセスして API を有効にすることができますabout:flags。

Chrome の about:flags ページで getUserMedia() を有効にします。

Opera では、実験的なAndroid またはデスクトップ ビルドのいずれかをダウンロードする必要があります。

videoHTML では、 Elementを使用する必要があります。

<video id="basic-stream" class="videostream" autoplay=""></video>

まず、権限を設定する必要があります。

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

Chrome と Opera で動作するコードが必要な場合は、次のコード サンプルで動作するはずです。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

var video = document.querySelector('video');

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    if (navigator.webkitGetUserMedia) {
      video.src = window.webkitURL.createObjectURL(stream);
    } else {
      video.src = stream; // Opera
    }
  }, onFailSoHard);
} else {
  video.src = 'somevideo.webm'; // fallback.
}

API が利用可能かどうかは、次の方法で確認できます。

function hasGetUserMedia() {
   // Note: Opera builds are unprefixed.
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

詳細については、チュートリアルの HTML でオーディオとビデオをキャプチャするを参照してください。

構文の問題は、ベンダー プレフィックスが原因で発生する可能性があるため、注意してください。

于 2012-07-02T18:32:57.967 に答える
1

Opera Mobile 12 が必要です。webkit プレフィックスを追加すると、Chrome 21 でも動作するはずです。

if(navigator.getUserMedia) {
  navigator.getUserMedia('video', successCallback, errorCallback);
}

ドキュメントを参照してください。

于 2012-07-02T12:14:56.180 に答える
1

これはいわゆるHTML5 Media Capture APIです。一部のモバイル ブラウザのサンプル コードはこちらにあります。

于 2012-07-02T12:18:56.630 に答える