如何解决javascript网络摄像头未在生产环境中打开,但可在localhost中运行
javascript代码:
var pc = null;
// data channel
var dc = null,dcInterval = null;
function createPeerConnection() {
var config = {
sdpSemantics: 'unified-plan'
};
pc = new RTCPeerConnection(config);
// connect video
pc.addEventListener('track',function(evt) {
if (evt.track.kind == 'video')
console.log(evt.streams[0],"@@")
console.log(document.getElementById('video').srcObject,"==")
document.getElementById('video').srcObject = evt.streams[0];
});
return pc;
}
function negotiate() {
return pc.createOffer().then(function(offer) {
return pc.setLocalDescription(offer);
}).then(function() {
// wait for ICE gathering to complete
return new Promise(function(resolve) {
if (pc.iceGatheringState === 'complete') {
resolve();
} else {
function checkState() {
if (pc.iceGatheringState === 'complete') {
pc.removeEventListener('icegatheringstatechange',checkState);
resolve();
}
}
pc.addEventListener('icegatheringstatechange',checkState);
}
});
}).then(function() {
var offer = pc.localDescription;
return fetch('/offer',{
body: JSON.stringify({
sdp: offer.sdp,type: offer.type,// video_transform: document.getElementById('video-transform').value
video_transform: "makeup_v2"
}),headers: {
'Content-Type': 'application/json'
},method: 'POST'
});
}).then(function(response) {
return response.json();
}).then(function(answer) {
return pc.setRemoteDescription(answer);
}).catch(function(e) {
alert(e);
});
}
function start() {
document.getElementById('start').style.display = 'none';
pc = createPeerConnection();
var time_start = null;
function current_stamp() {
if (time_start === null) {
time_start = new Date().getTime();
return 0;
} else {
return new Date().getTime() - time_start;
}
}
var constraints = {
video: false
};
// if (document.getElementById('use-video').checked) {
// var resolution = document.getElementById('video-resolution').value;
var resolution = "320x240"
if (resolution) {
resolution = resolution.split('x');
constraints.video = {
width: parseInt(resolution[0],0),height: parseInt(resolution[1],0)
};
} else {
constraints.video = true;
}
// }
if (constraints.video) {
if (constraints.video) {
document.getElementById('media').style.display = 'block';
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
stream.getTracks().forEach(function(track) {
pc.addTrack(track,stream);
});
return negotiate();
},function(err) {
alert('Could not acquire media: ' + err);
});
} else {
negotiate();
}
document.getElementById('stop').style.display = 'inline-block';
}
function stop() {
document.getElementById('stop').style.display = 'none';
// close data channel
if (dc) {
dc.close();
}
// close transceivers
if (pc.getTransceivers) {
pc.getTransceivers().forEach(function(transceiver) {
if (transceiver.stop) {
transceiver.stop();
}
});
}
// close local video
pc.getSenders().forEach(function(sender) {
sender.track.stop();
});
// close peer connection
setTimeout(function() {
pc.close();
},500);
}
<html>
<head>
<Meta charset="UTF-8"/>
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<button id="start" onclick="start()">Start</button>
<button id="stop" style="display: none" onclick="stop()">Stop</button>
<div id="media" style="display: none">
<div style="border:2px solid red;">
<audio id="audio" autoplay="true"></audio>
<video id="video" autoplay="true" playsinline="true"></video>
</div>
</div>
<script src="client.js"></script>
</body>
</html>
我在打开摄像头并使用进行人脸检测的地方共享了我的代码 后端api逻辑。 该代码在localhost上可以正常工作,但在生产环境中则无法使用
https://science-a47kggcjda-uc.a.run.app/
这是我的生产网址。
响应也将成功,并且控制台中没有日志
这是什么原因。 便携式计算机中摄像头灯已亮起,但是摄像头无法正常工作。
请看看
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。