Bootstrap Modal - display live camera - Material Design for Bootstrap

Topic: Bootstrap Modal - display live camera

Janusz asked 4 years 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 4 years 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?

Add comment

Janusz answered 4 years ago

0 0 Best answer

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 4 years 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 4 years ago

Thanks a lot :-) Works perfectly

Grzegorz Bujański staff commented 4 years ago

You're welcome :)

Add comment

Janusz answered 4 years ago

0 0 Best answer

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.

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

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

Add comment

Janusz answered 4 years ago

0 0 Best answer

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>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

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

Janusz

40Support score
1Questions 3Answers

0Snippets likes 0Snippets