Exemplo de Abertura da Câmera e Captura de Tela com JS

Let's get straight to the point, a complete step of opening the camera with JS and uploading the screenshot to the backend

1. The opening of the camera mainly uses the getUserMedia method, and then the obtained media stream is placed in the video tag

2. The capture of the image mainly uses canvas drawing, using the drawImage method to draw the content of video to canvas

3. Upload the captured content to the server and convert the content of canvas to base64The format is uploaded, and the backend (PHP) uses file_put_contents to convert it to an image

It should be noted that when using the camera in browsers other than chrome, there may be some problems, which may also be old problems, so the following code is mainly based on chrome

For example, the error reported in the latest version of FireFox, for some reason

1. Open the camera

getUserMedia has two versions, new and old, it is recommended to use the new version

The old version is located under the navigator object, which varies depending on the browser

 // 获取媒体方法（旧方法）
  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();
    }, function(err) {
      console.log(err);
    });
  }

The first parameter indicates whether to use video (video) or audio (audio)

The second parameter indicates the callback after the call succeeds, which includes one parameter (MediaStream). In the old version, you could directly call MediaStream.stop() to close the camera, but in the new version, it has been deprecated. You need to use MediaStream.getTracks()[index].stop() to close the corresponding Track

The third parameter indicates the callback after the call fails

The new version is located under the navigator.mediaDevices object

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

Similar to the old version, but this method returns a Promise object, which can be used with then and catch to represent the callback for success and failure

It should be noted that the Tracks array returned by MediaStream.getTracks() is sorted in reverse order according to the first parameter

por exemplo, agora definimos
  video: true,
  audio: true
}

{1Para fechar a câmera, é necessário chamar MediaStream.getTracks()[

].stop();

Da mesma forma, 0 corresponde ao track do audio

Use createObjectURL para escrever o MediaStream no tag video, permitindo armazenar dados de fluxo de mídia em tempo real (também permitindo visualização em tempo real)

　　A versão antiga do objeto webkitURL não é mais suportada, é necessário usar o objeto URL200" height="150"></<video width="
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">Capturar imagem</button>
    <button id="close">Fechar câmera</button>
    <button id="upload">Upload de imagem</button>
  </p>
  <img id="uploaded" width="200" height="150" />

2. Capturar imagem

só precisa escrever o conteúdo

 // Capturar imagem
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);

3. Fechar câmera

 // Fechar a câmera
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);

4. Imagem capturada

canvas.toDataURL('image/png')

// Upload da imagem capturada
  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);

aqui, o backend (PHP) converte o conteúdo obtido em um arquivo de imagem para salvar

É importante notar que para base64remova o campo de cabeçalho antes de salvar, senão parece que a imagem está corrompida e não pode ser aberta

 <?php
  
  $snapData = str_replace('data:image/png;base64
  // $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' => 'Upload de arquivo falhou'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'Upload de arquivo bem-sucedido', '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' ? 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();
    }, function(err) {
      console.log(err);
    });
  }
  // Capturar imagem
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);
  // Fechar a câmera
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // Upload da imagem capturada
  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>

Isso é tudo o que há no artigo, esperamos que ajude no seu aprendizado e que você apoie o tutorial Yell.

Declaração: o conteúdo deste artigo é extraído da internet, pertence ao respectivo proprietário, fornecido voluntariamente pelos usuários da internet e carregado por eles mesmos. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)

Tutorial Básico