Topic: Bootstrap Modal - display live camera
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">×</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>
Janusz answered 5 years 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 5 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 5 years ago
Thanks a lot :-) Works perfectly
Grzegorz Bujański staff commented 5 years ago
You're welcome :)
Janusz answered 5 years 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 5 years 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 5 years 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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Grzegorz Bujański staff commented 5 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?