html - 视频元素未显示在页面上-6ren

html - 视频元素未显示在页面上

转载作者：行者123 更新时间：2023-11-28 14:26:44

最近我使用 app.js 作为框架来设计我的网络应用程序的布局。该网络应用程序将从网络摄像头流式传输并显示在网页 html 视频元素上。

网络摄像头正在运行，但视频没有显示在我的网页上，实际上整个视频元素就像隐藏在某些东西下面一样。

谁能指出我的错误在哪里？一开始我以为是关于元素的z-index的问题，但是我无法解决，所以可能不是这样。

我将在下面附上我的 html 和 Css 文件的片段。

提前致谢

HTML:

<!DOCTYPE html>
<html>

<head>
<title>PasarOnline</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="../appjsFile/app.min.css">


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="manifest" href="../manifest.json">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PasarOnline">
<link rel="apple-touch-icon" href="../images/icons/icon-152x152.png">
<meta name="msapplication-TileImage" content="../images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">

    <style>
    .navbar {
    background-color: #000;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3000;
    }
    /* Style the links inside the navigation bar */

    .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    }
    /* Change the color of links on hover */

    .navbar a:hover {
    background-color: #ddd;
    color: black;
    }

    .navbar a.active {
    background-color: #4CAF50;
    color: white;
    }


    .navbar .icon {
    display: none;
    }

    .form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 1001;
    }

    .form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
    }
    /* Full-width input fields */

    .form-container input[type=text],
    input[type=number] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 10px 0;
    border: none;
    background: #f1f1f1;
    }

    .form-container input[type=text]:focus {
background-color: #ddd;
outline: none;
}

.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 40%;
margin-left: 10px;
margin-bottom: 10px;
opacity: 0.8;
}

.form-container .cancel {
background-color: red;
}

.centerVideo {
margin: 0 auto;
display: block;
position: relative;
width: 350px;
margin-top: 20px;
}

b {
margin: 0 auto;
}

hr {
 margin-top: 32px;
}

.bottom1 {
margin-bottom: 16px;
margin: 0 auto;
}

.card {
        /* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
 }

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
padding: 2px 16px;
}

.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.wrap {
right: 0;
width: 0 auto;
left: 0;
margin: 16px auto;
}
    /* select starting stylings ------------------------------*/

.select {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
position: relative;
width: 350px;
margin-top: 20px;
}

.select-text {
position: relative;
font-family: inherit;
background-color: transparent;
width: 350px;
padding: 10px 10px 10px 0;
font-size: 18px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
    /* Remove focus */

    .select-text:focus {
        outline: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0);
    }
    /* Use custom arrow */

    .select .select-text {
        appearance: none;
        -webkit-appearance: none
    }

    .select:after {
        position: absolute;
        top: 18px;
        right: 10px;
        /* Styling the down arrow */
        width: 0;
        height: 0;
        padding: 0;
        content: '';
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid rgba(0, 0, 0, 0.12);
        pointer-events: none;
    }
    /* LABEL ======================================= */

    .select-label {
        color: rgba(0, 0, 0, 0.26);
        font-size: 18px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 10px;
        transition: 0.2s ease all;
    }
    /* active state */

    .select-text:focus~.select-label,
    .select-text:valid~.select-label {
        color: #228B22;
        top: -5px;
        transition: 0.2s ease all;
        font-size: 14px;
    }
    /* BOTTOM BARS ================================= */

    .select-bar {
        position: relative;
        display: block;
        width: 350px;
    }

    .select-bar:before,
    .select-bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #228B22;
        transition: 0.2s ease all;
    }

    .select-bar:before {
        left: 50%;
    }

    .select-bar:after {
        right: 50%;
    }
    /* active state */

    .select-text:focus~.select-bar:before,
    .select-text:focus~.select-bar:after {
        width: 50%;
    }
    /* HIGHLIGHTER ================================== */

    .select-highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }

    .center {
        margin: 0 auto;
    }


</style>
</head>

<body>
<div class="app-page" data-page="addItemPage">
    <div class="app-topbar">
        <div class="app-title">Add Item Page</div>
    </div>
    <div class="app-content">
        <div class="app-section">
        <h1>Scan Item Barcode:</h1>

            <div class="card" >
            <video muted playsinline id="qr-video" width="60%" height="60%" class="centerVideo">Video not showing</video>
            </div>

                  <div class="select">
                <select id="inversion-mode-select" class="select-text">
                    <option value="original" selected="original">Scan original</option>
                    <option value="invert">Scan with inverted colors</option>
                    <option value="both">Scan both</option>
                </select>
                <label class="select-label"><b>Select Barcode Type:</b></label>
                <span class="select-highlight"></span>
                <span class="select-bar"></span>
                <br>
            </div>




        </div>

    </div>

</div>

    <div class="app-page" data-page="deleteItemPage">
        <div class="app-topbar">
            <div class="app-button left" data-back data-autotitle></div>
            <div class="app-title">Delete Item</div>
        </div>
        <div class="app-content">
            Page 2 is delete item
        </div>
    </div>

    <div class="app-page" data-page="listItemPage">
        <div class="app-topbar">
            <div class="app-button left" data-back data-autotitle></div>
            <div class="app-title">List Item</div>
        </div>
        <div class="app-content">
            Page 3 is list item
        </div>
    </div>


        <div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Add Item</h1>

    <b>Serial</b>
    <input type="number" placeholder="Enter Serial Number" name="vSerial" id="vSerialID" required>

    <b>Veggie Name</b>
    <input type="text" placeholder="Enter Veggie Name" name="vName" required>

    <b>Weight</b>
    <input type="number" placeholder="Enter Weight(KG)" name="vWeight" required>

    <div align="center">
    <button type="submit" class="btn">Add Item</button>
    <span><button type="button" class="btn cancel" id="closeBut">Close</button></span>
    </div>
  </form>
</div>


    <div class="navbar" id="bottomNavbar">
        <a href="#addItem" id="addItemBut">Add Item</a>
        <a href="#deleteItem" id="deleteItemBut">Delete Item</a>
        <a href="#listItem" id="listItemBut">List Item</a>
    </div>

    <script src="../appjsFile/zepto.js"></script>
    <script src="../appjsFile/app.min.js"></script>
    <script type="module">


        import QrScanner from "../qr-scanner.min.js";
        QrScanner.WORKER_PATH = '../qr-scanner-worker.min.js';
        const video = document.getElementById('qr-video');
        // const camHasCamera = document.getElementById('cam-has-camera');
        const camQrResult = document.getElementById('cam-qr-result');
        const closeFormButton = document.getElementById('closeBut');

        const deleteBut = document.getElementById("deleteItemBut");
        const addBut = document.getElementById("addItemBut");
        const listBut = document.getElementById("listItemBut");


            const scanner = new QrScanner(video, result => setResult(camQrResult, result));
            scanner.start();

        App.controller('addItemPage', function(page) {
            // put stuff here


        });

        App.controller('deleteItemPage', function(page) {
            // put stuff here

        });

        App.controller('listItemPage', function(page) {
            // put stuff here


        });




        deleteBut.addEventListener("click", function() {


            App.load('deleteItemPage');


        });

        addBut.addEventListener("click", function() {
            App.load('addItemPage');

        });

        listBut.addEventListener("click", function() {

            App.load('listItemPage');

        });







        closeFormButton.addEventListener("click",closeForm);

        // QRManualBut.addEventListener('click',function(){

        //     document.getElementById("myForm").style.display = "block";


        // });





      //########## check result #############//

        function setResult(label, result) {

                openForm(result);

                label.textContent = result;
                label.style.color = 'teal';
                clearTimeout(label.highlightTimeout);
                label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);


        }



        // ####### Web Cam Scanning #######//



        document.getElementById('inversion-mode-select').addEventListener('change', event => {
            scanner.setInversionMode(event.target.value);
        });


        //################pop up form ###########//

        function openForm(serialNum) {


            document.getElementById("myForm").style.display = "block";


            document.getElementById("vSerialID").value = serialNum;


        }

        function closeForm() {
          document.getElementById("myForm").style.display = "none";
        }


        //##########install pop up in homescreen########//



        // if (location.protocol != 'https:')
        // {
        //  location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
        // }


        try {
            App.restore();
        } catch (err) {
            App.load('addItemPage');
        }
    </script>


</body>

</html>

app.min.css:

    html,
    body,
    div,
    form,
    p,
    ul,
    li,
    span,
    label,
    img {
        margin: 0;
        padding: 0;
        outline: 0
    }

    html,
    body {
        height: 100%;
        width: 100%
    }

    body {
        position: relative;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        overflow: hidden
    }

    .app-android {
        font-family: "Roboto", sans-serif
    }

    .app-no-scrollbar ::-webkit-scrollbar {
        height: 0 !important;
        width: 0 !important
    }

    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        tap-highlight-color: rgba(0, 0, 0, 0) !important
    }

    .clear {
        clear: both
    }

    .app-android .app-ios-only,
    .app-ios .app-android-only {
        display: none
    }

    .app-clickblocker {
        z-index: 9000;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #FFF;
        opacity: 0
    }

    .app-page {
        display: none;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden
    }

    .app-loaded .app-page {
        display: block
    }

    .app-ios-7 .app-page,
    .app-ios-8 .app-page {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.2)
    }

    .app-topbar {
        z-index: 3000;
        position: relative;
        height: 44px;
        width: 100%;
        background-color: #000;
        color: #FFF;
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15)
    }

    .app-android .app-topbar {
        height: 56px;
        -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3)
    }

    .app-topbar .app-button {
        position: absolute;
        bottom: 0;
        padding: 0 16px;
        height: 100%;
        line-height: 44px
    }

    .app-android .app-topbar .app-button {
        line-height: 56px
    }

    .app-topbar .app-button.left {
        left: 0
    }

    .app-topbar .app-button.right {
        right: 0
    }

    .app-topbar .app-title {
        margin: 0 auto;
        height: 100%;
        width: 100%;
        line-height: 44px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .app-android .app-topbar .app-title {
        line-height: 56px
    }

    .app-ios-statusbar .app-topbar {
        padding-top: 20px
    }

    .app-android-statusbar .app-topbar {
        padding-top: 24px
    }

    .app-android-statusbar .app-topbar:before {
        position: absolute;
        top: 0;
        height: 24px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        content: ""
    }

    .app-ios-statusbar .app-topbar .app-button {
        height: 44px
    }

    .app-android-statusbar .app-topbar .app-button {
        height: 56px
    }

    .app-content {
        z-index: 2000;
        position: relative;
        background-color: #FFF;
        overflow: auto;
        -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.2)
    }

    .app-android-2 .app-content {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .app-scrollhack>* {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    .app-section {
        position: relative;
        margin: 8px;
        border: 1px solid #AAA
    }

    .app-list {
        list-style: none
    }

    .app-list>li,
    .app-list>li.app-button {
        padding-left: 20px;
        padding-right: 8px;
        height: 43px;
        border-bottom: 1px solid #AAA;
        line-height: 43px;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .app-android .app-list>li,
    .app-android .app-list>li.app-button {
        padding-top: 2px;
        padding-bottom: 2px
    }

    .app-section .app-list>li:last-child,
    .app-section .app-list>li.app-button:last-child {
        border-bottom: 0
    }

    .app-list>label {
        display: block;
        padding-left: 12px;
        height: 24px;
        background-color: #000;
        color: #FFF;
        line-height: 24px
    }

    .app-list>li+label {
        margin-top: -1px
    }

    .app-content .app-button {
        margin: 0 auto;
        height: 40px;
        border-bottom: 1px solid #AAA;
        line-height: 40px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .app-button:last-child {
        border-bottom: 0
    }

    .app-content .app-button.green {
        background-color: #7F7
    }

    .app-content .app-button.red {
        background-color: #F77
    }

    .app-content .app-button.blue {
        background-color: #77F
    }


    .app-topbar.teal {
        background-color: #2B9;
        color: #f3f4f5
    }

    .app-topbar.green {
        background-color: #3C7;
        color: #f3f4f5
    }

    .app-topbar.yellow {
        background-color: #EC1;
        color: #f3f4f5
    }

    .app-topbar.orange {
        background-color: #E82;
        color: #f3f4f5
    }

    .app-topbar.red {
        background-color: #dd4539;
        color: #f3f4f5
    }

    .app-topbar.blue {
        background-color: #4486f0;
        color: #f3f4f5
    }

    .app-topbar.dark-blue {
        background-color: #345;
        color: #f3f4f5
    }

    .app-topbar .app-title {
        font-size: 17px;
        font-weight: 500
    }

    .app-android .app-topbar .app-title {
        float: left;
        padding-left: 15px;
        padding-right: 8px;
        width: auto;
        font-size: 19px;
        font-weight: 700;
        text-align: left
    }

    .app-android .app-topbar .app-button.left~.app-title {
        padding-left: 60px
    }

    .app-topbar .app-button {
        font-weight: 300;
        -webkit-transition: opacity .25s ease-out;
        transition: opacity .25s ease-out
    }

    .app-android .app-topbar .app-button {
        padding: 0 13px;
        font-weight: 400;
        -webkit-transition: background-color .25s ease-out;
        transition: background-color .25s ease-out
    }

    .app-topbar .app-button.active {
        opacity: .65
    }

    .app-android .app-topbar .app-button.active {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.2)
    }

    .app-topbar .app-button.active,
    .app-android .app-topbar .app-button.active,
    .app-android-2 .app-topbar .app-button,
    .app-android-4 .app-topbar .app-button {
        -webkit-transition: none;
        transition: none
    }

    .app-topbar .app-button[data-back].left {
        padding: 15px 0 15px 27px;
        height: 14px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAoCAYAAADkDTpVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUQxQ0FCN0VGMjJGMTFFMjg0REFDNDBBRUVBRjJBNDkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUQxQ0FCN0RGMjJGMTFFMjg0REFDNDBBRUVBRjJBNDkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iNTNBQzg4QkE2OTc3M0MxNDg4ODc1M0VDNzc3ODcwMDUiIHN0UmVmOmRvY3VtZW50SUQ9IjUzQUM4OEJBNjk3NzNDMTQ4ODg3NTNFQzc3Nzg3MDA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dT5F6gAAAcNJREFUeNqslz8sA1Ecx+9UKi1ispkwMAgbs5XYTCJhlLB3uxrETsLGUgMbutaqJg0Jg5pqqqVCm1TaPt+X3ONp7n53fb/3kk/Su8v7fq/v3u/Pc4UQjsWRAQNg9/eONLDEtvgbnrpvS3wDdMT/4dkyWAUtETy8PuaaL4EcSIQ8T3HefBHURfg4Bq6p+Dz4JMTPQML0G8yCGiF+BZKmu2gKVAnxG5DW5/QiPg4qhPgdGOmeF1d8DJQJ8UcwGjQ3jric+ESIl/0XcEwM5F++J8TfwCSlQYkPgltC/B3MRK1A2IMUKBDiH34sOCYGcg9fE+INP4odEwMZfeeE+DdY6SV29AsXnBDibbDWa+TrFweCHlsmeUv92IsQz5hm3bj1wLxwx1yiDneJ1Ec+JUxa3I+stukFYdLkbFM90PKESZ0TaIp0RKqocVKFYggUCZMqJ9np6bpEmFQ46VovOM+EyQun4Ogl85UweeCUTMVERNEvcoq+YjqibSlw2hbFXETjdclpvBQL4IswyXFaR735bRAmR5zmV7Hs56ewsc89H+TBOmiHPG/aOkJtBhyhsjbPaJKdbnFJv8Uj7CEYBkmQVTd/BBgAAQDbZCXVLesAAAAASUVORK5CYII=);
        background-repeat: no-repeat;
        -webkit-background-size: 12px 20px;
        background-size: 12px 20px;
        background-position: 8px center;
        line-height: 14px
    }

    .app-android .app-topbar .app-button[data-back].left {
        padding: 0 16px;
        height: 56px;
        width: 24px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjcyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj43MjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxkYzpzdWJqZWN0PgogICAgICAgICAgICA8cmRmOkJhZy8+CiAgICAgICAgIDwvZGM6c3ViamVjdD4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTU6MDI6MTMgMjI6MDI6MzU8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPlBpeGVsbWF0b3IgMy4zLjE8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+ChTTdgYAAAF3SURBVHgB7dtBCsIwFIRh69o7eAhdiQdw53U9gFsP4dqt4LK+QANF6Dgp1FbyCyXCG2nz8aKQ1tWKFwIIIIAAAggggAACCCCAQNUCbdte0lE1wtDkO5xnjOkAqQ/1gQOSgbMYpHX/Yn/9vltKR3HeXWS2oj55aTYgA+cVsz83TXOfXGFpJxj4zsnLKo2POA5Lu+6fXA84ghkccISAKNE54AgBUaJzwBECokTngCMERInOAUcIiBKdA44QEKUaOqcR85elhBMBtdklPz9XMfaXNiXnHrVh9q84JTA5WwxUE05CKgbKsrWMxUCxhk+BcwVICNSGJCh0qYafeS1gVEECyRAwInQSSIaAEaGTQDIEjAidBJIhYEToJJAMASNCJ4FkCBgROgkkQ8CI/Esnjb6rYRh8jSSkCKk7I+lJ1/2cT7oWb7l+nXVBwNiZvM2JUzCVaaMDy43/a/TZP5DA6ePk9x0SOBmEEQEEEEAAAQQQQAABBBCoVOANecdGRmb5/CMAAAAASUVORK5CYII=);
        -webkit-background-size: 24px 24px;
        background-size: 24px 24px;
        background-position: center;
        color: transparent
    }

    .app-android .app-topbar>:last-child:after {
        content: "";
        clear: both
    }

    .app-page,
    .app-content {
        background-color: #efeff4
    }

    .app-section,
    .app-list>li,
    .app-list>li.app-button,
    .app-content .app-button,
    .app-input {
        border: 0
    }

    .app-section {
        margin: 16px;
        padding: 8px;
        background: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 6px;
        border-radius: 6px
    }

    .app-ios-7 .app-section,
    .app-ios-8 .app-section {
        border-bottom: 0
    }

    .app-section.app-button {
        margin: 16px;
        padding: 0
    }

    p.app-section {
        padding: 12px 16px;
        color: #665
    }

    .app-content .app-section>* {
        margin: 8px 0 0;
        -webkit-border-radius: 4px;
        border-radius: 4px
    }

    .app-content .app-section>:first-child {
        margin-top: 0
    }

    .app-list>label {
        height: 28px;
        background-color: #d5e5e6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #778;
        font-size: 14px;
        font-weight: 600;
        line-height: 28px
    }

    .app-android .app-list>label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase
    }

    .app-list>li {
        background-color: #FFF;
        color: #444
    }

    .app-list>li,
    .app-list>li.app-button {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .app-android .app-list>li,
    .app-android .app-list>li.app-button {
        padding-top: 0;
        padding-bottom: 0;
        height: 47px;
        line-height: 47px
    }

    .app-list>li.app-button.active {
        border-top: 1px solid rgba(0, 0, 0, 0.0)
    }

    .app-list>li:first-child,
    .app-list>li.app-button:first-child,
    .app-list>label+li,
    .app-list>label+li.app-button,
    .app-list>label+li.app-button.active,
    .app-list>li.app-button.active+li,
    .app-list>li.app-button.active+li.app-button {
        border-top-color: transparent
    }



    .app-input[type="search"].no-icon,
    .app-android .app-input[type="search"].no-icon-android,
    .app-ios .app-input[type="search"].no-icon-ios {
        padding-left: 12px;
        background-image: none
    }

最佳答案

您可以查看有关 accessing the webcam in html5 的博文.

这是基本的代码:

HTML 文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
</style>
</head>

<body>
<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>

</script>
</body>
</html>

JS文件:

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

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

尝试使用 getUserMedia 实现以下内容方法。我们告诉 getUserMedia 的只是指定一个约束对象，其视频属性设置为 true。这意味着默认设置将用于捕获视觉效果并显示它们。

关于html - 视频元素未显示在页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54644775/

文章推荐： html - IE7 嵌套绝对定位

内相对定位

问题

文章推荐： swift - NSFetchedResultsController 部分按月

文章推荐： CSS列高不继承

文章推荐： javascript - 无法设置矩阵单元格值

javascript - 在父选项卡(页面)上显示叠加层，直到打开其所有子选项卡(页面)
假设我有父页面。当我单击“打印”时，会打开一个新选项卡(页面)以进行打印预览。我想要的是，当我单击“打印”时，父选项卡(页面)上应显示覆盖层，以停止进一步的工作，直到子选项卡关闭。 Because
javascript - 如何从 HTTPS 页面 POST 数据到 HTTP 页面
我知道这是不可能的，但我想我还是会问这个问题。我有一个 HTTPS 页面，并且正在动态创建一个表单。我想将表单发布到 HTTP 页面。在浏览器不弹出警告的情况下这可能吗？当我在 IE8 上执行此操作
javascript - 将 .aspx 页面 html 渲染/调用到另一个 .aspx 页面
在我的应用程序中，我实现了ajax 4.0客户端模板目前我的模板位于同一个.aspx页面上。 (例如 Main.aspx) 但我想将它们外部化。(即所有 HTML 都会放在另一个页面上) 为此，我使
javascript - 锁定/卡住导航栏/整个 html 页面，直到加载其他 html 页面
我目前正在构建自己的网络应用程序。在此应用程序的标题中有一个导航栏。我将相同的导航栏添加到我的所有 html 页面，以便在页面之间导航时保持可见，并将导航元素设置为事件到我现在所在的页面。我的
iis-7 - Windows 身份验证不适用于经典 ASP 页面(但适用于同一站点中的 ASP.Net 页面)
我们有一个在集成管道下运行的 IIS7 Intranet 站点，该管道主要是 ASP.Net，带有一些传统的经典 ASP 页面。该站点允许匿名访问大多数区域，但使用 Windows 身份验证来保护某些
c# - 如何将长 HTML 文件拆分为单独的相互链接的页面，例如页面 1、页面 2、页面 3
有一个要求，我需要根据 div 标签的高度超过 700 像素的条件将大型 HTML 页面拆分为多个页面。我还可以根据字数拆分页面。下面的示例根据 HTML 标签分割页面，而我需要根据 div 高度
html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面
有两个 html 页面，如果在第一个页面中单击特定图像，它将转到第二个 html 页面。如果在第二个 html 页面上的任何地方单击它应该返回到第一页并将第二页完全显示在第一页的一个 div 中 1s
haskell - Servant 中的 Html 页面——如何结合 REST API 和静态 html 页面？
我有一个简单的 hello world Servant 应用程序。我需要向它添加一些静态或动态的 html 页面。我怎样才能做到这一点？在文档中没有提到它。注意我不想在 Haskell 代码中创建 h
javascript - jQuery 将外部 html 页面 <title> 插入另一个 html 页面
我有两个文件 index.html 和 index2.html。这两个文件都在本地机器上的同一目录中(无法访问 PHP 等)。我正在努力 Page Title 使用 jQuery 从 index.h
java - 为一个 Servlet 创建一个动态前端 JSP 页面，同时将 Servlet 的输出显示到 JSP 页面
假设我有一个 JSP 页面 index.jsp User id:
javascript - 页面 A 将值发布到页面 B，页面 B 使用 cURL 向页面 C 发送另一个帖子，并将响应返回到页面 A
我面临着一个对我来说非常陌生的情况。我会尽力让事情变得简单来解释它一步一步来。 1)在页面 A(用户表单)中，我从字段中获取一些值并将其作为 jQuery AJAX POST 发送到页面 B。这是主要
javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列
我正在尝试弄清楚如何从 buttons.html 获取用户按钮点击动态切换第二个列的可见性 userinput.html 。我正在使用 DataTables userinput.html表并认为我有
asp.net-mvc - angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面
我有asp。净 mvc4 项目。 Angularjs 已集成。我已经按照以前的要求构建了 HTML 页面和 WEB API 2。现在出于某种原因，我必须使用 CSHTML 页面。以前我只有 web
WordPress 页面 - 未找到页面
我的网站包含大约 18 个不同的页面。以管理员身份登录后，我单击“页面”。我看到了以下内容 All (20) | Mine (19) | Published (19) | Draft (1) No
Haskell "man"页面？
Haskell 中每个函数都有手册页吗？换句话说，我可以在某处输入 man fst 并获取有关该函数的手册或帮助页面吗？我发现大量的功能势不可挡! 我正在使用 GHC 和 GHCi。最佳答案我不知
Github 页面 - 禁用除单个站点之外的所有站点的自定义域重定向？
我一直在用github pages很长一段时间以来，并使用自定义域重定向功能来重定向我的 user website来自 prahladyeri.github.io到我自己的域名 https://www
显示旧代码的 Github 页面
我对 Github 有一个基本的了解:我知道如何创建、添加、提交、推送和克隆存储库。我也开始探索 Github 页面来托管我的项目。我的最新项目于 3 月开始并将其推送到 gh-page。从那以后，我
Airflow Ooops 页面
在尝试查看日志时，Airflow 会抛出一个带有以下消息的 oops 页面: File "/Users/user/.pyenv/versions/3.5.2/lib/python3.5/locale.
GitHub 页面 - 网址重写支持
我已经按照此处列出的步骤 (https://pages.github.com/) 为我正在处理的网站设置了一个 GitHub 页面我设置的站点当前托管在 IIS 下，并使用 URL Rewrite
将域重定向到 Openshift 页面
我想将我的 domain.com 重定向到 openshift 页面 (openshift-app.rhcloud.com)。我已经按照描述完成了 here它有效。唯一的问题是，在任何网站上，我都不会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 视频元素未显示在页面上