在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:MABelanger/react-html5-camera-photo开源软件地址:https://github.com/MABelanger/react-html5-camera-photo开源编程语言:JavaScript 96.3%开源软件介绍:react-html5-camera-photoThe first objective of this package comes from the need to get the same look and feel of a native mobile camera app but with a react component.
For those who want to build with their own css and need an abstraction of Requirement
LiveDemoDemo of react-html5-camera-photo Required Working Environment for getUserMedia()
Installationnpm install --save react-html5-camera-photo yarn add react-html5-camera-photo TypeScript DefinitionsTypeScript definitions are available from Definitely Typed npm install --save-dev @types/react-html5-camera-photo yarn add --dev @types/react-html5-camera-photo Getting started
Minimum ES6 example import React from 'react';
import Camera from 'react-html5-camera-photo';
import 'react-html5-camera-photo/build/css/index.css';
function App (props) {
function handleTakePhoto (dataUri) {
// Do stuff with the photo...
console.log('takePhoto');
}
return (
<Camera
onTakePhoto = { (dataUri) => { handleTakePhoto(dataUri); } }
/>
);
}
export default App; APIPropTypes
Dynamic : If the prop is dynamic, it mean that you can change that prop dynamically without umount the component (removing it). You can do it by a setState() inside the parent component. Checkout the demo example: ./src/demo/AppWithDynamicProperties.js Example of closing the camera and image preview after take a photoProbably the typical usage of using this component is to preview the image and close the camera after take a photo. You can take a look of all the code including the ImagePreview component here : ./src/demo/AppWithImagePreview import React, { useState } from 'react';
import Camera from 'react-html5-camera-photo';
import 'react-html5-camera-photo/build/css/index.css';
import ImagePreview from './ImagePreview'; // source code : ./src/demo/AppWithImagePreview/ImagePreview
function App (props) {
const [dataUri, setDataUri] = useState('');
function handleTakePhotoAnimationDone (dataUri) {
console.log('takePhoto');
setDataUri(dataUri);
}
const isFullscreen = false;
return (
<div>
{
(dataUri)
? <ImagePreview dataUri={dataUri}
isFullscreen={isFullscreen}
/>
: <Camera onTakePhotoAnimationDone = {handleTakePhotoAnimationDone}
isFullscreen={isFullscreen}
/>
}
</div>
);
}
export default App; Example with all props usedimport React from 'react';
import Camera, { FACING_MODES, IMAGE_TYPES } from 'react-html5-camera-photo';
import 'react-html5-camera-photo/build/css/index.css';
function App (props) {
function handleTakePhoto (dataUri) {
// Do stuff with the photo...
console.log('takePhoto');
}
function handleTakePhotoAnimationDone (dataUri) {
// Do stuff with the photo...
console.log('takePhoto');
}
function handleCameraError (error) {
console.log('handleCameraError', error);
}
function handleCameraStart (stream) {
console.log('handleCameraStart');
}
function handleCameraStop () {
console.log('handleCameraStop');
}
return (
<Camera
onTakePhoto = { (dataUri) => { handleTakePhoto(dataUri); } }
onTakePhotoAnimationDone = { (dataUri) => { handleTakePhotoAnimationDone(dataUri); } }
onCameraError = { (error) => { handleCameraError(error); } }
idealFacingMode = {FACING_MODES.ENVIRONMENT}
idealResolution = {{width: 640, height: 480}}
imageType = {IMAGE_TYPES.JPG}
imageCompression = {0.97}
isMaxResolution = {true}
isImageMirror = {false}
isSilentMode = {false}
isDisplayStartCameraError = {true}
isFullscreen = {false}
sizeFactor = {1}
onCameraStart = { (stream) => { handleCameraStart(stream); } }
onCameraStop = { () => { handleCameraStop(); } }
/>
);
}
export default App; Bug report (issues)Before sending a bug report of camera error, make sure that FAQ
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论