我遵循了有关 WebRTC 视频聊天的 YouTube 教程，因此我尝试编写它。在 localhost 中它可以工作，但是当我将其上传到 firebase 托管时，它就会出现此错误。
我能做些什么？我是网络开发新手，所以请耐心等待
主要.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebRtc Demo</title>
</head>
<body>
<h2>Start Cam</h2>
<div class ="videos">
<span>
<h3>Local</h3>
<video id="webcamVideo" autoplay playsinline></video>
</span>
<span>
<h3>Remote</h3>
<video id="remoteVideo" autoplay playsinline></video>
</span>
</div>
<button id="webcamButton">Start cam</button>
<h2>New Call</h2>
<button id="callButton">call</button>
<input id="callInput"/>
<button id="answerButton">Rispondi</button>
<button id="hangupButton">Hangup</button>
<script type="module" src="/main.js"></script>
</body>
</html>
Firebase.json
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "/",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
main.js
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
...
};
我遇到过同样的问题。我会告诉你我是如何解决的：
首先尝试使用 CDN 从 google 服务器导入 firebase 模块。请看下面：
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
这非常有效。但为了提高效率，我想您想使用 npm 在计算机上加载 firebase 模块。
在这种情况下，你绝对需要像 Webpack、Rollup、Parcel、Snowpack 这样的模块捆绑器，...我用过Webpack，他们有很多关于它的教程。
如果您使用模块捆绑器，它会将您的 main.js 文件编译成另一个文件，我们将其称为bundle.js。
然后解决这个问题：
<script type="module" src="/main.js"></script>
to :
<script type="module" src="dist/bundle.js"></script>
或（取决于您如何设置路径）
<script type="module" src="bundle.js"></script>
所以你收到这个错误是因为你的 main.js 没有编译。
我希望这对你有帮助。和平
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
