jslib html5 camera photo
1.0.0
วัตถุประสงค์แรกของแพ็คเกจนี้มาจากความต้องการที่จะมีไลบรารี JS ที่สามารถช่วยฉันในการจับภาพจากกล้องมือถือหรือกล้องเดสก์ท็อปผ่านเบราว์เซอร์ด้วยวิดีโอ HTML5 และองค์ประกอบผ้าใบ ดังนั้นแทนที่จะใช้ navigator.mediaDevices.getUserMedia() และจัดการ stream และ constraints ฉันต้องการสิ่งที่เป็นนามธรรมลงใน LIB ขนาดเล็กที่สามารถสลับระหว่างกล้องและรับความละเอียดที่ต้องการ
กล้อง JS อื่น? ใช่! ฉันพบ webcamjs และ jpeg_camera แต่ฉันต้องการเปลี่ยนจาก environment กล้องและ user อย่างง่ายดาย คุณต้องสร้างข้อ จำกัด สำหรับ getusermedia () ... ความต้องการอื่นคือการมี sizeFactor แทนการแก้ไข 'ความกว้าง' และ 'ความสูง' ที่ไม่สามารถพอดีกับอัตราส่วนของความละเอียดที่กล้องสามารถเลือกได้
facing mode หรือกล้อง deviceId กลับไปที่กล้องเริ่มต้นideal resolution ย้อนกลับไปที่ความละเอียดเริ่มต้นmaximum resolution ของกล้องกลับไปที่ความละเอียดเริ่มต้นimage format Datauri ระหว่าง jpg หรือ pngjpg ให้เลือก compression value คือระหว่าง [0, 1]image mirror Datauri หากคุณต้องการรับ Datauri กระจกของกล้อง https://mabelanger.github.io/jslib-html5-camera-photo/
https://caniuse.com/#search=getusermedia
... (เป็นเดือนเมษายน 2018)
| facing_modes [] | คำอธิบาย |
|---|---|
| ผู้ใช้ | แหล่งที่มาหันไปหาผู้ใช้ (กล้องดูตัวเอง) |
| สิ่งแวดล้อม | แหล่งที่มากำลังเผชิญหน้ากับผู้ใช้ (ดูสภาพแวดล้อม) |
SRC: https://www.w3.org/tr/mediacapture-streams/#dom-videofacingmodeenum
คุณสามารถใช้ห้องสมุดกับวานิลลาจาวาสคริปต์, ตอบสนอง, 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 | string ของกล้องหันหน้าไปทางหรือ deviceId |
| ปณิธาน | เป็นความละเอียด object เช่น: { 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 ) => { /* ... */ } ) ; แทนที่จะเป็นโหมดหันหน้าไปทางคุณสามารถระบุอุปกรณ์ (กล้อง) ที่คุณต้องการใช้ หากต้องการทราบรหัสอุปกรณ์คุณจะได้รับรายการของพวกเขาโดยใช้การระบุกล้องที่มีอยู่เพื่อให้คุณสามารถเริ่มกล้องด้วย 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] PX เพื่อใช้ความกว้างสูงสุด 3840 PX หากไม่สามารถ, 2560 px และอื่น ๆ ... จนกระทั่งลดลงของค่าเริ่มต้นของกล้อง 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 (หมายเลข): ใช้เพื่อรับความละเอียดที่ต้องการ ตัวอย่างขนาด 1 ได้รับความละเอียดเหมือนกันของกล้องในขณะที่ sizefactor 0.5 ได้รับความละเอียดครึ่งหนึ่งของกล้อง SizeFactor สามารถอยู่ระหว่างช่วง ]0, 1] และค่าเริ่มต้นคือ 1
ImageType (String): ใช้เพื่อรับประเภทภาพที่ต้องการระหว่าง jpg หรือ png ในการระบุ imageType ให้ใช้ Image_Types คงที่ตัวอย่างเช่นเพื่อระบุรูปแบบ JPG ให้ใช้ image_types.jpg imageType เริ่มต้นคือ png
ImageCompression (หมายเลข): ใช้เพื่อรับการบีบอัดที่ต้องการเมื่อเลือก jpg เลือกการบีบอัดระหว่าง [0, 1] , 1 สูงสุด, 0 เป็นขั้นต่ำ ค่าเริ่มต้น imagecompression คือ 0.92
IsimageMirror (บูลีน): ใช้เพื่อรับกระจกภาพเมื่อตั้งค่าเป็น 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 ) ; ฟังก์ชั่นส่งคืนค่า null หากไม่มีสตรีม (ไม่เริ่มกล้อง) หรือวัตถุที่มีแอตทริบิวต์การตั้งค่ากล้องของ (aspectratio, framerate, ความสูง, ความกว้าง)
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} เมื่อสัญญาเป็นจริง แต่ละวัตถุในอาร์เรย์อธิบายหนึ่งในกล้องที่มีอยู่ (เฉพาะประเภทอุปกรณ์ที่ได้รับอนุญาตคือ "พร้อมใช้งาน") คำสั่งซื้อมีความสำคัญ - อุปกรณ์การจับภาพเริ่มต้นจะถูกระบุไว้ก่อน หากกล้องเปิดอยู่มันจะส่งคืนสัญญาเท่านั้น หากกล้องอยู่ใกล้แล้วให้แน่ใจว่าได้รับกล้องก่อนที่จะส่งคืนสัญญาเช่น: ทำวงจรเริ่ม/หยุดของกล้องที่เปิดอยู่ 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 | เป็นข้อมูลของภาพถ่าย |
| Prefixfilename | เป็นคำนำหน้า string ของชื่อไฟล์ |
| ตัวเลข | เป็นคำนำหน้าหมายเลข integer ของชื่อไฟล์ที่มี 0 padding |
ฟังก์ชั่นที่หยุดกล้อง หากประสบความสำเร็จจะไม่มีการส่งคืนค่า อาจล้มเหลวได้หากไม่มีกล้องหยุดเพราะกล้องหยุดลงหรือไม่เริ่มต้น มันจะให้พารามิเตอร์ของ 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 ของ repo
ตัวอย่าง :
< script src =" /jslib-html5-camera-photo.min.js " > </ script >
< script >
...
var FACING_MODES = JslibHtml5CameraPhoto . FACING_MODES ;
var cameraPhoto = new JslibHtml5CameraPhoto . default ( videoElement ) ;
...
</ scriptฉันเลือก env dev ของ create-react-app แม้ว่าจะเป็น Vanilla JS Library เพราะมันใช้งานง่ายและมีประสิทธิภาพในการพัฒนา แต่คุณไม่จำเป็นต้องตอบสนองต่อการใช้งาน หากคุณต้องการแก้ไขข้อผิดพลาดหรือเพิ่ม functionalities โปรดมีส่วนร่วม :)
