jslib html5 camera photo
1.0.0
يأتي الهدف الأول من هذه الحزمة من الحاجة إلى مكتبة JS التي يمكن أن تساعدني في التقاط صورة من كاميرا الأجهزة المحمولة أو سطح المكتب عبر المتصفح باستخدام عناصر الفيديو HTML5 وعناصر القماش. لذا ، بدلاً من استخدام navigator.mediaDevices.getUserMedia() وإدارة stream constraints ، أحتاج إلى تجريده في lib صغير يمكن أن يتحول بين الكاميرا والحصول على الدقة المطلوبة.
كاميرا JS أخرى؟ نعم! لقد وجدت كاميرات الويب و jpeg_camera ولكني بحاجة إلى التبديل بسهولة من environment الكاميرا user . تحتاج إلى إنشاء القيد من أجل getUsermedia () ... هناك حاجة أخرى هي أن يكون لديك sizeFactor بدلاً من "عرض" التثبيت و "الارتفاع" الذي لا يمكن أن يتناسب مع نسبة الدقة التي يمكن أن تختارها الكاميرا.
facing mode أو الكاميرا deviceId ، ثم عد إلى الكاميرا الافتراضية.ideal resolution ، تعود إلى الدقة الافتراضية.maximum resolution للكاميرا ، وتراجع إلى الدقة الافتراضية.image format Datauri بين jpg أو png .jpg ، فاختر 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
يمكنك استخدام المكتبة مع الفانيليا جافا سكريبت ، رد فعل ، jQuery ، الزاوي ...
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 الكاميرا FacingMode أو 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 (الكاميرا) التي تريد استخدامها. لمعرفة معرف الجهاز ، يمكنك الحصول على قائمة منها باستخدام SEE SEERATER CAMERAS المتوفرة ، بحيث يمكنك بدء تشغيل الكاميرا باستخدام 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 بكسل إذا لم يكن بإمكانه ، 2560 بكسل وهكذا ... حتى تراجع القيمة الافتراضية للكاميرا. مواجهة المواجهة اختيارية.
// It will try the best to get the maximum resolution with the specified facingMode
cameraPhoto . startCameraMaxResolution ( cameraDevice )
. then ( ( stream ) => { /* ... */ } )
. catch ( ( error ) => { /* ... */ } ) ; الوظيفة التي تُرجع dataUri الإطار الحالي للكاميرا. لاستخدام هذه الوظيفة ، قم بإنشاء كائن التكوين مع الخصائص المقابلة. لاستخدام القيمة الافتراضية ، فقط ommit المعلمة:
SizeFactor (رقم): يستخدم للحصول على الدقة المطلوبة. على سبيل المثال ، يحصل SizeFactor of 1 على نفس الدقة للكاميرا بينما يحصل SizeFactor of 0.5 على دقة نصف الكاميرا. يمكن أن يكون SizeFactor بين نطاق ]0, 1] والقيمة الافتراضية هي 1 .
ImageType (سلسلة): تستخدم للحصول على نوع الصورة المطلوب بين jpg أو png . لتحديد صورة ImageType ، استخدم Image_types الثابتة ، على سبيل المثال لتحديد تنسيق JPG ، استخدم Image_types.jpg. التصوير الافتراضي هو png .
التصوير (رقم): يستخدم للحصول على الضغط المطلوب عند تحديد jpg . اختر ضغطًا بين [0, 1] ، 1 هو الحد الأقصى ، 0 هو الحد الأدنى. التصور القيمة الافتراضية هو 0.92 .
isimagemirror (منطقية): تستخدم للحصول على مرآة صورة عندما يتم ضبطها على true ، فإن نتيجة dataUri هي مرآة بيانات الكاميرا الفعلية. العديد من البرامج التي تستخدم مرآة الكاميرا مثل Hangout وما إلى ذلك ... يرجى ملاحظة ما إذا كنت ترغب في تمكين هذا الخيار ، للتناسق مع فيديو الكاميرا ، تحتاج إلى استخدام CSS transform: rotateY(180deg) إلى علامة <video> لعكس الدفق ، لأن الدفق غير متطابق. يتم تطبيقه فقط على Datauri Canvas. القيمة الافتراضية 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 ) ; إرجاع الوظيفة الخالية في حالة عدم وجود دفق (لم يتم تشغيل الكاميرا) أو كائنًا مع سمات إعدادات الكاميرا (SABNERATIO ، 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 ie:. {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 | هل Datauri من الصورة |
| prefixfilename | هو بادئة string اسم الملف |
| رقم | هو بادئة رقم integer صحيح من اسم الملف مع 0 حشوة |
وظيفة التي توقف الكاميرا. إذا نجح ، لا يتم إرجاع أي قيمة. يمكن أن يفشل إذا لم تكن كاميرا للتوقف لأن الكاميرا قد تم إيقافها بالفعل أو تبدأ أبدًا. سوف يعطي معلمة 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 من الريبو.
مثال :
< 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 of create-react-app حتى لو كانت مكتبة الفانيليا JS لأنه من السهل استخدامه وفعالًا لتطويره ولكنك لا تحتاج بالضرورة إلى الرد على استخدامه. إذا كنت ترغب في إصلاح الخلل أو إضافة وظائف ، يرجى المساهمة :)
