Preface small Syria

You are familiar with the scene where the webcam is invoked on the PC side. You can open a website and start a written test, video chat, live broadcast, etc.

Have you seen a lot of camera calls on mobile web pages? I think the answer is not much.

Compared with native app, H5 has been criticized for its poor ability to call the native phone.

But the demand is always sudden, do or not to do?

In fact, whether or not you do something should not prevent you from stockpiling relevant knowledge and doing adequate research. Similar technology on the market to achieve a few, does not mean that can not do. We can’t do it, and we at least know why, right?

Maybe as you search, you’ll find something different.

Point praise three generations 👍 comment rich life 🤞

First, the WebRTC

Solution one is webRTC, which is also the implementation of PC.

WebRTC (Web Real-Time Communications) is a real-time communication technology that allows Web applications or sites to establish peer-to-peer connections between browsers without resorting to intermediaries. Implement the transmission of video streams and/or audio streams or any other data. WebRTC includes standards that make it possible to create peer-to-peer data sharing and teleconferencing without having to install any plug-ins or third-party software. – the MDN – WebRTC_API

Core API

The core API is: the navigator. MediaDevices. GetUserMedia

  • Note: There is also an old API, Navigator. GetUserMedia, that has been deprecated. Don’t use the old API for testing

Compatible with the situation

Can I Use: Look at the compatibility of this API

Caniuse.com/?search=Get…

This melon combined with online code, small modifications, put online.

Tuaran. site/static/webr…

Post key code

<body> <div> <video ID ="video" width="480" height="320" fraternal controls autoplay="autoplay"> </video> </button> </div> <canvas ID ="canvas" width="480" height="320"></canvas> <script> Function getUserMedia(constraints, success, The error) {if (the navigator. MediaDevices. GetUserMedia) {/ / the latest standard API navigator. MediaDevices. GetUserMedia ({' audio ': { EchoCancellation: false}, 'video':{'facingMode': "user"}// call the front camera. Use the rear camera. "The environment"}}}). Then (success). The catch (error)} else if (the navigator. WebkitGetUserMedia) {/ / its core browser navigator.webkitGetUserMedia(constraints, success, The error)} else if (the navigator. MozGetUserMedia) {/ / firfox navigator browser. MozGetUserMedia (constraints, success, error); } else if (navigator. GetUserMedia) {// Old API navigator. GetUserMedia (constraints, success, error); } } let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); Function success (stream) {/ / browser compatible with its core let CompatibleURL = window. The URL | | window. WebkitURL; // Set the video stream to the source console.log(stream) of the video element; //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) {console.log(' failed to access user media device ${error. } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || The navigator. MozGetUserMedia) {/ / call user media equipment, access to camera getUserMedia ({video: {width: 480, height: 320}}, success, error); } else {alert(' access to user media is not supported '); } document.getElementById('capture').addEventListener('click', function () { context.drawImage(video, 0, 0, 480, 320); }) </script> </body>Copy the code

Use video to play video. If you want to take a screenshot, use canvas to draw.

Summary the main points

It can be concluded from the above figure and practice that WebRTC’s scheme of setting up the camera has good support on PC, but different support on mobile browser. Most of the domestic Android browser for the low version of chrome kernel branch, shell nested, slow update. IOS compatibility with the Vedio TAB property is also unsatisfactory.

Third-party libraries

Tracking. Js is a third-party library from Amway

It has this solution in the Face_camera demo.

Second, the capture

The core code

Call the front camera code to achieve:

<input class="phone_input" type="file" accept="video/* capture="user" />
Copy the code

Compatible with the situation

Caniuse.com/?search=cap…

Tuaran. site/static/capt…

Summary the main points

PC is not supported, iOS is well supported, and a few Android phones have compatibility differences (some Android phones above 8.0 cannot be set to the front, but will be set to the back).

conclusion

  • Compare the WebRTC solution with capture solution
WebRTC capture
PC support PC does not support
Mobile compatibility is messy The compatibility of mobile devices is better
Customize video resolution/window size, etc. (live streaming) Unable to customize (local full screen recording)
Complex code implementation Simple code implementation

To sum up, WebRTC scheme is not compatible with mobile web pages, but it can be customized to a high degree. It can operate video stream, set resolution, adjust window size, etc., to achieve the effect similar to app calling camera, but the corresponding difficulty is high and the compatibility is relatively complex. The Capture solution is compatible, but it only calls a native camera to record a video. The degree of customization is not high. If the video is too large, compression and so on will also be a problem. How to balance the two? You can use the former in compatible cases, the latter in incompatible cases, and the browser is the final answer.

Bengua believes H5 will have more and better capabilities!