jslib html5 camera photo
1.0.0
O primeiro objetivo deste pacote vem da necessidade de ter uma biblioteca JS que possa me ajudar a capturar a imagem da câmera móvel ou de desktop através do navegador com os elementos de vídeo e tela HTML5. Portanto, em vez de usar o navigator.mediaDevices.getUserMedia() e gerenciar o stream e as constraints , preciso de uma abstração em um pequeno lib que possa alternar entre a câmera e obter a resolução desejada.
Outra câmera JS? Sim! Encontrei webcamjs e jpeg_camera, mas preciso mudar facilmente do environment e user da câmera. Você precisa criar a restrição para getUsermedia () ... outra necessidade é ter um sizeFactor em vez de uma 'largura' e 'altura' de fixação que não pode se encaixar na proporção da resolução que a câmera pode escolher.
facing mode ou a câmera deviceId , volte para a câmera padrão.ideal resolution , volte à resolução padrão.maximum resolution da câmera, volta à resolução padrão.image format DATAURI entre jpg ou png .jpg , escolha o compression value é o [0, 1].image mirror se desejar obter um espelho DATAURI da câmera. https://mabelanger.github.io/jslib-html5-camera-photo/
https://caniuse.com/#search=getUsermedia
... (como abril de 2018)
| Face_modes [] | Descrição |
|---|---|
| USUÁRIO | A fonte está voltada para o usuário (uma câmera de auto-visão). |
| AMBIENTE | A fonte está voltada para o usuário (visualizando o ambiente). |
SRC: https://www.w3.org/tr/mediacapture-streams/#dom-videofacingmodeenum
Você pode usar a biblioteca com JavaScript de baunilha, reação, 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 )| parâmetros | Descrição |
|---|---|
| Cameradevice | É a string da câmera FaceMode ou DeviceId |
| resolução | É a resolução object Ex:. { width: 640, height: 480 } |
Se você não especificar nenhuma resolução preferencial e o modo de face, o padrão será usado. A função retorna uma promessa. Se o sucesso das promessas lhe dará o fluxo, se você quiser usá -lo. Se falhar, ele lhe dará o erro.
// 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 ) => { /* ... */ } ) ; Em vez de enfrentar o modo, você pode especificar o DeviceId (câmera) que deseja usar. Para conhecer o ID do dispositivo, você pode obter uma lista deles usando consulte enumerar as câmeras disponíveis, para que você possa iniciar a câmera com o deviceId em vez de voltado para o modo, por exemplo
// 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 ) => { /* ... */ } ) ; Ele tentará o alcance da largura [3840, 2560, 1920, 1280, 1080, 1024, 900, 800, 640, default] PX para levar a largura máxima de 3840 px, se não puder, 2560 px e assim por diante ... até a queda do valor padrão da câmera. O Mode Faceing é opcional.
// It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
. then ( ( stream ) => { /* ... */ } )
. catch ( ( error ) => { /* ... */ } ) ; Função que retorna os dataUri do quadro atual da câmera. Para usar essa função, crie o objeto de configuração com as propriedades correspondentes. Para usar o valor padrão, basta omitir o parâmetro:
sizefactor (número): usado para obter uma resolução desejada. Por exemplo, um fator de tamanho de 1 obtém a mesma resolução da câmera, enquanto o SizeFactor de 0.5 obtém a meia resolução da câmera. O SizeFactor pode estar entre o intervalo de ]0, 1] e o valor padrão é 1 .
ImageType (String): Usado para obter o tipo de imagem desejado entre jpg ou png . Para especificar o imageType, use o constante image_types, por exemplo, para especificar o formato jpg use image_types.jpg. O ImageType padrão é png .
ImageCompression (número): usado para obter a compactação desejada quando jpg é selecionado. Escolha uma compressão entre [0, 1] , 1 é máximo, 0 é mínimo. O valor padrão do valor de imagem é 0.92 .
ISIMAGEMIRROR (booleano): usado para obter um espelho de imagem quando é definido como true , o resultado do dataUri é o espelho dos dados reais da câmera. Muitos softwares que usam espelho da câmera como hangout etc ... Observe que, se você deseja ativar esta opção, para consistência com o vídeo da câmera, você precisa usar o CSS transform: rotateY(180deg) na tag <dide> para refletir o fluxo, porque o fluxo não é espelhado. É aplicado apenas ao Canvas Dateuri. O valor padrão é false (sem espelho).
| Image_types [] | Descrição |
|---|---|
| Jpg | Defina image/jpeg como o URI de dados |
| Png | Defina image/png para o URI de dados (o valor padrão) |
// 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 ) ; A função retorna nulo se não houver um fluxo (câmera não iniciada) ou um objeto com os atributos das configurações da câmera (aspetratio, quadros, altura, largura).
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() devolver uma promessa que recebe uma variedade de mediaDeviceInfo IE:. {kind, label, deviceId} Quando a promessa é cumprida. Cada objeto na matriz descreve uma das câmera disponível (apenas os tipos de dispositivo para os quais a permissão foi concedida estão "disponíveis"). O pedido é significativo - os dispositivos de captura padrão serão listados primeiro. Se a câmera estiver aberta, ela retornará apenas a promessa. Se a câmera estiver próxima, certifique -se de que a câmera seja concedida antes de devolver a promessa, ou seja:. Faça um ciclo de partida/parada da câmera que continua por 20 ms.
cameraPhoto . enumerateCameras ( )
. then ( ( cameras ) => {
cameras . forEach ( ( camera ) => {
let { kind , label , deviceId } = camera ;
let cameraStr = `
kind: ${ kind }
label: ${ label }
deviceId: ${ deviceId }
` ;
console . log ( cameraStr )
} ) ;
} ) Você pode baixar a foto do DATAURI que você levou e passá -la para downloadPhoto() função.
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}` Os parâmetros da função downloadPhoto()
| parâmetros | Descrição |
|---|---|
| DATAURI | É DATAURI da foto |
| prefixfilename | É o prefixo string do nome do arquivo |
| número | É o prefixo número integer do nome do arquivo com 0 preenchimento |
Função que interrompe a câmera. Se o sucesso, nenhum valor será retornado. Pode falhar se não forem para a câmera para parar porque a câmera já foi interrompida ou nunca iniciada. Ele fornecerá um parâmetro de Error('no stream to stop!') . Observe que cada vez que iniciamos a câmera, ela usando essa função de parada para poder aplicar novas restrições.
// 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 ;Um projeto com react é construído com esta biblioteca react-html5-câmera-foto
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 ;Você pode construir o Dist e depois servir com:
$ npm run buildBrowser
$ npm run serve:distOu você pode copiar a pasta dist do repo.
Exemplo :
< script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
...
var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
...
</ scriptEu escolho o Env dev do Create-REACT-APP, mesmo que seja a biblioteca JS de baunilha, porque é simples de usar e muito eficiente para desenvolver, mas você não precisa necessariamente reagir para usá-lo. Se você deseja corrigir bug ou adicionar funcionalidades, contribua :)
