Background: Due to the many limitations of the small program environment, it is hoped that the scanning function can be realized on the h5 side to get rid of the WeChat environment.
Solution 1: <input type="file" />
<input type="file" /> is currently supported by most mobile browsers, and has good compatibility. It can open the camera and photo album to select files and then interpret the pictures.
shortcoming:
1. After turning on the camera, the content of the camera cannot be captured, and the currently popular way of scanning QR codes cannot be realized
2. The photo quality requirements are high, and the recognition will fail if it is slightly blurred
advantage:
1. Good compatibility
Test browser compatibility:
1. UC browser is successful, but the camera is often not recognized
2. 360 browser successfully
3. The QQ browser is successful, but the photos are often not recognized
4. Sogou browser successfully
Test QR code:
Solution 2: navigator.getUserMedia
HTML5's getUserMedia API provides an interface for users to access hardware device media (camera, video, audio, geographic location, etc.), but currently the browsers do not support this interface very well.
You can convert the video stream obtained by navigator.getUserMedia into video.play(), then use canvas to convert the video into a canvas, and then analyze the pictures on the canvas to get the QR code information.
shortcoming:
1. Poor browser compatibility
2. The mobile phone needs to face the QR code when scanning
3. The QR code needs to be very clear
advantage:
1. Able to realize the current mainstream way of scanning QR codes
Test browser compatibility:
1. UC Browser failed
2. 360 browser successfully
3. QQ browser successfully
4. Sogou browser failed
Test QR code:
Based on the above tests, due to the limitations of browsers on mobile phone hardware, there is currently no popular solution that is suitable for h5 to call the camera to recognize QR codes.