jslib html5 camera photo 다운로드 jslib html5 camera photo 소스 코드 다운로드

JSLIB-HTML5-CAMERA-PHOTO

이 패키지의 첫 번째 목표는 HTML5 비디오 및 캔버스 요소가 포함 된 브라우저를 통해 모바일 또는 데스크탑 카메라에서 사진을 캡처하는 데 도움이되는 JS 라이브러리가 있어야합니다. 따라서 navigator.mediaDevices.getUserMedia() 사용하고 stream 과 constraints 관리하는 대신 카메라 사이에서 전환하고 원하는 해상도를 얻을 수있는 작은 LIB로 추상화가 필요합니다.

다른 JS 카메라? 예! WebCAMJS 및 JPEG_CAMERA를 찾았지만 카메라 environment 과 user 에서 쉽게 전환해야합니다. getUsermedia ()의 제약 조건을 구축해야합니다. 또 다른 요구는 카메라가 선택할 수있는 해상도의 비율에 맞지 않는 고정 '폭'및 '높이'대신 sizeFactor 갖는 것입니다.

도서관의 특징.

facing mode 나 deviceId 카메라를 선택하고 기본 카메라로 돌아갑니다.
ideal resolution 설정하고 기본 해상도로 돌아갑니다.
카메라의 maximum resolution 얻고 기본 해상도로 돌아갑니다.
jpg 또는 png 사이에서 DataURI image format 유형을 선택하십시오.
이미지 형식이 jpg 인 경우 compression value 선택하십시오. [0, 1].
카메라의 거울 데이터 우리를 얻으려면 DataUri image mirror 선택하십시오.

간단한 라이브 데모

https://mabelanger.github.io/jslib-html5-camera-photo/

지원되는 브라우저 (GetUsermedia)

https://caniuse.com/#search=getusermedia Alt Caniuse ... (2018 년 4 월)

사용 가능한 카메라 FacingModes

facing_modes []	설명
사용자	소스는 사용자 (자체 뷰 카메라)를 향하고 있습니다.
환경	소스는 사용자와 멀어지고 있습니다 (환경보기).

아래는 사용자와 관련된 비디오에 직면 한 모드의 예입니다.

alt facingmodes

SRC : https://www.w3.org/tr/mediacapture-streams/#dom-videofacingmodeenum

시작하기

바닐라 JavaScript, React, JQuery, Angular와 함께 라이브러리를 사용할 수 있습니다.

설치

npm install --save jslib-html5-camera-photo

yarn add jslib-html5-camera-photo

용법

건설자

 import CameraPhoto , { FACING_MODES , IMAGE_TYPES } from 'jslib-html5-camera-photo' ;

// get your video element with his corresponding id from the html
let videoElement = document . getElementById ( 'videoId' ) ;

// pass the video element to the constructor.
let cameraPhoto = new CameraPhoto ( videoElement ) ;

STARTCAMERA의 매개 변수

 cameraPhoto . startCamera ( cameraDevice , resolution )

매개 변수	설명
Cameradevice	카메라가 모데 모드 또는 deviceid의 `string` 입니다
해결	`object` 해상도 Ex :. `{ width: 640, height: 480 }`

기본 모드 시작 (Facing Mode & Resolution)

선호 해상도 및 직면 모드를 지정하지 않으면 기본값이 사용됩니다. 함수는 약속을 반환합니다. 약속이 성공하면 사용하려면 스트림을 줄 것입니다. 실패하면 오류가 발생합니다.

 // default camera and resolution
cameraPhoto . startCamera ( )
  . then ( ( stream ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

이상적인 얼굴 모드 및 기본 해상도로 시작하십시오

 // environment (camera point to environment)
cameraPhoto . startCamera ( FACING_MODES . ENVIRONMENT , { } )
  . then ( ( stream ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

// OR user (camera point to the user)
cameraPhoto . startCamera ( FACING_MODES . USER , { } )
  . then ( ( stream ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

사용자가 선택한 DeviceID 및 기본 해상도로 시작하십시오

모드를 마주 보는 대신 사용하려는 DeviceID (카메라)를 지정할 수 있습니다. 장치 ID를 알기 위해 사용 가능한 카메라를 참조하는 것을 사용하여 목록을 얻을 수 있으므로 직면 모드 대신 deviceId 로 카메라를 시작할 수 있습니다.

 // OR specify the deviceId (use a specific camera)
const deviceId = 'the_string_of_device_id' ;
cameraPhoto . startCamera ( deviceId , { } )
  . then ( ( stream ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

이상적인 (얼굴 모드 및 해상도)로 시작하십시오.

 // example of ideal resolution 640 x 480
cameraPhoto . startCamera ( facingMode , { width : 640 , height : 480 } )
  . then ( ( stream ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

최대 해상도부터 시작하십시오

폭의 범위 [3840, 2560, 1920, 1280, 1080, 1024, 900, 800, 640, default] px는 카메라의 기본값이 떨어질 때까지 2560 px 등의 3840 px의 최대 너비를 취합니다. FacingMode는 선택 사항입니다.

 // It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
  . then ( ( stream ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

getDatauri ()

카메라의 현재 프레임의 dataUri 를 반환하는 기능. 해당 함수를 사용하려면 해당 속성으로 구성 객체를 빌드하십시오. 기본값을 사용하려면 매개 변수를 ommit하십시오.

매개 변수 (객체 구성)

SizeFactor (번호) : 원하는 해상도를 얻는 데 사용됩니다. 예를 들어, 1 의 SizeFactor는 카메라의 동일한 해상도를 얻는 반면 SizeFactor 0.5 는 카메라의 절반 해상도를 얻습니다. sizefactor는 ]0, 1] 범위 사이에 있고 기본값은 1 입니다.
ImageType (String) : jpg 또는 png 사이에서 원하는 이미지 유형을 가져 오는 데 사용됩니다. ImageType을 지정하려면 Constant Image_Types를 사용하십시오. 예를 들어 JPG 형식을 지정하여 image_types.jpg를 사용하십시오. 기본 이미지 타입은 png 입니다.
ImageCompression (번호) : jpg 선택할 때 원하는 압축을 얻는 데 사용됩니다. [0, 1] , 1 사이의 압축을 선택하십시오. 1은 최대, 0은 최소입니다. 기본값 imagecompression은 0.92 입니다.
ISIMAGEMIRROR (부울) : dataUri 의 결과는 true 카메라 데이터의 미러입니다. 행 아웃 등과 같은 카메라 미러를 사용하는 많은 소프트웨어 ...이 옵션을 활성화하려면 카메라 비디오와 일관 되려면 스트림이 반영되지 않기 때문에 CSS transform: rotateY(180deg) 으로 <video> 태그를 사용하여 스트림을 미러링해야합니다. Canvas Datauri에만 적용됩니다. 기본값은 false 입니다 (거울 없음).

사용 가능한 이미지 유형

image_types []	설명
JPG	이미지 `image/jpeg` 데이터 URI로 설정하십시오
PNG	`image/png` 설정 데이터 URI (기본값)

 // Use all the default value
const config = { } ;
let dataUri = cameraPhoto . getDataUri ( config ) ;

// OR

// Specify sizeFactor, imageType, imageCompression, isImageMirror
const config = {
  sizeFactor : 1 ;
  imageType : IMAGE_TYPES . JPG
  imageCompression : .95 ;
  isImageMirror : false ;
}

let dataUri = cameraPhoto . getDataUri ( config ) ;

카메라 설정을 얻으십시오

함수는 스트림이 없으면 (카메라가 시작되지 않음) 또는 카메라 설정이있는 객체 (Aspectratio, Framerate, Height, Width).

 let cameraSettigs = cameraPhoto . getCameraSettings ( ) ;
if ( cameraSettigs ) {
  let { aspectRatio , frameRate , height , width } = cameraSettigs ;
  let settingsStr =
      `aspectRatio: ${ aspectRatio } ` +
      `frameRate: ${ frameRate } ` +
      `height: ${ height } ` +
      `width: ${ width } ` ;
  console . log ( settingsStr ) ;
}

사용 가능한 카메라를 열거하십시오

enumerateCameras() MediaDeviceInfo의 배열을받는 약속을 반환합니다. 약속이 이행되면 {kind, label, deviceId} . 배열의 각 객체는 사용 가능한 카메라 중 하나를 설명합니다 (권한이 부여 된 장치 유형 만 "사용 가능"). 주문이 중요합니다. 기본 캡처 장치가 먼저 나열됩니다. 카메라가 열려 있으면 약속 만 반환합니다. 카메라가 가까이 있으면 약속을 반환하기 전에 카메라가 승인되어 있는지 확인하십시오. 20ms 동안 진행되는 카메라의 시작/정지 사이클을 수행하십시오.

 cameraPhoto . enumerateCameras ( )
  . then ( ( cameras ) => {
    cameras . forEach ( ( camera ) => {
      let { kind , label , deviceId } = camera ;
      let cameraStr = `
            kind: ${ kind }
            label: ${ label }
            deviceId: ${ deviceId }
        ` ;
      console . log ( cameraStr )
    } ) ;
} )

플러그인 - 사진 다운로드

찍은 DataUri의 사진을 다운로드하여 downloadPhoto() 함수로 전달할 수 있습니다.

 import { downloadPhoto } from 'jslib-html5-camera-photo' ;

let dataUri = cameraPhoto . getDataUri ( config ) ;
downloadPhoto ( dataUri , prefixFileName , number ) ;
// The filename will be saved as the format : 
` ${ prefixFileName } - ${ number } .jpg|png}`

downloadPhoto() 함수의 매개 변수입니다

매개 변수	설명
Datauri	사진의 Datauri입니다
prefixfilename	파일 이름의 `string` 접두사입니다
숫자	0 패딩이있는 파일 이름의 `integer` 번호 접두사입니다.

카메라를 중지하십시오

카메라를 멈추는 기능. 성공하면 가치가 반환되지 않습니다. 카메라가 이미 중지되었거나 시작되지 않았기 때문에 카메라가 중지되지 않으면 실패 할 수 있습니다. Error('no stream to stop!') . 카메라를 시작할 때마다 내부적 으로이 정지 기능을 사용하여 새로운 제약 조건을 적용 할 수 있습니다.

 // It stop the camera
cameraPhoto . stopCamera ( )
  . then ( ( ) => { /* ... */ } )
  . catch ( ( error ) => { /* ... */ } ) ;

전체 예제 바닐라 JS & HTML

HTML

 <!-- needed to by the camera stream -->
< video id =" videoId " autoplay =" true " > </ video >

<!-- needed if you want to display the image when you take a photo -->
< img alt =" imgId " id =" imgId " >

<!--buttons to trigger the actions -->
< button id =" takePhotoButtonId " > takePhoto </ button >
< button id =" stopCameraButtonId " > stopCamera </ button >

자바 스크립트

 import CameraPhoto , { FACING_MODES } from 'jslib-html5-camera-photo' ;

// get video and image elements from the html
let videoElement = document . getElementById ( 'videoId' ) ;
let imgElement = document . getElementById ( 'imgId' ) ;

// get buttons elements from the html
let takePhotoButtonElement = document . getElementById ( 'takePhotoButtonId' ) ;
let stopCameraButtonElement = document . getElementById ( 'stopCameraButtonId' ) ;

// instantiate CameraPhoto with the videoElement
let cameraPhoto = new CameraPhoto ( videoElement ) ;

/*
 * Start the camera with ideal environment facingMode
 * if the environment facingMode is not available, it will fallback
 * to the default camera available.
 */
cameraPhoto . startCamera ( FACING_MODES . ENVIRONMENT )
  . then ( ( ) => {
    console . log ( 'Camera started !' ) ;
  } )
  . catch ( ( error ) => {
    console . error ( 'Camera not started!' , error ) ;
  } ) ;

// function called by the buttons.
function takePhoto ( ) {
  const config = { } ;
  let dataUri = cameraPhoto . getDataUri ( config ) ;
  imgElement . src = dataUri ;
}

function stopCamera ( ) {
  cameraPhoto . stopCamera ( )
    . then ( ( ) => {
      console . log ( 'Camera stoped!' ) ;
    } )
    . catch ( ( error ) => {
      console . log ( 'No camera to stop!:' , error ) ;
    } ) ;
}

// bind the buttons to the right functions.
takePhotoButtonElement . onclick = takePhoto ;
stopCameraButtonElement . onclick = stopCamera ;

React의 전체 예

이 라이브러리와 함께 REACT HTML5-CAMERA-PHOTO와 함께 REACT가있는 프로젝트가 구축됩니다.

 import React from 'react' ;
import CameraPhoto , { FACING_MODES } from 'jslib-html5-camera-photo' ;

class App extends React . Component {
  constructor ( props , context ) {
    super ( props , context ) ;
    this . cameraPhoto = null ;
    this . videoRef = React . createRef ( ) ;
    this . state = {
      dataUri : ''
    }
  }

  componentDidMount ( ) {
    // We need to instantiate CameraPhoto inside componentDidMount because we
    // need the refs.video to get the videoElement so the component has to be
    // mounted.
    this . cameraPhoto = new CameraPhoto ( this . videoRef . current ) ;
  }

  startCamera ( idealFacingMode , idealResolution ) {
    this . cameraPhoto . startCamera ( idealFacingMode , idealResolution )
      . then ( ( ) => {
        console . log ( 'camera is started !' ) ;
      } )
      . catch ( ( error ) => {
        console . error ( 'Camera not started!' , error ) ;
      } ) ;
  }

  startCameraMaxResolution ( idealFacingMode ) {
    this . cameraPhoto . startCameraMaxResolution ( idealFacingMode )
      . then ( ( ) => {
        console . log ( 'camera is started !' ) ;
      } )
      . catch ( ( error ) => {
        console . error ( 'Camera not started!' , error ) ;
      } ) ;
  }

  takePhoto ( ) {
    const config = {
      sizeFactor : 1
    } ;

    let dataUri = this . cameraPhoto . getDataUri ( config ) ;
    this . setState ( { dataUri } ) ;
  }

  stopCamera ( ) {
    this . cameraPhoto . stopCamera ( )
      . then ( ( ) => {
        console . log ( 'Camera stoped!' ) ;
      } )
      . catch ( ( error ) => {
        console . log ( 'No camera to stop!:' , error ) ;
      } ) ;
  }

  render ( ) {
    return (
      < div >
        < button onClick = { ( ) => {
          let facingMode = FACING_MODES . ENVIRONMENT ;
          let idealResolution = { width : 640 , height : 480 } ;
          this . startCamera ( facingMode , idealResolution ) ;
        } } > Start environment facingMode resolution ideal 640 by 480 </ button >

        < button onClick = { ( ) => {
          let facingMode = FACING_MODES . USER ;
          this . startCamera ( facingMode , { } ) ;
        } } > Start user facingMode resolution default </ button >

        < button onClick = { ( ) => {
          let facingMode = FACING_MODES . USER ;
          this . startCameraMaxResolution ( facingMode ) ;
        } } > Start user facingMode resolution maximum </ button >

        < button onClick = { ( ) => {
          this . takePhoto ( ) ;
        } } > Take photo </ button >

        < button onClick = { ( ) => {
          this . stopCamera ( ) ;
        } } > Stop </ button >

        < video
          ref = { this . videoRef }
          autoPlay = "true"
        />
        < img
          alt = "imgCamera"
          src = { this . state . dataUri }
        />
      </ div >
    ) ;
  }
}

export default App ;

HTML 스크립트 태그로 UMD 모듈을 가져 오십시오

Dist를 만들고 다음과 같이 제공 할 수 있습니다.

$ npm run buildBrowser
$ npm run serve:dist

또는 repo의 Dist 폴더를 복사 할 수 있습니다.

예 :

 < script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
  ...
  var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
  var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
  ...
</ script

개발

사용하기가 간단하고 개발하기에 효율적이기 때문에 Vanilla JS 라이브러리 인 경우에도 Create-React-App의 ENV DEV를 선택합니다. 버그를 수정하거나 기능을 추가하려면 기여하십시오 :)

문서

자동 스캔 해상도 카메라
새로운 API의 훌륭한 정보
W3 사양

다른 흥미로운 프로젝트

WEBRTC/어댑터
getusermedia.js

확장하다