Bootstrap Modal - 显示实时摄像头答案

【问题标题】：Bootstrap Modal - display live cameraBootstrap Modal - 显示实时摄像头
【发布时间】：2020-06-18 11:26:26
【问题描述】：

我想在弹出窗口中显示相机。我有启动模态窗口和启动相机的结构，但不知道如何将实时相机视图发送到引导窗口。我看到的所有示例都是显示外部资源，例如 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">&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>

【问题讨论】：

看起来你的选择器弄错了。 id 是interactive，类是viewport，但你的选择器是#viewport.interactive。
感谢您的回复 - #interactive.viewport 的另一种方式也不起作用 - 可能我遗漏了尚未定义的内容 - 使相机流正确分配并显示在弹出窗口中。

标签： javascript html camera modal-dialog popup

【解决方案1】：

交互式视口中似乎缺少视频定义：

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

在要使用的脚本中：

var video = document.querySelector("#videoElement");

【讨论】：