canvas can't detected with jsmpeg and face-api.js

[huangxinjian]

(English is not my first language, sorry)

I use "rtsp-to-stream" which is use to transcoding and jsmpeg to play my camera.

"node-rtsp-stream": "0.0.9",

and I use "videoFaceTracking.html" , this examples to do experiment.

this is my Html code:

<div style="position: relative" class="margin">
      <!-- <video src="bbt.mp4" id="inputVideo" autoplay muted loop playsinline></video> -->
      <canvas id="myPlayer-min-left" class="my-player-min" ></canvas>
      <canvas id="overlay"></canvas>
 </div>

and my jsmpeg code

$(document).ready(function() {
      renderNavBar('#navbar', 'video_face_tracking')
      // jsmpeg start
      const myPlayerL = document.getElementById('myPlayer-min-left')
      var urlL = 'ws://localhost:9530'
      this.playerL = new JSMpeg.Player(urlL, { canvas: myPlayerL })

      initFaceDetectionControls()
      run()
    })

and I change onPlay() args like this:

 // start processing frames
onPlay(document.getElementById('myPlayer-min-left'))

then I want to get some info by console , so I change onPlay body like this

      if (drawBoxes) {
        if (resizedResults && resizedResults.length !== 0) {
          // here is my change
          console.log('detect face success....',  results)
        }
        faceapi.draw.drawDetections(canvas, resizedResults)
      }
      if (drawLandmarks) {
        faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
      }

next is my question.

I find that it doesn't have any output unless I set my-Player-min to "display: none"

<style>
    .my-player-min {
      display: none;
    }
  </style>

So I wonder why this is happening

[huangxinjian]

The problem is solved! The reason is that the 'getContext(' webGL ')' mode is used by default when drawing canvas in Jsmpeg, while the 'getContext(' 2D ')' mode of the same canvas is needed in face-APi.js, resulting in conflicts. However, face-APi.js does not throw any error exception, which makes it difficult to find the problem

[huangxinjian]

sorry. Forget to add the solution. Just add one attribute disableGl in the JSMPEG

this.playerL = new JSMpeg.Player(urlL, { canvas: myPlayerL,  disableGl: true  })