Unverified Commit 8d71849a authored by Pavel Ševčík's avatar Pavel Ševčík
Browse files

created WebcamPayloadModal

parent 3fc78d78
// @flow
import React from 'react';
import AbstractModal from './AbstractModal';
import Webcam from 'react-webcam';
import QrcodeDecoder from 'qrcode-decoder';
const qr = new QrcodeDecoder();
type Props = {};
export default class WebcamPayloadModal extends AbstractModal {
webcamRef = React.createRef<Webcam>();
captureInterval: IntervalID | null = null;
constructor(props: Props) {
const initialState = {};
super(props, 'modal-webcam-payload', initialState);
}
componentDidMount() {
this.captureInterval = setInterval(this.captureImage, 2000);
}
componentWillUnmount() {
if (this.captureInterval) {
clearInterval(this.captureInterval);
}
}
captureImage = async () => {
if (this.webcamRef.current) {
const imageData = this.webcamRef.current.getScreenshot();
if (imageData) {
const result = await qr.decodeFromImage(imageData).catch(err => {
console.log('QR code not readable: ', err);
});
if (result) {
this.props.onScan(result.data);
this.props.onClose();
}
}
}
};
renderTitle() {
return <span>Pairing Payload</span>;
}
renderButtons() {
return <div />;
}
renderBody() {
return (
<div className="row">
<div className="col-sm-12">
Scan your <strong>pairing payload</strong> from Samourai Wallet, go to{' '}
<strong>Settings/Transactions/Experimental</strong>
<div className="text-center pt-4">
<Webcam
ref={this.webcamRef}
audio={false}
width={300}
height={300}
screenshotQuality={1}
screenshotFormat={'image/png'}
videoConstraints={{
width: 300,
height: 300,
facingMode: 'user'
}}
/>
</div>
</div>
</div>
);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment