"Webcam.js 错误：尚未在模式上加载网络摄像头"

Question

Here's the error whenever I clicked the camera button to take the second picture.

Here's the HTML code:

<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>

Here's the JS code:

$('#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' );
});

Please check this fiddle right here: https://jsfiddle.net/38qdco6j/4/

To replicated the error:

1. Click the camera icon
2. Take a picture, click the camera icon inside the modal
3. Repeat 1 and 2

Another one is:

1. Click the camera icon
2. Close the modal
3. Click again the camera icon
4. Take a picture, click the camera icon inside the modal

Please help how to fix that one. Thank you!

Answer 1

Comment out this line of code which does the reset

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