The video element is not showing on the page

Question

Recently I used app.js as the framework to design the layout of my web app. The web app is to stream from webcam and show on the webpage html video element.

The webcam is working and running, however the video doesn't show on my webpage, in fact the whole video element like being hidden underneath something.

Could anyone point to me where is my error? at first I though it is about the z-index of the elements, but I couldn't solve it,so it might not be the case.

I will attach snippets of my html and Css files below.

thanks in advance

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
    }

score 1 · Answer 1 · answered Feb 12 '19 at 14:56

You can check this blog post regarding accessing the webcam in html5.

Here is the basic code for this:

HTML file:

<!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 file:

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!");
  });
}

Try and implement the following using the getUserMedia method. All we are telling getUserMedia is to specify a constraints object whose video property is set to true. This means that default settings will be used in capturing the visuals and displaying them.

The video element is not showing on the page

1 Answers1