问题描述
你好,我在rails5中有一个带有face-api.js库的应用程序用于人脸识别。但是在我的浏览器中,网络摄像头的视频不起作用,并且在我的控制台中也未显示任何错误。我不明白发生了什么事。
这是我的视图代码:
<head>
<%= javascript_include_tag 'face_recognition.js'%>
<%= javascript_include_tag "face-api.js/dist/face-api.min.js" %>
<%= javascript_include_tag "face-api.js/dist/face-api.js" %>
<%= javascript_include_tag 'face_api'%>
<style>
canvas{
position: relative;
top: -420px;
left: 350px;
}
</style>
</head>
<body>
<video id="camfr" autoplay="autoplay" width="400" height="400" muted></video>
</body>
这是我的app / assets / javascripts / face_recognition.js
//require face_recognition
在我的lib / assets / javascripts中,我有face_recogniton.js文件,用于加载相机,画布和face-api.js模型。
const camfr = document.getElementById('camfr')
const startVideo = () => {
var constraints = { audio: false,video: { width: 1280,height: 720 } };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
}
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri("<%= asset_path('vendorface-api.js/models/tiny_face_detector/tiny_face_detector_model-weights_manifest.json') %>"),faceapi.nets.faceLandmark68Net.loadFromUri("<%= asset_path('face-api.js/models/face_landmark_68/face_landmark_68_model-weights_manifest.json') %>"),//desenha os traços do rosto
faceapi.nets.faceRecognitionNet.loadFromUri("<%= asset_path('face-api.js/models/face_recognition/face_recognition_model-weights_manifest.json') %>"),//faz o conhecimento do rosto
faceapi.nets.faceExpressionNet.loadFromUri("<%= asset_path('face-api.js/models/face_expression/face_expression_model-weights_manifest.json') %>"),//detecta expressoes
faceapi.nets.ageGenderNet.loadFromUri("<%= asset_path('face-api.js/models/age_gender_model/age_gender_model-weights_manifest.json') %>"),//idade e genero
faceapi.nets.ssdMobilenetv1.loadFromUri("<%= asset_path('face-api.js/models/ssd_mobilenetv1/ssd_mobilenetv1_model-weights_manifest.json') %>") // usada para detectar rosto
]).then(startVideo)
camfr.addEventListener('play',async () => {
const canvas = faceapi.createCanvasFromMedia(camfr)
const canvasSize = {
width: camfr.width,height: camfr.height
}
faceapi.matchDimensions(canvas,canvasSize)
document.body.appendChild(canvas)
setInterval(async () => {
const detections = await faceapi
.detectAllFaces(
camfr,new faceapi.TinyFaceDetectorOptions()
)
.withFaceLandmarks()
.withFaceExpressions()
.withAgeAndGender()
const resizedDetections = faceapi.resizeResults(detections,canvasSize)
canvas.getContext('2d').clearRect(0,canvas.width,canvas.height)
faceapi.draw.drawDetections(canvas,resizedDetections)
faceapi.draw.drawFaceLandmarks(canvas,resizedDetections)
faceapi.draw.drawFaceExpressions(canvas,resizedDetections)
resizedDetections.forEach(detection => {
const {age,gender,genderProbability} = detection
new faceapi.draw.DrawTextField([
`${parseInt(age,10)} years`,`${gender} (${ parseInt(genderProbability * 100,10)})`
],detection.detection.box.topRight).draw(canvas)
})
},100)
})
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)