HTML5 사진 및 카메라 기능에 대한 자세한 실제 설명

최근에는 크롬 앱용 클라우드 카메라 애플리케이션을 작업하고 있습니다. 이 애플리케이션에는 미디어 스트리밍과 관련된 많은 HTML5 API가 포함된 사진 촬영, 동영상 녹화, 사진 및 동영상 저장, 파일 업로드 등의 핵심 기능이 포함되어 있습니다. 이 글을 쓰는 목적은 첫째, 지식 포인트를 요약하고 정리하는 것이며, 가장 중요하게는 관련 요구 사항이 있는 독자에게 몇 가지 지침을 제공하는 것입니다.

참고: 이 기사는 실제 전투를 기반으로 하며 이론적 지식을 너무 많이 소개하지 않습니다.

HTML5의 getUserMedia API는 사용자에게 하드웨어 장치 미디어(카메라, 비디오, 오디오, 지리적 위치 등)에 액세스할 수 있는 인터페이스를 제공합니다. 이 인터페이스를 기반으로 개발자는 브라우저 플러그인에 의존하지 않고 하드웨어 미디어 장치에 액세스할 수 있습니다.

브라우저 호환성은 다음과 같습니다.

위 그림에서 볼 수 있듯이 주류 브라우저인 Firefox, Chrome, Safari, Opera 등이 완벽하게 지원됩니다.

 <video id=동영상 자동재생></video> -------------------------- ---------- const videoConstraints = { 너비: 1366, 높이: 768 }; const videoNode = document.querySelector('#video'); stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoNode.srcObject = stream; videoNode.play();

 // enumerateDevices는 모든 미디어 장치를 가져옵니다. const mediaDevices = wait navigator.mediaDevices.enumerateDevices(); // 장치 인스턴스 왕 속성 videoinput을 통해 카메라 장치를 가져오는 필터 const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') || []; // 전면 카메라 가져오기 const videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { 정확한: videoDeviceId }, width: 1366, height: 768 }; let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }) // 후면 카메라 가져오기 const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { deviceId: { 정확한: videoDeviceId }, 너비: 1366, 높이: 768 }; let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }) // 등등...

 // 캔버스를 통해 비디오 스트림을 캡처하고 base64 형식 이미지를 생성합니다. const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.height = 768; context.drawImage(videoNode, 0, 0, canvas.width, canvas.height) download(canvas.toDataURL('image/jpeg')); // 이미지 다운로드 함수 download(!src) return; const a = document.createElement('a') a.setAttribute('download', new Date()); .클릭() }

 let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // 3초 후 카메라 끄기 setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; 스트림 = null }, 3000);

이로써 간단한 카메라 촬영 기능이 완성되었습니다.

사진 촬영의 기본 과정은 비디오 스트림을 녹화하고 이를 오디오 및 비디오 파일로 저장하는 것입니다. HTML5 MediaRecorder 객체는 멀티미디어 녹화 및 비디오 녹화 기능을 제공합니다.

브라우저 호환성은 다음과 같습니다.

위 그림에서 볼 수 있듯이 브라우저의 MediaRecorder 호환성은 getUserMedia보다 훨씬 열등합니다. 현재 Chrome과 Firefox만이 MediaRecorder를 더 잘 지원합니다.

==참고: 카메라 미리보기 플레이어의 비디오 태그는 음소거로 설정되어야 합니다(반향으로 인한 거친 소음을 제거하기 위해)==

 const videoConstraints = { 너비: 1366, 높이: 768 }; let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }) let mediaRecorderChunks = [] / / 레코드 데이터 스트림 mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data) }; mediaRecorder.onstop = (e) => { // Blob 객체를 통해 파일 바이너리 데이터 인스턴스를 생성합니다. let RecorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { 유형: '비디오/mp4' }); download(URL.createObjectURL(file)); // 비디오 다운로드 함수 download (src) { if (!src) return; const a = document.createElement('a'); )); a.href = src; a.click(); } }; // 녹화를 중지하고 이벤트를 발생시킵니다.

위의 실습을 통해 독자들은 사진 촬영, 비디오 녹화, 파일 저장 등과 같은 기본적인 카메라 기능을 마스터했다고 생각합니다. 애플리케이션 프로젝트는 개인 프로젝트가 아니고, 소스코드도 공개되지 않기 때문에 관심 있는 분들은 한번 시도해보시면 좋을 것 같습니다.