javascript - 如何在反应 nodejs 中授予在两个或多个 html 页面中包含相机的权限？
问题描述
我正在开发一个使用手势识别进行在线购物的网站。为此，我添加了 5 个产品。并且每个产品都充当重定向到其子页面的链接（例如 5 个产品是太阳镜、椅子、鞋子、帽子、手表。如果我单击一个产品（椅子），它会打开其他 HTML 页面并显示五个椅子图像。像这样我为所有五种产品制作。）。HTML 页面名称为 index.html、index1.html、index2.html、index3.html、index4.html、index5.html。这些位于公共文件夹中。在这个网站中，主页是 index.html。问题是，如果我在 localhost 中打开此网站，则可以在主页（index.html）中访问相机。如果我通过单击 5 个产品中的任何一个重定向到子页面，则无法访问相机。我不知道在哪里更正代码。因为我是网络开发的新手。
这是产品的图像，它充当重定向到子页面的链接
<a href="./index1.html"> <img src="assets/prdt1.jfif" alt="product1"></a>
<a href="./index2.html"><img src="assets/prdt2.jfif" alt="product2"></a>
<a href="./index3.html"><img src="assets/prdt3.jfif" alt="product3"></a>
<a href="./index4.html"><img src="assets/prdt4.jfif" alt="product4"></a>
<a href="./index5.html"><img src="assets/prdt5.jfif" alt="product5"></a>这是重定向到新窗口的代码
<script type="text/javascript">
function redirect()
{
var url = "./index1.html";
window.location.href=url;
}
function redirect1()
{
var url = "./index2.html";
window.location.href=url;
}
function redirect2()
{
var url = "./index3.html";
window.location.href=url;
}function redirect3()
{
var url = "./index4.html";
window.location.href=url;
}
function redirect4()
{
var url = "./index5.html";
window.location.href=url;
}
</script>这是主 html 页面 index.html 的代码（以上 2 个片段取自以下代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>3D Model Website</title>
</head>
<style>
img {
border:0;
padding: 0px;
width: 200px;
}
button {
border: none;
padding: 0;
background: none;
}
</style>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!--
in this div class camera is placed
-->
<div id="root"></div>
<script type="text/javascript">
function redirect()
{
var url = "./index1.html";
window.location.href=url;
}
function redirect1()
{
var url = "./index2.html";
window.location.href=url;
}
function redirect2()
{
var url = "./index3.html";
window.location.href=url;
}function redirect3()
{
var url = "./index4.html";
window.location.href=url;
}
function redirect4()
{
var url = "./index5.html";
window.location.href=url;
}
</script>
<div id="container">
<div id="navbar">
<div id="logo">
<img src="assets/logo.png" alt="">
</div>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">My cart</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>3D MODEL ONLINE SHOPPING</h2>
<p>This website contains 3D model of the every product</button>
</div>
<div id="icons">
<div id="iconsLogo">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
<div id="home2">
<div id="image">
<a href="./index1.html"> <img src="assets/prdt1.jfif" alt="product1"></a>
<a href="./index2.html"><img src="assets/prdt2.jfif" alt="product2"></a>
<a href="./index3.html"><img src="assets/prdt3.jfif" alt="product3"></a>
<a href="./index4.html"><img src="assets/prdt4.jfif" alt="product4"></a>
<a href="./index5.html"><img src="assets/prdt5.jfif" alt="product5"></a>
</div>
</div>
</div>
</body>
</html>
其中，app.js 是包含访问相机代码的文件。
如果我运行此代码，则只有 index.html 可以访问相机。如何设置所有子页面访问相机。
我认为这是从 index.html 访问 app.js 的代码
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>3D Model Website</title>
</head>But if I copy paste this in all other html page it shows error and doesn't woke the camera.
我该怎么办？☹☹☹</p>
上面两张图是index.html
现在我通过单击未访问的鞋图像相机重定向到 index1.html。
解决方案
推荐阅读
- iis - ASP.net MVC 站点无法在 Windows Server 2019 上运行
- javascript - 如何使用 React hook 修复渲染的钩子比上一次渲染时更多的钩子
- firebase - Firebase 云消息传递对于在 Web 应用程序中开发聊天系统是否可靠？
- performance - Julia - 加快字符串到日期或日期时间的转换
- html - 图像位置推出元素
- html - 内联文本居中对齐
- algorithm - 求解斐波那契数列的非齐次递归关系
- php - php isset 检查中的同一页面发布请求不起作用？
- javascript - 如何在 GitHub 中使用 JavaScript 创建文件？
- outlook - 如何恢复 Outlook 附件和超链接？