English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

JSでカメラを開き、スクリーンショットをアップロードする例

本題に入りましょう、JSでカメラを開き、スクリーンショットをアップロードするまでの完全な手順

1. カメラを開く際には主にgetUserMediaメソッドが使用され、取得したメディアストリームをvideoタグに設定します

2. 画像を取り出す際には主にcanvasの描画が使用され、drawImageメソッドを使用してvideoの内容をcanvasに描画します

3. 取り出した内容をサーバーにアップロードし、canvasの内容をbaseに変換します64フォーマットをアップロードし、バックエンド（PHP）がfile_put_contentsを使用して画像に変換します

注意が必要なのは、Chrome以外のブラウザではカメラを使用するときに少しずつ問題が発生することがあります。これは古い問題かもしれませんので、以下のコードは主にChromeの使用に基づいています

例えば、最新版のFirefoxでのエラーレポート、なぜかわかりません

1. カメラを開く

getUserMediaには新しいバージョンと古いバージョンの2種類がありますが、新しいバージョンを使用することをお勧めします

旧バージョンはnavigatorオブジェクトの下に位置しており、ブラウザによって異なります

 // 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; 
if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    
      console.log(err);
    });
  }

第1引数はビデオ（video）またはオーディオ（audio）を使用する必要があることを示します

第2引数は呼び出し成功後のリターンコールバックを示し、MediaStreamの引数が含まれています（MediaStream）。旧バージョンではMediaStream.stop()を呼び出してカメラを閉じることができましたが、新しいバージョンでは廃止されており、MediaStream.getTracks()[index].stop()を使用して対応するTrackを閉じる必要があります

第3引数は呼び出し失敗後のリターンコールバックを示します

新しいバージョンはnavigator.mediaDevicesオブジェクトの下に位置しています

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function'63; stream : stream.getTracks()[1]);
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  }

旧版と同様ですが、このメソッドはPromiseオブジェクトを返し、成功と失敗のリターンコールバックとしてthenとcatchを使用できます

需要注意的是、MediaStream.getTracks() 返回的Tracks配列は最初の引数に逆順に並んでいます

}

例えば、現在定義されている
  video: true,
  audio: true
}

{1カメラを閉じるには、MediaStream.getTracks()[

].stop();

同様に、0はaudioのtrackに対応しています。

createObjectURLを使用してMediaStreamをvideoタグに書き込むことで、リアルタイムのメディアストリームデータを保存できます（画面をリアルタイムで確認することもできます）。

　　旧バージョンではwebkitURLオブジェクトはサポートされていません。URLオブジェクトを使用する必要があります。200" height="150"></<video width="
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">画像をキャプチャー</button>
    <button id="close">カメラを閉じる</button>
    <button id="upload">画像をアップロード</button>
  </p>
  <img id="uploaded" width="200" height="150" />

2. 画像をキャプチャーする

内容を書き込むだけで良い

 // 画像を截取
  
     200, 150);
  }, false);

3. カメラを閉じる

 // カメラを閉じる
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);

4. 上传された画像

canvas.toDataURL('image/png')

// アップロードされた画像を截取
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false);

ここではバックエンド（PHP）は取得した内容を画像ファイルとして保存します。

必要に注意して、base64のヘッダーフィールドを取り除いて保存する必要があります。それしないと、画像が損傷して開けられないようです。

 <?php
  $snapData = $_POST['snapData'];
  $snapData = str_replace('data:image/png;base64, '', $snapData);
  // $snapData = str_replace(' ', '+', $snapData);
  $img = base64_decode($snapData);
  $uploadDir = 'upload/';
  $fileName = date('YmdHis', time()) . uniqid();
  if (!(file_put_contents($uploadDir . $fileName, $img))) {
    echo json_encode(array('code' => 500, 'msg' => 'ファイルアップロード失敗'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'ファイルアップロード成功', 'path' => $uploadDir . $fileName));
  }
?>

完整JS代码

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function $(elem) {
    return document.querySelector(elem);
  }
  // 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
  var canvas = $('canvas'),
    context = canvas.getContext('2d'),
    video = $('video'),
    snap = $('#snap'),
    close = $('#close'),
    upload = $('#upload'),
    uploaded = $('#uploaded'),
    mediaStreamTrack;
  // 获取媒体方法（新方法）
  // 使用新方法打开摄像头
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function'63; stream : stream.getTracks()[1]);
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  }
  // 使用旧方法打开摄像头
  else if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    
      console.log(err);
    });
  }
  // 画像を截取
  
     200, 150);
  }, false);
  // カメラを閉じる
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // アップロードされた画像を截取
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false);
  </script>

これで本文のすべての内容が終わりです。皆様の学習に役立つことを願っています。また、呐喊ガイドを多くの皆様にサポートしていただけると嬉しいです。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容がある場合は、メールを以下のアドレスに送信してください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。)

基礎教程
おすすめ