H5 video tag operates the camera

php中世界最好的语言
Release: 2018-04-19 17:04:14
Original
4090 people have browsed it

This time I bring you the H5 video tag operation camera. What are the precautions for H5 video tag operation camera? The following is a practical case, let’s take a look.

Detailed explanation of HTML5 using the video tag to implement the camera selection function

1. html

// jquery reference  
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
// 
  <input type="hidden" name="imgValue" id="imgValue" /> 
  <button id="btnOpen1" class="btn btn-default" type="button" >Open WebCam</button> 
  <select id="videoSource" ></select> 
  <p id="vdoOne" style="display:none"> 
    <video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video> 
    <canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas> 
    <canvas id="canvasUpload" style="display:none;" width=&#39;300&#39; height=&#39;224&#39;></canvas> 
    <button id="snap" class="btn btn-default" type="button">Snap Photo</button> 
  </p>
Copy after login

2.

javascript

<script>  
//// Elements for taking the snapshot 
    var canvasPreview = document.getElementById('canvasPreview'); 
    var canvasUpload = document.getElementById('canvasUpload'); 
    var contextPreview = canvasPreview.getContext('2d'); 
    var contextUpload = canvasUpload.getContext('2d'); 
    //#################### Video Source #######################3 
    var videoElement = document.querySelector('video'); 
    var videoSelect = document.querySelector('select#videoSource'); 
    navigator.mediaDevices.enumerateDevices() 
      .then(gotDevices).then(getStream).catch(handleError); 
    videoSelect.onchange = getStream;  
    function gotDevices(deviceInfos) { 
      for (var i = 0; i < deviceInfos.length; ++i) { 
        var deviceInfo = deviceInfos[i]; 
        var option = document.createElement('option'); 
        option.value = deviceInfo.deviceId; 
        if (deviceInfo.kind === 'videoinput') { 
          option.text = deviceInfo.label || 
            'camera ' + 
            (videoSelect.length + 1); 
          videoSelect.appendChild(option); 
        } else { 
          console.log('Found ome other kind of source/device: ', deviceInfo); 
        } 
      } 
    } 
    var _streamCopy = null; 
    function getStream() { 
      if (_streamCopy != null) { 
        try { 
          _streamCopy.stop(); // if this method doesn't exist, the catch will be executed. 
        } catch (e) { 
          _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream 
        } 
      }       
      var constraints = { 
        audio:false, 
        video: { 
          optional: [ 
            { 
              sourceId: videoSelect.value 
            } 
          ] 
        } 
      };       
      navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError); 
    } 
    function gotStream(stream) { 
      _streamCopy = stream; // make stream available to console 
      videoElement.srcObject = stream; 
    } 
    function handleError(error) { 
      alert(error.name + ": " + error.message); 
    } 
    //######################## End Video Source #################  
    // Get access to the camera! 
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
      navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { 
        videoElement.src = window.URL.createObjectURL(stream); 
        videoElement.play(); 
      }); 
    } else { 
      document.getElementById("pnlVideo1").style.display = "none"; 
    } 
    //// Trigger photo take 
    document.getElementById("snap").addEventListener("click", 
      function() { 
        contextPreview.drawImage(videoElement, 0, 0, 300, 224); 
        contextUpload.drawImage(videoElement, 0, 0, 300, 224); 
        document.getElementById("video").style.display = "none"; 
        document.getElementById("snap").style.display = "none"; 
        document.getElementById("canvasPreview").style.display = "block"; 
        var image = document.getElementById("canvasUpload").toDataURL("image/jpeg"); 
        image = image.replace('data:image/jpeg;base64,', ''); 
        $("#imgValue").val(image);    
        alert("image value :" + image); 
      });  
    //// Trigger photo take 
    document.getElementById("btnOpen1").addEventListener("click", 
      function() { 
        document.getElementById("vdoOne").style.display = "block"; 
        document.getElementById("video").style.display = "block"; 
        document.getElementById("snap").style.display = "block"; 
        document.getElementById("canvasPreview").style.display = "none"; 
      }); 
       
</script>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of django controls and parameter passing


jquery implements select all and inverse single selection


jQuery plug-in FusionCharts draws pie chart


The above is the detailed content of H5 video tag operates the camera. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template