我正在设计一个教授因纽特人手语的网站，它在多个页面上使用用户的相机让学习者练习签名。它不会在任何地方流式传输或保存信号：它只是为了向用户显示他或她自己的网络摄像头图像。在Mozilla Firefox中，加载网络摄像头的第一个页面工作正常，但在之后使用它的每个网页中，网络摄像头都不工作。重新加载页面没有任何作用(即使使用CTRL-F5(，但完全关闭Firefox并在同一页面上重新启动它会使相机工作。。。但再一次，只针对使用它的第一页。
这个错误有点不一致，它总是在本地发生，但并不总是在我的主机服务器上，Microsoft Edge可以很好地处理它。我不知道该怎么解决这个问题。当我离开第一个网页或其他什么的时候，就好像Firefox没有释放相机一样。
示例网页可在此处找到：https://animamundilarp.com/isl_training_tests/practice_inuit_people.html
单击"；下一页"；两次以复制该问题。
感谢任何能告诉我我做错了什么的人。
这是我的页面完整代码：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
</head>
<div class="row">
<div class="col-12"><H1>Inuit People</H1></div> <!-- 100% -->
</div>
<div class="row">
<div class="col-12"><P>Please allow the website to use your webcam for this learning activity. your webcam video is not recorded or sent anywhere on the Internet, and it will only display on your own screen.</P></div> <!-- 100% -->
</div>
<div class="row"> <!-- This row includes both the video and the webcam video -->
<div class="col-6"> <!-- This contains the video of the inuit sign -->
<video controls autoplay loop muted playsinline>
<source src="videos/Inuit_people.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</div>
<div class="col-6">
<video id="media" controls></video>
</div>
</div>
<script>
navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
// audio: true, // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
video: true
})
.then(function (stream) {
var video = document.getElementById("media");
video.srcObject = stream;
video.play();
})
.catch(function (e) {
logError(e.name + ": " + e.message);
});
} else {
navigator.getWebcam({
// audio: true, // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
video: true
},
function (stream) {
//Display the video stream in the video object
},
function () {
logError("your web cam is not accessible. If you do not have a webcam, you can use a mirror instead to see yourself signing.");
});
}
</script>
<P><button type="button" class="button_previous" onclick="Change_Page_to_Previous()"><span class="arrow_button">←</span> Previous</button> <button type="button" class="button_next" onclick="Change_Page_to_Next()">Next page <span class="arrow_button">→</span></button></P>
<script src="previous_and_next_functions.js">
</script>
您需要在网页关闭时释放getUserMedia流。你是如何做到这一点有点草率：你停止了流中的所有曲目。
(此外，找到getUserMedia函数的所有替代位置都在它们所属的历史垃圾箱中，因此代码可以更干净。(
像这样的一些未经调试的Javascript代码应该适合您。注意卸载事件处理程序
const video = document.getElementById("media")
navigator.mediaDevices
.getUserMedia({ audio:false, video: true })
.then(function (stream) {
video.srcObject = stream
video.play()
window.addEventListener("unload", function(event) {
/* upon unloading do this */
const tracks = stream.getTracks()
tracks.forEach(function(track) {
track.stop()
})
video.srcObject = null
stream = null
})
})
.catch(function (e) {
logError(e.name + ": " + e.message)
})