最近我使用 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/