Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve the photo function in html5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Take a picture

HTML5's getUserMedia API provides users with an interface to access hardware media (camera, video, audio, geographic location, etc.). Based on this interface, developers can access hardware media devices without relying on any browser plug-ins.

Mainstream browsers such as Firefox, Chrome, Safari, Opera, etc., are fully supported.

1. Get the video stream and play it with video tag.

-const videoConstraints = {width: 1366, height: 768}; const videoNode = document.querySelector ('# video'); let stream = await navigator.mediaDevices.getUserMedia ({audio: true, video: videoConstraints}); videoNode.srcObject = stream VideoNode.play ()

2. How to switch between multiple camera devices?

/ / enumerateDevices get all media devices const mediaDevices = await navigator.mediaDevices.enumerateDevices (); / / filter to get camera devices const videoDevices = mediaDevices.filter (item = > item.kind = 'videoinput') through the device instance king attribute videoinput | | []; / / get front camera const videoDeviceId = videoDevices [0] .deviceId; const videoConstraints = {deviceId: {exact: videoDeviceId}, width: 1366, height: 768} Let stream = await navigator.mediaDevices.getUserMedia ({audio: true, video: videoConstraints}); / / get rear camera const videoDeviceId = videoDevices [1] .deviceId; const videoConstraints = {deviceId: {exact: videoDeviceId}, width: 1366, height: 768}; let stream = await navigator.mediaDevices.getUserMedia ({audio: true, video: videoConstraints}); / / and so on.

3. Take pictures and save pictures

/ capture video stream through canvas to generate base64 format image const canvas = document.createElement ('canvas'); const context = canvas.getContext (' 2d'); canvas.width = 1366; canvas.height = 768; context.drawImage (videoNode, 0, 0, canvas.width, canvas.height); download (canvas.toDataURL ('image/jpeg')); / / download image function download (src) {if (! src) return Const a = document.createElement ('a'); a.setAttribute ('download', new Date ()); a.href = src; a.click ();}

4. Turn off the camera equipment

Let stream = await navigator.mediaDevices.getUserMedia ({audio: true, video: videoConstraints}); / / turn off the camera setTimeout (function () {stream.getTracks () .forEach (track = > track.stop ()); stream = null;}, 3000)

Complete the simple camera photo function here.

Camera

The basic process of photography is to record a video stream and save it as an audio and video file. The HTML5 MediaRecorder object provides multimedia recording and video recording capabilities.

Browser compatibility is as follows:

As shown in the figure above, the browser is far less compatible with MediaRecorder than getUserMedia. Currently, only Chrome and Firefox support MediaRecorder better.

= = Note: the camera preview player video tag should set mute muted (to eliminate the harsh noise caused by echoes) = =

Const videoConstraints = {width: 1366, height: 768}; let stream = await navigator.mediaDevices.getUserMedia ({audio: true, video: videoConstraints}); let mediaRecorder = new MediaRecorder (stream); let mediaRecorderChunks = []; / / record data stream mediaRecorder.ondataavailable = (e) = > {mediaRecorderChunks.push (e.data);}; mediaRecorder.onstop = (e) = > {/ / create file binary data instance through Blob object. Let recorderFile = new Blob (mediaRecorderChunks, {'type': mediaRecorder.mimeType}); mediaRecorderChunks = []; const file = new File ([this.recorderFile], (new Date). ToISOString (). Replace (/: |. / g,' -') + '.mp4', {type: 'video/mp4'}); download (URL.createObjectURL (file)) / / download video function download (src) {if (! src) return; const a = document.createElement ('a'); a.setAttribute ('download', new Date ()); a.href = src; a.click ();}}; mediaRecorder.stop () / / stop recording and trigger the onstop event. These are all the contents of the article "how to take pictures in html5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.