tensorflow / tfjs-wechat

WeChat Mini-program plugin for TensorFlow.js
https://tensorflow.org/js
552 stars 104 forks source link

Estimate function is still running after page closed #66

Closed Starsky-Synlitec closed 4 years ago

Starsky-Synlitec commented 4 years ago

The problem is :

  1. I initialize the plugin in App.js and load facemesh models.
  2. First page I created a button named "start". Click this button to go to the second page.
  3. In the second page, it starts to capture frames frame camera and do facemsh estimate in canvas.requestAnimationFrame callback function.
  4. When click the "back" button in the navigation bar, it goes back to the first page, while the requestionAnimationFrame callback function in the second page is still running, and the onUnload function of the second page is not called. Then click "start" again, nothing happens. After a while, onUnload function of the second page is triggered and the app goes to the second page.

In this case, I want to stop doing face detect when I go back to the first page, so I added some codes in the onUnload function, but it seems that it's still running in background and the events on page are blocked (also the events on UI) untill all detect function finishes.

In the editor it works well but on my Andoird phone, it does not ..

I am not sure if it is a problem of the plugin system or wehchat itself ?

Starsky-Synlitec commented 4 years ago

I tested on Iphone, it works fine, but Android: no ....

pyu10055 commented 4 years ago

@Starsky-Synlitec did you call the stop on the camera stream on page unload?

Starsky-Synlitec commented 4 years ago

@pyu10055 yes, but the problem is that the onUnload function is not called ! or it is called after a while. I shared you the code.

I tried to call the "estimate" function in onCameraFrame (or in requestAnimationFrame).

On Android device, it runs fast but all UI message (for ex. button click ) can not be responsed immediately but after a long wait. On Iphone device it runs slow but UI message works fine.

On PC tool, it works fine.

pyu10055 commented 4 years ago

@Starsky-Synlitec I think the problem is the frame rate is too high (I think it is running at 60FPS), the process speed cannot catch up with the speed. The unprocessed frames are queued up, that is why it seems to continue doing face detection after you onload the page. You can try to add manual latencies to the onCameraFrame to verify, say process one every three frames.

Starsky-Synlitec commented 4 years ago

@pyu10055 Yes, This is what I thought. If it is because the frame rate is too high, then the final image will be delayed, or we will see the latency from the final image (original camera captured image + estimated face landmarks). But the result is not that. The final image is smooth. Which means the frame rate and the process speed matches well.

On the other hand, I tried to do in every three frames and even every 10 frames. The final image shows the latency while the problem remains.

In addition, on Iphone there is no this problem.

The fact is: When I do the calculation every frame, buttons on the page (let's say page B) does not response while the back button in the navigation bar works. When I click the back button, it goes back to the previous page (let's say page A) immediately, the camera is closed (I can see the camera light close on my phone). However the onCameraFrame function is still running behind and the button on page A does not response to any interaction.

What I don't really understand is that, if the frame rate and the process speed does not match, it will only affact the final image but not the user interaction message. I which I can click a button to stop the calculation process. But I can't. I have to wait until all caculation process finish.

Why user interactions are blocked when doing GPU calculation on Android ?

pyu10055 commented 4 years ago

@Starsky-Synlitec can you try do only detection without rendering, in order to isolate source of problem.

Starsky-Synlitec commented 4 years ago

@pyu10055 I tried only detection. The problem remained. I also tried only render, problem went away. Well It is a problem of Wechat which is not well organized for webgl calculation and message loop. This morning Wechat released a new inside test version 7.0.16. I tested this version, it seems that the problem solved. https://developers.weixin.qq.com/community/develop/doc/000ec80657c618124c8afddaf51801 I will do more test to verify this.

Starsky-Synlitec commented 4 years ago

@pyu10055 I tested more times. It is the problem of Wechat (Android version itself). Now it is fixed by the new version 7.0.16,

pyu10055 commented 4 years ago

@Starsky-Synlitec Awesome, thank you for the update!