网络摄像头视频无法在浏览器中启动滑轨5

问题描述

你好,我在rails5中有一个带有face-api.js库的应用程序用于人脸识别。但是在我的浏览器中,网络摄像头的视频不起作用,并且在我的控制台中也未显示任何错误。我不明白发生了什么事。

here a screenshot of the browser

这是我的视图代码:

<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 (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...