jslib html5 camera photo
1.0.0
Tujuan pertama dari paket ini berasal dari kebutuhan untuk memiliki perpustakaan JS yang dapat membantu saya mengambil gambar dari kamera seluler atau desktop melalui browser dengan elemen video dan kanvas HTML5. Jadi alih -alih menggunakan navigator.mediaDevices.getUserMedia() dan mengelola stream dan constraints , saya membutuhkan abstraksi menjadi lib kecil yang dapat beralih di antara kamera dan mendapatkan resolusi yang diinginkan.
Kamera JS Lain? Ya! Saya menemukan webcamjs dan jpeg_camera tetapi saya perlu beralih dengan mudah dari environment kamera dan user . Anda perlu membangun kendala untuk getusermedia () ... kebutuhan lain adalah memiliki sizeFactor alih -alih memperbaiki 'lebar' dan 'tinggi' yang tidak sesuai dengan rasio resolusi yang dapat dipilih oleh kamera.
facing mode atau kamera deviceId , kembali ke kamera default.ideal resolution , kembali ke resolusi default.maximum resolution kamera, kembali ke resolusi default.image format Datauri antara jpg atau png .jpg , pilih compression value adalah antara [0, 1].image mirror jika Anda ingin mendapatkan Datauri Cermin dari kamera. https://mabelanger.github.io/jslib-html5-camera-photo/
https://caniuse.com/#search=getusermedia
... (As April 2018)
| Facing_modes [] | Keterangan |
|---|---|
| PENGGUNA | Sumber menghadap ke arah pengguna (kamera pandang diri sendiri). |
| LINGKUNGAN | Sumber menghadap jauh dari pengguna (melihat lingkungan). |
SRC: https://www.w3.org/tr/mediacapture-streams/#dom-videofacingmodeenum
Anda dapat menggunakan perpustakaan dengan vanilla javascript, bereaksi, jQuery, sudut ...
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 | Keterangan |
|---|---|
| Cameradevice | Adalah string kamera menghapuskan atau deviceid |
| resolusi | Adalah resolusi object Ex:. { width: 640, height: 480 } |
Jika Anda tidak menentukan resolusi yang lebih disukai dan mode menghadap, default digunakan. Fungsi mengembalikan janji. Jika janji -janji sukses itu akan memberi Anda aliran jika Anda ingin menggunakannya. Jika gagal, itu akan memberi Anda kesalahan.
// 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 ) => { /* ... */ } ) ; Alih -alih menghadap mode, Anda dapat menentukan DeviceID (kamera) yang ingin Anda gunakan. Untuk mengetahui ID perangkat, Anda bisa mendapatkan daftar mereka menggunakan lihat Hitung Kamera yang Tersedia, sehingga Anda dapat memulai kamera dengan deviceId alih -alih menghadap ke mode, misalnya
// 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 ) => { /* ... */ } ) ; Ini akan mencoba kisaran lebar [3840, 2560, 1920, 1280, 1080, 1024, 900, 800, 640, default] px untuk mengambil lebar maksimum 3840 px jika tidak bisa, 2560 px dan sebagainya ... sampai jatuh kembali dari nilai default kamera. FacingMode adalah opsional.
// It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
. then ( ( stream ) => { /* ... */ } )
. catch ( ( error ) => { /* ... */ } ) ; Fungsi yang mengembalikan dataUri dari bingkai kamera saat ini. Untuk menggunakan fungsi itu, buat objek konfigurasi dengan properti yang sesuai. Untuk menggunakan nilai default, cukup ommit parameter:
Sizefactor (angka): Digunakan untuk mendapatkan resolusi yang diinginkan. Contohnya, sizefactor dari 1 mendapatkan resolusi kamera yang sama sementara sizefactor 0.5 mendapatkan setengah resolusi kamera. Sizefactor dapat berada di antara kisaran ]0, 1] dan nilai default adalah 1 .
ImageType (String): Digunakan untuk mendapatkan tipe gambar yang diinginkan antara jpg atau png . Untuk menentukan Imagetype Gunakan constant Image_Types, misalnya untuk menentukan format jpg Gunakan image_types.jpg. Imagetype default adalah png .
Imagecompression (NUMBER): Digunakan untuk mendapatkan kompresi yang diinginkan ketika jpg dipilih. Pilih kompresi antara [0, 1] , 1 adalah maksimum, 0 adalah minimum. Nilai default Imagecompression adalah 0.92 .
ISIMAGEMIRROR (BOOLEAN): Digunakan untuk mendapatkan cermin gambar ketika diatur ke true , hasil dataUri adalah cermin dari data kamera yang sebenarnya. Banyak perangkat lunak yang menggunakan Camera Mirror seperti Hangout dll ... Harap dicatat jika Anda ingin mengaktifkan opsi ini, untuk konsistensi dengan video kamera, Anda perlu menggunakan CSS transform: rotateY(180deg) ke tag <video> untuk mencerminkan aliran, karena alirannya tidak dicerminkan. Ini hanya berlaku untuk Datauri Canvas. Nilai defaultnya false (tidak ada cermin).
| Gambar_types [] | Keterangan |
|---|---|
| Jpg | Atur image/jpeg ke data URI |
| Png | Setel image/png ke URI data (nilai default) |
// 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 ) ; Fungsi mengembalikan null jika tidak ada aliran (kamera tidak dimulai) atau objek dengan atribut pengaturan kamera (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() mengembalikan janji yang menerima berbagai mediadeviceInfo yaitu:. {kind, label, deviceId} Saat janji terpenuhi. Setiap objek dalam array menjelaskan salah satu kamera yang tersedia (hanya tipe perangkat yang izinnya telah diberikan "tersedia"). Pesanan ini penting - perangkat penangkapan default akan terdaftar terlebih dahulu. Jika kamera terbuka, itu hanya akan mengembalikan janji. Jika kamera dekat, memastikan bahwa kamera diberikan sebelum mengembalikan janji yaitu:. Lakukan siklus awal/hentikan kamera yang berlangsung selama 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 )
} ) ;
} ) Anda dapat mengunduh foto datauri yang Anda ambil dan lulus ke fungsi 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}` Parameter fungsi downloadPhoto()
| parameter | Keterangan |
|---|---|
| datauri | Adalah datauri dari foto tersebut |
| PrefixFileName | Adalah awalan string dari nama file |
| nomor | Adalah awalan nomor integer dari nama file dengan 0 padding |
Fungsi yang menghentikan kamera. Jika berhasil, tidak ada nilai yang dikembalikan. Itu bisa gagal jika mereka tidak ada kamera untuk berhenti karena kamera sudah dihentikan atau tidak pernah dimulai. Ini akan memberikan parameter Error('no stream to stop!') . Perhatikan bahwa setiap kali kita memulai kamera, secara internal menggunakan fungsi berhenti ini untuk dapat menerapkan kendala baru.
// 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 ;Proyek dengan React is Build dengan perpustakaan ini 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 ;Anda dapat membangun dist dan kemudian menyajikannya dengan:
$ npm run buildBrowser
$ npm run serve:distAtau Anda dapat menyalin folder Dist dari repo.
Contoh :
< script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
...
var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
...
</ scriptSaya memilih Env Dev of Create-React-App bahkan jika itu adalah perpustakaan Vanilla JS karena mudah digunakan dan sangat efisien untuk dikembangkan tetapi Anda tidak perlu bereaksi untuk menggunakannya. Jika Anda ingin memperbaiki bug atau menambahkan fungsi, silakan berkontribusi :)
