TIL: HTML만으로 사용자의 카메라에 액세스할 수 있습니다.

3011 단어 htmlprogrammingfrontenddevelopment
다른 날 나는 전에 들어본 적이 없는 멋진 HTML 속성을 발견했습니다. capture . 그래서 나는 그것에 관한 비디오와 블로그 게시물을 만들기로 결정했습니다.

원하는 경우 비디오 형식은 다음과 같습니다.



파일 유형이 있는 입력에 capture 속성을 입력하고 "user "또는 "environment "값을 지정할 수 있습니다.

캡처 속성에 대한 흥미로운 점은 모바일 장치에서 웹 사이트를 방문하는 사용자를 위한 것입니다. 해당 입력과 상호 작용하면 기본 파일 선택기를 여는 대신 실제로 카메라 중 하나가 열립니다. 값에 따라 전면 카메라 또는 후면 카메라가 될 수 있습니다.

값을 "user "로 설정하면 사용자 방향 또는 전면 카메라 및/또는 마이크를 사용합니다. 그리고 "environment "로 설정하면 외부 또는 후면 카메라 및/또는 마이크를 사용합니다.

테스트를 위해 다음과 같은 index.html 파일을 만들었습니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    * {
      font-size: 1.5rem;
    }
  </style>
</head>

<body>
  <label for="environment">Capture environment:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">Capture user:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >
</body>

</html>


HTML의 유일한 관련 부분은 두 개의 입력입니다. 둘 다 캡처 속성이 있고 둘 다 수락 속성이 있습니다. 하나는 모든 유형의 비디오로 "environment"을 캡처하도록 설정됩니다. 다른 하나는 모든 유형의 이미지로 "user"을 캡처하도록 설정됩니다.

데스크톱에서 실제로 흥미로운 작업을 수행하지 않는 캡처 속성입니다. 입력을 클릭하면 파일 선택기가 열리는 것을 볼 수 있습니다.

하지만 여기 흥미로운 부분이 있습니다…

휴대폰에서 해당 페이지를 불러와 첫 번째 입력을 클릭하면 카메라가 동영상 녹화 모드로 열립니다. 두 번째 입력을 클릭하면 휴대폰이 이미지 캡처 모드에서 카메라를 엽니다(어떤 이유로 내 휴대폰은 전면 카메라와 후면 카메라를 구분하지 않습니다).

실제로 사진이나 비디오를 찍으면 해당 파일이 HTML 입력으로 전송됩니다.

얼마나 멋진가요!?!?

이제 새로운 웹 API나 기능에 대해 이야기할 때마다 호환성을 논의해야 하며 support on caniuse.com 을 보면 좋지 않습니다...



그러나 지원되지 않는 모든 브라우저는 실제로 전면 또는 후면 카메라가 없는 데스크톱 브라우저이기 때문에 실제로 의미가 있습니다. 따라서 파일 선택기를 여는 것이 합리적입니다.

그러나 지원되는 모든 브라우저는 모바일 브라우저입니다. 그래서 그 기능을 사용하는 것이 좋습니다.

다른 멋진 점은 사용자가 지원되지 않는 브라우저로 애플리케이션을 방문하더라도 기본 파일 선택기 UI로 대체된다는 것입니다.

점진적 향상 FTW!!!

이것이 바로 HTML 캡처 속성입니다. 모바일 사용자가 업로드 시점에 사진, 비디오 또는 음성 녹음을 할 것이라는 것을 알고 있다면 더 멋진 사용자 경험을 추가할 수 있는 매우 멋진 방법입니다.

읽어주셔서 정말 감사합니다. 이 기사가 마음에 드셨다면 . 나를 지원하는 가장 좋은 방법 중 하나입니다. sign up for my newsletter 또는 새 기사가 게시되는 시기를 알고 싶은 경우에도 할 수 있습니다.


austingil.com에 원래 게시되었습니다.
Diferença e organização de Class e ID no CSS: quando e como utilizá-los?
Elasticsearch 및 NestJS를 사용하여 전체 자동 완성 검색 애플리케이션을 만드는 방법 - 1부

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage