HTML5 захват мобильной камеры

Question

Я хотел бы сделать мобильный захват камеры с помощью HTML5, как this

Я пытаюсь использовать ниже метод, но для этого нужно щелкнуть где-то для открытия камеры, что означает, что я не мог просмотреть изображение в жить.

<input id="fileselect" type="file" accept="image/*" capture="camera"> 

Я также нашел другой метод, который используется функция под названием «GetUserMedia», но он не поддерживает на IOS8.

Итак, как я могу реализовать захват мобильных камер с помощью HTML5?

Пожалуйста, помогите.

Answer 1

Попробуйте использовать изображение с образцом.

Answer 2

Ниже приведен простой пример использования HTML5 для размещения на экране средства просмотра видео, которое также позволяет снимать неподвижные изображения. Он был протестирован в Chrome версии 40.0.2214.93 или новее. Это было сделано в приложении MVC. Если вы замените разметку в вашем Index.cshtml этим кодом, он должен работать нормально. Единственной другой зависимостью является jquery.

@{ 
    ViewBag.Title = "Home Page"; 
} 

<style> 
    .videostream, #cssfilters-stream, #screenshot { 
     width: 307px; 
     height: 250px; 
    } 

    .videostream, #cssfilters-stream { 
     background: rgba(255,255,255,0.5); 
     border: 1px solid #ccc; 
    } 

    #screenshot { 
     vertical-align: top; 
    } 


</style> 


<div style="text-align:center;"> 
    @*<div style="text-align:center;">*@ 
    <div style="float:left;"> 
     <video id="basic-stream" class="videostream" autoplay></video> 
     <p><button id="capture-button">Capture video</button></p> 
    </div> 
    <div style="float:left; padding-left:20px;"> 
     <button id="SaveImageBtn" style="vertical-align:top; margin-top:100px; margin-right:20px;">Save -></button> 
     <canvas id="outputCanvas" class="videostream"></canvas>   
    </div> 
</div> 

<script src="~/Scripts/jquery-1.8.2.js"></script> 
<script src="~/Scripts/jquery-ui-1.8.24.js"></script> 

<script> 

    var video = document.querySelector('#basic-stream'); 
    var button = document.querySelector('#capture-button'); 
    var localMediaStream = null; 

    var canvas = document.querySelector('outputCanvas'); 

    $(document).ready(function() { 

     $("#capture-button").click(function() { 
      RunIt(); 
     }); 

     $("#SaveImageBtn").click(function() { 

      var cvs = $("#outputCanvas")[0]; 
      var ctx = cvs.getContext('2d'); 
      ctx.drawImage(video, 0, 0, 300, 150); 
      console.log("Got here 01"); 
     }); 


     var videoObj = {"video": true}; 
     var errBack = function (error) { alert("An error");}; 

     function RunIt() { 
      navigator.webkitGetUserMedia(
       { "video": true, "audio": true }, 
       function (s) { 
        video.src = 
         window.webkitURL.createObjectURL(s); 

        video.controls = true; 
        localMediaStream = s; 

        video.play(); 



       }, 
       function (e) { console.log(e); } 
      ); 
     }; 
    }); 

</script>