jslib html5 camera photo
1.0.0
Первая цель этого пакета заключается в том, чтобы иметь библиотеку JS, которая может помочь мне снять изображение с мобильной или настольной камеры через браузер с помощью видео HTML5 и элементов холста. Таким образом, вместо использования собственного navigator.mediaDevices.getUserMedia() и управлять stream и constraints , мне нужна абстракция в небольшую либерацию, которая может переключаться между камерой и получить желаемое разрешение.
Еще одна камера JS? Да! Я нашел webcamjs и 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.org/tr/mediacapture-streams/#dom-videofacingmodeenum
Вы можете использовать библиотеку с ванильным 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 )| параметры | Описание |
|---|---|
| Cameradevice | Является ли string камеры лиц или DeviceID |
| разрешение | Это разрешение object Ex:. { 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 (камера), который вы хотите использовать. Чтобы узнать идентификатор устройства, вы можете получить их список, используя перечисление доступных камер, чтобы вы могли запустить камеру с помощью 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 текущей кадра камеры. Чтобы использовать эту функцию, создайте объект конфигурации с соответствующими свойствами. Чтобы использовать значение по умолчанию, просто отмените параметр:
SizeFactor (номер): используется для получения желаемого разрешения. Например, размер значения 1 получает одинаковое разрешение с камерой, в то время как размеры 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 (Boolean): используется для получения зеркала изображения, когда установлено значение true , результатом dataUri является зеркало фактических данных камеры. Много программного обеспечения, в котором используются зеркало камеры, такие как Hangout и т. Д. ... Обратите внимание, что если вы хотите включить эту опцию, для согласованности с видео с камерой необходимо использовать CSS transform: rotateY(180deg) для тега <Deague> для зеркала потока, потому что поток не отражается. Это относится только к Canvas Datauri. Значение по умолчанию false (без зеркала).
| Image_types [] | Описание |
|---|---|
| JPG | Установить image/jpeg в URI DATA |
| Пнн | Установите image/png в URI DATA (значение по умолчанию) |
// 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, кадр, высота, ширина).
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 Vanilla, потому что ее просто использовать и действительно эффективно развивать, но вам не обязательно нужно реагировать, чтобы использовать его. Если вы хотите исправить ошибку или добавить функциональные возможности, внести свой вклад :)
