H5 비디오 태그가 카메라를 작동합니다.

이번에는 H5 비디오 태그 작동 카메라를 가져왔습니다. H5 비디오 태그 작동 카메라의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

비디오 태그를 이용한 HTML5의 카메라 선택 기능 구현에 대한 자세한 설명

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>

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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

django 컨트롤 및 매개 변수 사용에 대한 자세한 설명

jquery를 사용하여 모두 선택 및 단일 선택 반전 구현

jQuery 플러그인 FusionCharts를 사용하여 원형 차트 그리기

위 내용은 H5 비디오 태그가 카메라를 작동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!