Элемент видео не отображается на странице - PullRequest
Новая
       49

Элемент видео не отображается на странице

0 голосов
/ 12 февраля 2019

Недавно я использовал app.js в качестве основы для разработки макета моего веб-приложения.Веб-приложение предназначено для потоковой передачи с веб-камеры и показа на веб-странице HTML-видеоэлемента.

Веб-камера работает и работает, однако видео не отображается на моей веб-странице, фактически весь элемент видео, например, скрыт под чем-то.

Может кто-нибудь указать мне, где находится мойошибка?Сначала я подумал, что речь идет о z-индексе элементов, но я не смог решить его, поэтому это может быть не так.

Я приложу фрагменты моих 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
    }

1 Ответ

0 голосов
/ 12 февраля 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...