It may not be the best solution, but it will save time

A, the conclusion

  • You can do this on a PC
  • Mobile cannot be implemented

Second, the plan

2.1 input tag

Input solves the problem of selecting files. There are differences in PC and mobile performance

  • Select files directly on PC
  • Mobile terminal can choose photos and albums. The options vary with the phone system and version, and cannot be customized (for example, only part of the options are reserved).

Taking photos on the mobile phone is a direct call to the system camera, but also can not customize the page.

2.2 Customized photo page scheme

Core principle: Custom photo effects (such as id card, bank card, portrait) are achieved by CSS layout overlay HTML tags.

Access to video streaming: through the navigator. MediaDevices. GetUserMedia access to video streaming, and then using a video broadcast video streaming.

To achieve photography: obtain a frame of video stream through Canvas and generate base64 string data of pictures in specified format, and then use IMG or Canvas to display to achieve ordinary photography effect.

Custom photo effect: use IMG or Canvas to display the mask, and use CSS layout to overlay the mask on the video.

Reference: the Navigator. MediaDevices, mediaDevices, mediaDevices. GetUserMedia, Taking still photos with WebRTC

2.3 The mobile Terminal cannot be implemented

After the page is ready, first deploy to HTTPS service, and then mobile browser access, iN iOS wechat directly open no video stream, in iOS Chrome open no video stream, and then find navigator. MediaDevices return undefined. The root cause is navigator. MediaDevices are available in Safari, but not in the WKWebview. This solution cannot be implemented on iOS, and can be abandoned on mobile terminals.

Warehouse address: html-custom-photo-page

2.3.1 Other related descriptions

  • Safari on macOS High Sierra, iOS 11
  • webRTC isn’t supported by Chrome for iOS
  • Apple doesn’t fully support WebRTC in the browser on iOS