can't open the camera in wechat browser ,iOS system

[bububear]

Describe the bug Can't open the camera in Wechat browser ,iOS system reproduce this issue with one of the demos

To Reproduce One of the demos : https://vue-qrcode-reader.netlify.app/demos/ScanSameQrcodeMoreThanOnce.html

Screenshots

Smartphone (please complete the following information):

• Device: [Phone6s Plus]
• OS: [iOS]
• Browser [Wechat broswer]

[Sec-ant]

This looks like a WebRTC issue in WKWebView on early iOS devices:

• https://developers.weixin.qq.com/community/develop/doc/000ca0c5f70f48f241de9b75f5b000
• https://www.jianshu.com/p/ac585a7d3241
• https://developers.weixin.qq.com/community/develop/doc/00046e23fbc93807649c34ed551400

[bububear]

On the basis of iOS 14.3 and later, the camera still cannot be turned on.

[Sec-ant]

I just remembered I have an iPhone SE 1st generation and I successfully reproduced this problem.

Upload three videos for demonstration:

• Doesn't work in WeChat browsers

https://github.com/gruhn/vue-qrcode-reader/assets/10386119/a1054054-23f9-48ae-977e-383d7bffac2d

https://github.com/gruhn/vue-qrcode-reader/assets/10386119/460b98be-b24d-493e-9015-9b8b86732593

• Works in Safari

https://github.com/gruhn/vue-qrcode-reader/assets/10386119/55bf92ce-de07-4a5b-882b-7bd9556db16a

iOS 15.5, Safari 15.5, WebKit 6613.2.7

I may do some debugging when I have time. Though it's not easy because I don't have a mac.

---

A relevant link (maybe): http://www.zhigushu.com/a/12389

Translated to English with AI:

When calling navigator.mediaDevices.getUserMedia to access the camera for facial recognition, it works on both Android's WeChat and browsers. However, on iOS, it only works in the browser, as the WeChat app displays a white screen.

During testing, getUserMedia is effective, but it was discovered that due to the lack of support for the onloadedmetadata event, the video cannot be played(). Therefore, an alternative approach was implemented by adding an event listener, canplay, where the video capture operation is executed. In this case, video.play() is called directly within the getUserMedia event.

[Sec-ant]

Adding this line of code

videoEl.play()

before awaiting Promise.race seems to fix this problem:

https://github.com/gruhn/vue-qrcode-reader/assets/10386119/b56a5454-50d0-47eb-a743-bd5b594de248

[github-actions[bot]]

:tada: This issue has been resolved in version 5.3.6 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: