Webcam.js错误:网络摄像头还没有加载到模型中

Question

这是一个错误，每当我点击相机按钮拍摄第二张照片。

​

​

以下是HTML代码：

<div class="list-buttons">
    <button class="btn btn-default btn-camera btn-violet" data-toggle="modal" data-target="#camera-modal" data-backdrop="false">
        <i class="fa fa-camera"></i>
    </button>
</div>

<div class="take-picture">
  <div class="row all-pictures">
  </div>
</div>

<div class="modal fade" id="camera-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row">
                    <div class="col-xs-9">
                        <h5>Take a Picture</h5>
                    </div>
                    <div class="col-xs-3">
                        <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
            <div class="modal-body" style="padding:0px 0px 32px 0px;">
                <div id="my_camera"></div>
                <div class="list-buttons" style="display: flex; justify-content: space-between; margin: 20px;">
                <button class="btn btn-default btn-violet btn-take">
                    <i class="fa fa-camera-retro"></i>
                </button>
                <button class="btn btn-default btn-violet btn-take">
                    <i class="fa fa-camera-retro"></i>
                </button>
                </div>
            </div>
        </div>
    </div>
</div>

以下是JS代码：

$('#camera-modal').on('show.bs.modal', function (event) {
      Webcam.set({
        width: 800,
        height: 600,
        image_format: 'jpeg',
        jpeg_quality: 90
      });
      Webcam.set("constraints", {
        facingMode: "environment"
      });
      Webcam.attach( '#my_camera' );
      
      $('.btn-take').on('click', function() {
        Webcam.snap( function(data_uri) {
          console.log("test")
          $('.all-pictures').append(''+
            '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">'+
                '<img loading="lazy" src="'+data_uri+'" class="img-responsive">' +
            '</div>');
        } );
        $('[data-dismiss="modal"]').click();
      })
})
$('#camera-modal').on('hide.bs.modal', function (event) {
            console.log("MODAL CLOSED")
      Webcam.reset( '#my_camera' );
});

请检查一下这里的小提琴：https://jsfiddle.net/38qdco6j/4/

要复制错误，请执行以下操作：

1. 点击相机图标
2. 拍照，点击相机图标中的
3. 重复1和2

另一个是：

1. 点击相机图标
2. 关闭模态
3. 再次点击相机图标
4. 拍照，点击摄像机图标

G 221

请帮我修一下那个。谢谢!

Answer 1

注释掉执行重置操作的这一行代码

$('#camera-modal').on('hide.bs.modal', function (event) {
        console.log("MODAL CLOSED")
  Webcam.reset( '#my_camera' );