Bootstrap Modal - display live camera


Topic: Bootstrap Modal - display live camera

Janusz asked 2 months ago

I want to display camera in the pop-up window. I have structure to start the modal window and to start camera but do not know how to send the live camera view to the bootstrap window. All the examples I saw were with displaying external sources like youtube or locally stored files - but did not find the example how to display camera. So the point is - how to define the $('#livestream_scanner').on('shown.bs.modal', function (e) that it will direct the live camera view to the pop-up bootstrap window.

    <!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

 </head>

  <body>
   <div class="row">
    <div class="col-lg-6">
        <div class="input-group">
<br>
            <span class="input-group-btn"> 
                <button class="btn btn-default" type="button" data-toggle="modal" data-target="#livestream_scanner">scan
                    <i class="fa fa-barcode"></i>
                </button>
    </span>
        </div>  <!-- /input-group -->
    </div>  <!-- /.col-lg-6 -->
</div>  <!-- /.row -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<style>
    #interactive.viewport {position: relative; width: 100%; height: auto; overflow: hidden; text-align: center;}
    #interactive.viewport > canvas, #interactive.viewport > video {max-width: 100%; width: 100%;}
    canvas.drawing, canvas.drawingBuffer {position: absolute; left: 0; top: 0;}
</style>
<script type="text/javascript">

$(function() {

// Start the live stream when the modal opens
    $('#livestream_scanner').on('shown.bs.modal', function (e) {

// how to send camera to the pop-up window?
// the code just belowe starts camera but is not displaying it in the pop-up window

 var video = document.querySelector("#viewport.interactive");
 if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
 }


    });
});

</script>

<div class="modal" id="livestream_scanner">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Barcode Scanner</h4>
            </div>
            <div class="modal-body" style="position: static">
                <div id="interactive" class="viewport"></div>
                <div class="error"></div>
            </div>
            <div class="modal-footer">
                <label class="btn btn-default pull-left">
                    <i class="fa fa-camera"></i> Use camera app
                    <input type="file" accept="image/*;capture=camera" capture="camera" class="hidden" />
                </label>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

 </body>
</html> 

Grzegorz Bujański staff commented 2 months ago

Hi. I'm sorry but we don't have any example for the use of display camera inside modal. Are there any errors in the console after opening the modal?


Janusz answered 2 months ago

Thanks for replay. Probably I should use interactive.viewport instead of viewport.interactive: var video = document.querySelector("#interactive.viewport'); so after changing that I have no errors in console but still the camera is not displayed.


Grzegorz Bujański staff commented 2 months ago

I checked it again. If the class name has a dot, Jquery does not find it. When you try to use console.log (video) you will see that the return value is undefined. I made a snippet based on your code with working example of placing live video in a modal. Check it out: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/2109319


Janusz commented 2 months ago

Thanks a lot :-) Works perfectly


Grzegorz Bujański staff commented 2 months ago

You're welcome :)


Janusz answered 2 months ago

Hi, after opening the modal there is only a message in the console 'Something went wrong!' from: .catch(function (err0r) {<br> console.log("Something went wrong!"); But the camera icon in the browser address box indicating that the camera is working shows-up.


Grzegorz Bujański staff answered 2 months ago

I found a reason why it doesn't work. You are trying to catch an element here:

 var video = document.querySelector("#viewport.interactive");

But it looks like you have forgotten to add this element in your HTML :)


Janusz answered 2 months ago

And after some more investigation I was missing video element definition in the interactive div. Adding it solved the issue:

<div id="interactive" class="viewport">
<video autoplay="true" id="videoElement">
</div>

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Android / PC
  • Browser: C hrome
  • OS: Android / Windows
  • Provided sample code: No
  • Provided link: No