jslib html5 camera photo
1.0.0
Le premier objectif de ce package vient de la nécessité d'avoir une bibliothèque JS qui peut m'aider à capturer l'image à partir de caméra mobile ou de bureau via le navigateur avec les éléments vidéo et toile HTML5. Ainsi, au lieu d'utiliser le navigator.mediaDevices.getUserMedia() et de gérer le stream et les constraints , j'ai besoin d'une abstraction en une petite lib qui peut basculer entre la caméra et obtenir la résolution souhaitée.
Une autre caméra JS? Oui! J'ai trouvé des webcamjs et jpeg_camera mais je dois passer facilement à partir de environment de la caméra et user . Vous devez construire la contrainte pour getUserMedia () ... un autre besoin est d'avoir un sizeFactor au lieu d'une «largeur» de fixation et de «hauteur» qui ne peut pas correspondre au rapport de la résolution que la caméra peut choisir.
facing mode ou la caméra deviceId , revenez à la caméra par défaut.ideal resolution , revenez à la résolution par défaut.maximum resolution de la caméra, revenez à la résolution par défaut.image format DataUri entre jpg ou png .jpg , choisissez la compression value entre [0, 1].image mirror DataUri si vous souhaitez obtenir un miroir DataUri de la caméra. https://mabelanger.github.io/jslib-html5-camera-photo/
https://caniuse.com/#search=getUserMedia
... (comme avril 2018)
| FACING_MODES [] | Description |
|---|---|
| UTILISATEUR | La source est confrontée à l'utilisateur (une caméra d'auto-vision). |
| ENVIRONNEMENT | La source est confrontée à l'utilisateur (affichant l'environnement). |
SRC: https://www.w3.org/tr/mediacapture-treams/#dom-videofacingmodeenum
Vous pouvez utiliser la bibliothèque avec Vanilla 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 )| paramètres | Description |
|---|---|
| cameradevice | Est la string de la caméra face à la caméra ou de l'appareil |
| résolution | La résolution object est-elle ex:. { width: 640, height: 480 } |
Si vous ne spécifiez aucune résolution et mode de face, par défaut, la valeur par défaut est utilisée. La fonction renvoie une promesse. Si le succès des promesses vous donnera le flux si vous souhaitez l'utiliser. S'il échoue, il vous donnera l'erreur.
// 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 ) => { /* ... */ } ) ; Au lieu de faire face au mode, vous pouvez spécifier l'appareil de périphérique (appareil photo) que vous souhaitez utiliser. Pour connaître l'ID de l'appareil, vous pouvez obtenir une liste d'entre eux en utilisant voir énumérer les caméras disponibles, afin que vous puissiez démarrer la caméra avec le deviceId au lieu de faire face à un mode, par exemple
// 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 ) => { /* ... */ } ) ; Il essaiera la plage de largeur [3840, 2560, 1920, 1280, 1080, 1024, 900, 800, 640, default] PX pour prendre la largeur maximale de 3840 px si elle ne le peut pas, 2560 px et ainsi de suite ... jusqu'à la chute de la valeur par défaut de la caméra. Le FaceingMode est facultatif.
// It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
. then ( ( stream ) => { /* ... */ } )
. catch ( ( error ) => { /* ... */ } ) ; Fonction qui renvoie le dataUri de la trame actuelle de la caméra. Pour utiliser cette fonction, créez l'objet de configuration avec les propriétés correspondantes. Pour utiliser la valeur par défaut, il suffit d'obtenir le paramètre:
SizeFactor (numéro): utilisé pour obtenir une résolution souhaitée. Exemple, un facteur de taille de 1 obtient la même résolution de la caméra tandis que le facteur de taille de 0.5 obtient la demi-résolution de la caméra. Le sizefactor peut être entre la plage de ]0, 1] et la valeur par défaut est 1 .
ImageType (String): utilisé pour obtenir le type d'image souhaité entre jpg ou png . Pour spécifier l'imageType, utilisez la constante Image_Types, par exemple pour spécifier le format JPG Utilisez image_types.jpg. L'imagetype par défaut est png .
ImageCompression (numéro): utilisé pour obtenir la compression souhaitée lorsque jpg est sélectionné. Choisissez une compression entre [0, 1] , 1 est maximum, 0 est minimum. La valeur par défaut ImageCompression est 0.92 .
iSimageMirror (booléen): utilisé pour obtenir un miroir d'image Quand est défini sur true , le résultat du dataUri est le miroir des données réelles de la caméra. De nombreux logiciels qui utilisent le miroir de la caméra comme Hangout, etc., veuillez noter que si vous souhaitez activer cette option, pour cohérence avec la vidéo de la caméra, vous devez utiliser CSS transform: rotateY(180deg) dans la balise <idevial> pour refléter le flux, car le flux n'est pas en miroir. Il ne s'applique qu'à la toile DataUri. La valeur par défaut est false (pas de miroir).
| Image_types [] | Description |
|---|---|
| Jpg | Définissez image/jpeg sur les données URI |
| PNG | Définissez image/png sur l'URI de données (la valeur par défaut) |
// 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 ) ; La fonction renvoie NULL si aucun flux n'existe (caméra non démarrée) ou un objet avec les attributs de paramètres de la caméra de (aspectratio, framerater, hauteur, largeur).
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() Renvoie une promesse qui reçoit un tableau de MediadeviceInfo IE:. {kind, label, deviceId} lorsque la promesse est tenue. Chaque objet du tableau décrit l'une des caméras disponibles (seuls les types de périphériques pour lesquels l'autorisation a été accordée est "disponible"). L'ordre est significatif - les périphériques de capture par défaut seront répertoriés en premier. Si la caméra est ouverte, elle ne rendra que la promesse. Si la caméra est proche, il s'assure que la caméra est accordée avant de retourner la promesse, à savoir:. Faites un cycle de démarrage / arrêt de la caméra qui dure 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 )
} ) ;
} ) Vous pouvez télécharger une photo de la DataUri que vous avez prise et la transmettre à la fonction 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}` les paramètres de la fonction downloadPhoto()
| paramètres | Description |
|---|---|
| datauri | Est-ce que Datauri de la photo |
| prefixfilename | Est le préfixe string du nom de fichier |
| nombre | Est le préfixe de numéro integer du nom de fichier avec 0 rembourrage |
Fonction qui arrête la caméra. Si elle réussit, aucune valeur n'est renvoyée. Cela peut échouer s'ils ne sont pas des caméras pour s'arrêter car la caméra a déjà été arrêtée ou jamais démarrée. Il donnera un paramètre d' Error('no stream to stop!') . Notez que chaque fois que nous commençons la caméra, il en utilisant en interne cette fonction d'arrêt pour pouvoir appliquer de nouvelles contraintes.
// 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 ;Un projet avec React est construit avec cette bibliothèque 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 ;Vous pouvez construire le dist, ensuite le servir avec:
$ npm run buildBrowser
$ npm run serve:distOu vous pouvez copier le dossier dist du dépôt.
Exemple :
< script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
...
var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
...
</ scriptJe choisis l'Env Dev de Create-React-App même s'il s'agit de la bibliothèque Vanilla JS car il est simple à utiliser et vraiment efficace à développer, mais vous n'avez pas nécessairement besoin de réagir pour l'utiliser. Si vous souhaitez corriger le bug ou ajouter des fonctionnalités, veuillez contribuer :)
