Я хочу отображать камеру во всплывающем окне. У меня есть структура для запуска модального окна и запуска камеры, но я не знаю, как отправить изображение с камеры в реальном времени в окно bootstrap. Все примеры, которые я видел, были с отображением внешних источников, таких как youtube или локально сохраненных файлов, но я не нашел примера, как отображать камеру.
<!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>