jquery - 如何响应网络摄像头图像网络摄像头工作正常但没有响应

Question

如何使用响应式网络摄像头图像？我在javascript中使用webcam.js并定义了heightand 。width我正在尝试，但捕获的图像没有响应。

我的js代码：

function setwebcam()
{
  //$("#set_cam").hide();
  //$("#take_photo").show();
  Webcam.set({
    width: 320,
    height: 480,
    align:'center',
    image_format: 'jpeg',
    jpeg_quality: 100
  });
  Webcam.attach( '#my_camera' );        
}

function setcoord()
{    
  $('#cropbox').Jcrop({
    aspectRatio: 1,
    onSelect: updateCoords
  }); 
}

function updateCoords(c)
{
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
}

HTML 代码：

<div class="col-lg-12" id="cap_div" style="background-color:#f9f9f9; 
                                          box-shadow: 0 1px 4px #ccc;
                                          margin-bottom:95px;
                                          margin-top:20px;
                                          display:none;"   >
  <div class="row">
    <div class="col-sm-12">
      <div class="col-md-12"  id="my_camera">
      
      </div>    
    </div>
  </div>
  <h3 class="text-center" style="font-size:36px;  color:#000000;">
    Click on capture to get image
  </h3>
  
  <hr>
  <div class="row" style="z-index: 10; padding-bottom:  1em;">
    <p class="text-center">
      <a onClick="take_snapshot();" id="take_photo" class="browse_btn flat-button orange-flat-button btn btn-warning2 btn-lg" >
        <i class="fa fa-camera" aria-hidden="true"></i>
        Capture
      </a>
      <span class="visible-xs visible-sm"  id="oder" style="padding:10px 0;">
        - or -
      </span>
    </p>
  
      
  </div>
</div>

我该如何解决这个问题？

网络摄像头工作正常，但响应速度不佳。请帮忙。

标签： jqueryhtmlcsswebcam

Answer 1

你可以添加css断点

@media (max-width: 576px) {
    #my_camera video {
        max-width: 80%;
        max-height: 80%;
    }

    #results img {
        max-width: 80%;
        max-height: 80%;

    }
}