victordibia / handtrack.js

A library for prototyping realtime hand detection (bounding box), directly in the browser.
https://victordibia.com/handtrack.js/
MIT License
2.83k stars 250 forks source link

TypeError: navigator.mediaDevices is undefined #41

Open George3d6 opened 3 years ago

George3d6 commented 3 years ago

I get the error:

Uncaught (in promise) TypeError: navigator.mediaDevices is undefined
    startVideo https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js:25
    startVideo https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js:25

Using the following code:

    <div id="main">

        <div class="knob selected">0</div>
    </div>

    <video class="" autoplay="autoplay" id="video_tag" style="width: 300px; height: 300px; background-color: rgb(155,255,122);"></video>

    <script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>

    <script>
        let tracking_webcam = false;
        const video_tag = document.getElementById('video_tag')

        const run_detection = (model, video) => {
            model.detect(video).then(predictions => {
                console.log('Predictions: ', predictions); 
            });
        }

        const track_webcam = (model, video) => {
            handTrack.startVideo(video).then(status => {
                console.log('status trying to start video: ', status)
                if (status) {
                    tracking_webcam = true;
                    run_detection(model, video)
                }
            })
        }
        // Load the model.
        console.log('Loading handtrack model')
        handTrack.load().then(model => {
            console.log('Handtrack model')
            track_webcam(model, video_tag)
        });
    </script>

The error is thrown at the following line:

handTrack.startVideo(video).then(statu...

I'm unsure what I'm doing wrong here.

huhan-y commented 3 years ago

@George3d6 I found a solution: link

sumanentc commented 3 years ago

I am also getting the below error on both Firefox and Chrome browsers. I am using Mac OS X 10.15. I installed the plugin using the admin url.

[2021-05-16 11:10:24.835] [WARN] client - window.navigator.mediaDevices is undefined -- {
  errorId: 'O3OZqwQA1l0CXxadYIuU',
  type: 'Unhandled Promise rejection',
  msg: 'window.navigator.mediaDevices is undefined',
  url: 'http://0.0.0.0:9001/p/aaaa',
  source: 'http://0.0.0.0:9001/static/js/require-kernel.js?v=888d58f3 line 10 > Function',
  linenumber: 5,
  userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0',
  stack: 'getUserMedia@http://0.0.0.0:9001/static/js/require-kernel.js?v=888d58f3 line 10 > Function:5:7691\n' +
    'activate@http://0.0.0.0:9001/static/js/require-kernel.js?v=888d58f3 line 10 > Function:5:2785\n' +
    'init@http://0.0.0.0:9001/static/js/require-kernel.js?v=888d58f3 line 10 > Function:5:9566\n' +
    'postAceInit@http://0.0.0.0:9001/static/js/require-kernel.js?v=888d58f3 line 10 > Function:5:1170\n' +
    'callHookFnAsync/<@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=888d58f3:65:2797\n' +
    'callHookFnAsync@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=888d58f3:65:2192\n' +
    'ep_etherpad-lite/static/js/pluginfw/hooks.js/exports.aCallAll/t<@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=888d58f3:65:3248\n' +
    'ep_etherpad-lite/static/js/pluginfw/hooks.js/exports.aCallAll@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=888d58f3:65:3214\n' +
    '_afterHandshake/<@http://0.0.0.0:9001/javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define&v=888d58f3:3:8195\n'
}