jslib html5 camera photo
1.0.0
このパッケージの最初の目的は、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の場合、[0、1]の間のcompression valueが[0、1]の間に選択します。image mirrorを選択してください。 https://mabelanger.github.io/jslib-html5-camera-photo/
https://caniuse.com/#search = getUsermedia
...（2018年4月のように）
| facing_modes [] | 説明 |
|---|---|
| ユーザー | ソースはユーザー（セルフビューカメラ）に向かっています。 |
| 環境 | ソースはユーザーから離れています（環境を表示）。 |
SRC：https：//www.w3.org/tr/mediacapture-streams/#dom-videfacingmodeenum
バニラJavaScript、React、JQuery、Angularでライブラリを使用できます...
npm install --save jslib-html5-camera-photoyarn 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 ) ; cameraPhoto . startCamera ( cameraDevice , resolution )| パラメーター | 説明 |
|---|---|
| Cameradevice | カメラにfacingmodeまたはdeviceIDのstringです |
| 解決 | object解像度はex：です。 { width: 640, height: 480 } |
優先解像度と対面モードを指定しない場合、デフォルトが使用されます。関数は約束を返します。約束が成功した場合、それを使用したい場合は、ストリームを提供します。失敗した場合、エラーが発生します。
// 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 ) => { /* ... */ } ) ; マードに対応する代わりに、使用するデバイス（カメラ）を指定できます。デバイス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] 3840試してください2560 FacingModeはオプションです。
// It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
. then ( ( stream ) => { /* ... */ } )
. catch ( ( error ) => { /* ... */ } ) ; カメラの現在のフレームのdataUriを返す関数。その関数を使用するには、対応するプロパティで構成オブジェクトを構築します。デフォルト値を使用するには、パラメーターをommitするだけです。
SizeFactor （number）：希望する解像度を取得するために使用されます。たとえば、 1のサイズファクターはカメラの同じ解像度を取得し、 0.5のサイズファクターがカメラの半分の解像度を取得します。 SizeFactorは]0, 1]の範囲の間にあり、デフォルト値は1です。
ImageType （String）： jpgまたはpngの間で目的の画像タイプを取得するために使用されます。 ImageTypeを指定するには、jpg形式を指定するなど、定数Image_typesを使用してimage_types.jpgを使用します。デフォルトのImageTypeはpngです。
ImageCompression （number）： jpgが選択されたときに目的の圧縮を取得するために使用されます。 [0, 1]の間の圧縮を選択し、1は最大、0は最小です。デフォルト値の画像圧縮は0.92です。
Isimagemirror （boolean）： trueに設定されたときに画像ミラーを取得するために使用されると、 dataUriの結果は実際のカメラデータのミラーです。ハングアウトなどのようなカメラミラーを使用する多くのソフトウェア...このオプションを有効にする場合は、カメラビデオとの一貫性を使用するには、CSS transform: rotateY(180deg)を使用して、ストリームをミラーリングしていないため、ストリームをミラーリングする必要があります。 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）のカメラ設定属性を持つオブジェクトが存在しない場合、nullを返します。
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}約束が果たされたとき。配列内の各オブジェクトは、使用可能なカメラの1つを記述します（許可が付与されているデバイスタイプのみが「利用可能」です）。順序は重要です - デフォルトのキャプチャデバイスが最初にリストされます。カメラが開いている場合、約束のみを返します。カメラが近い場合、約束を返す前にカメラが付与されることを確認します。 20ミリ秒間続くカメラの開始/ストップサイクルを実行します。
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 ) => { /* ... */ } ) ; <!-- 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で構築されています
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 ;あなたはdistを構築してから、それを提供することができます：
$ npm run buildBrowser
$ npm run serve:distまたは、リポジトリのdistフォルダーをコピーすることもできます。
例 ：
< script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
...
var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
...
</ scriptBanilla JSライブラリであっても、Create-React-AppのENV開発を選択します。これは、使いやすく、開発が非常に効率的であるため、必ずしもそれを使用するために反応する必要はありません。バグを修正したり、機能を追加したりする場合は、貢献してください:)
