jslib html5 camera photo
1.0.0
Das erste Ziel dieses Pakets ergibt sich aus der Notwendigkeit, eine JS -Bibliothek zu haben, mit der ich mit den HTML5 -Video- und Canvas -Elementen ein Bild von der mobilen oder Desktop -Kamera über den Browser aufnehmen kann. Anstatt den nativen navigator.mediaDevices.getUserMedia() und den stream und die constraints verwalten, brauche ich eine Abstraktion in eine kleine Lib, die zwischen der Kamera wechseln und die gewünschte Auflösung erhalten kann.
Noch eine JS -Kamera? Ja! Ich habe Webcamjs und jpeg_camera gefunden, aber ich muss einfach von der environment und user wechseln. Sie müssen die Einschränkung für GetUSMedia () aufbauen ... Ein weiterer Bedarf besteht darin, einen sizeFactor anstelle einer Befestigungsbreite und "Höhe" zu haben, die nicht zum Verhältnis der Auflösung passen kann, die die Kamera auswählen kann.
facing mode oder deviceId -Kamera und greifen Sie auf die Standardkamera zurück.ideal resolution fest, fallen Sie auf die Standardauflösung zurück.maximum resolution der Kamera und greifen Sie auf die Standardauflösung zurück.image format zwischen jpg oder png .jpg ist, wählen Sie den compression value zwischen [0, 1].image mirror , wenn Sie einen Spiegeldatenuri der Kamera abrufen möchten. https://mabelanger.github.io/jslib-html5-camera-photo/
https://caniuse.com/#search=getUlermedia
... (als April 2018)
| Gesichtsmodus [] | Beschreibung |
|---|---|
| BENUTZER | Die Quelle steht dem Benutzer (einer Selbstansicht-Kamera) gegenüber. |
| UMFELD | Die Quelle ist vom Benutzer weggeführt (Anzeigen der Umgebung). |
SRC: https://www.w3.org/tr/mediacapture-streams/#dom-videofacingModeenum
Sie können die Bibliothek mit Vanille JavaScript, React, JQuery, Angular ... verwenden ...
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 )| Parameter | Beschreibung |
|---|---|
| Kameradevice | Ist die string der Kamera -Sperrmodus oder DeviceID |
| Auflösung | Ist die object ex:. { width: 640, height: 480 } |
Wenn Sie keine Vorzugsauflösung und den Gesichtsmodus angeben, wird die Standardeinstellung verwendet. Die Funktion gibt ein Versprechen zurück. Wenn der Erfolg des Erfolgs Ihnen den Stream gibt, wenn Sie ihn verwenden möchten. Wenn es fehlschlägt, gibt es Ihnen den Fehler.
// 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 ) => { /* ... */ } ) ; Anstatt den Modus auszusetzen, können Sie die Geräte -ID (Kamera) angeben, die Sie verwenden möchten. Um die Geräte -ID zu kennen, können Sie eine Liste davon über die verfügbaren Kameras finden, damit Sie die Kamera mit dem deviceId starten können, z. B. mit dem Gesichtsmodus, z.
// 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 ) => { /* ... */ } ) ; Es wird den Bereich der Breite [3840, 2560, 1920, 1280, 1080, 1024, 900, 800, 640, default] PX probieren, um die maximale Breite von 3840 PX zu nehmen, wenn es nicht, 2560 px usw. Der Gesichtsmodus ist optional.
// It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
. then ( ( stream ) => { /* ... */ } )
. catch ( ( error ) => { /* ... */ } ) ; Funktion, die die dataUri des aktuellen Rahmens der Kamera zurückgibt. Um diese Funktion zu verwenden, erstellen Sie das Konfigurationsobjekt mit den entsprechenden Eigenschaften. Um den Standardwert zu verwenden, sollten Sie nur den Parameter unterscheiden:
SizeFactor (Nummer): Wird verwendet, um eine gewünschte Auflösung zu erhalten. Beispiel: Ein SizeFactor von 1 erhält die gleiche Auflösung der Kamera, während SizeFactor von 0.5 die halbe Auflösung der Kamera erhalten. Der SizeFactor kann zwischen einem Bereich von ]0, 1] und dem Standardwert 1 liegen.
Imagetype (String): Wird verwendet, um den gewünschten Bildtyp zwischen jpg oder png zu erhalten. Um den Imagetyp anzugeben, verwenden Sie die konstanten Image_types, um beispielsweise das JPG -Format anzugeben. Verwenden Sie Image_types.jpg. Der Standard -Imagetyp ist png .
ImageCompression (Nummer): Wird verwendet, um die gewünschte Komprimierung bei der Auswahl von jpg zu erhalten. Wählen Sie eine Komprimierung zwischen [0, 1] , 1 ist maximal, 0 ist minimal. Die Standardwert -Bildungskompression beträgt 0.92 .
Isimagemirror (boolean): Wird verwendet, um einen Bildspiegel zu erhalten, wenn auf true eingestellt wird. Das Ergebnis des dataUri ist der Spiegel der tatsächlichen Kamerataten. Viele Software, die einen Kameraspiegel wie Hangout usw. verwenden ... Bitte beachten Sie, ob Sie diese Option aktivieren möchten. Für die Konsistenz mit dem Kameravideo müssen Sie CSS transform: rotateY(180deg) zum <video> -Marke, um den Stream zu spiegeln, da der Stream nicht gespiegelt ist. Es gilt nur für die Canvas -Datenuri. Der Standardwert ist false (kein Spiegel).
| Image_types [] | Beschreibung |
|---|---|
| JPG | Setzen Sie Bild image/jpeg auf den Data URI |
| Png | Setzen Sie das image/png auf die Data URI (den Standardwert) (der Standardwert) |
// 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 ) ; Die Funktion gibt NULL zurück, wenn kein Stream vorhanden ist (Kamera nicht gestartet) oder ein Objekt mit den Attributen der Kameraeinstellungen (Aspektratio, Framerate, Höhe, Breite).
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() gibt ein Versprechen zurück, das eine Reihe von MediaDeviceInfo erhält, dh:. {kind, label, deviceId} Wenn das Versprechen erfüllt ist. Jedes Objekt im Array beschreibt eine der verfügbaren Kamera (nur Gerätetypen, für die die Berechtigung erteilt wurde, sind "verfügbar"). Die Reihenfolge ist erheblich - die Standard -Erfassungsgeräte werden zuerst aufgeführt. Wenn die Kamera geöffnet ist, wird das Versprechen nur zurückgegeben. Wenn die Kamera in der Nähe ist, stellt sie sicher, dass die Kamera gewährt wird, bevor das Versprechen zurückgibt, dh dh:. Führen Sie einen Start-/Stopp -Zyklus der Kamera durch, der 20 ms stattfindet.
cameraPhoto . enumerateCameras ( )
. then ( ( cameras ) => {
cameras . forEach ( ( camera ) => {
let { kind , label , deviceId } = camera ;
let cameraStr = `
kind: ${ kind }
label: ${ label }
deviceId: ${ deviceId }
` ;
console . log ( cameraStr )
} ) ;
} ) Sie können ein Foto der von Ihnen übernommenen Datauri herunterladen und an die Funktion downloadPhoto() übergeben.
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}` Die Parameter der Funktion downloadPhoto()
| Parameter | Beschreibung |
|---|---|
| Datauri | Ist Datauri des Fotos |
| Präfixfilename | Ist das string -Präfix des Dateinamens |
| Nummer | Ist das integer -Nummer -Präfix des Dateinamens mit 0 Polsterung |
Funktionieren Sie die Kamera. Wenn es Erfolg hat, wird kein Wert zurückgegeben. Es kann scheitern, wenn es sich um keine Kamera handelt, die anhalten kann, da die Kamera bereits gestoppt oder nie begonnen wurde. Es gibt einen Error('no stream to stop!') . Beachten Sie, dass jedes Mal, wenn wir die Kamera starten, diese Stop -Funktion intern verwendet, um neue Einschränkungen anzuwenden.
// 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 ;Ein Projekt mit React wird mit dieser Bibliothek React-HTML5-Kamera-Photo erstellt
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 ;Sie können das Dist bauen und dann mit:
$ npm run buildBrowser
$ npm run serve:distOder Sie können den DIM -Ordner des Repo kopieren.
Beispiel :
< script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
...
var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
...
</ scriptIch wähle den Env Dev von Create-React-Apps, auch wenn es sich um eine Vanille-JS-Bibliothek handelt, da es einfach zu bedienen ist und wirklich effizient zu entwickeln ist, aber Sie müssen nicht unbedingt reagieren, um sie zu verwenden. Wenn Sie Fehler beheben oder Funktionen hinzufügen möchten, tragen Sie bitte einen Beitrag :)
