jQueryを使用したカメラプレビューの実装方法

2024-02-10 07:22 jQuery カメラプレビュー コード例

方法1: getUserMedia APIを使用する方法

$(document).ready(function() {
  // カメラプレビューを表示する要素を取得
  var videoElement = $('#camera-preview')[0];
  // getUserMediaを使用してカメラにアクセス
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function(stream) {
      // カメラのストリームをvideo要素に設定
      videoElement.srcObject = stream;
    })
    .catch(function(error) {
      console.error('カメラへのアクセスに失敗しました: ', error);
    });
});

方法2: Webcam.jsプラグインを使用する方法

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
</head>
<body>
  <div id="camera-preview"></div>
  <script>
    $(document).ready(function() {
      Webcam.set({
        width: 320,
        height: 240,
        dest_width: 640,
        dest_height: 480,
        image_format: 'jpeg',
        jpeg_quality: 90
      });
      Webcam.attach('#camera-preview');
    });
  </script>
</body>
</html>

以上のコード例では、方法1ではgetUserMedia APIを使用してカメラのストリームを取得し、方法2ではWebcam.jsプラグインを使用してカメラプレビューを表示します。

このように、jQueryを使用してカメラプレビューを実装する方法はいくつかあります。必要に応じて、上記のコード例を参考にして実装してください。