1. まずレンダリングをアップロードします。
2. 私のデモを使用する前に、まず環境を決定してください。アクセスできる環境は 2 つだけです: 1. localhost、2. https
3. コードをアップロードします。！！！！
'@ant-design/pro-form' からタイプ { ProFormInstance } をインポートします。
「@ant-design/pro-card」から ProCard をインポートします。
import {ボタン、列、メッセージ、行} から 'antd';
import {
ProForm、
ProFormDatePicker、
ProFormSelect、
ProFormText、
ProFormTextArea、
StepsForm、
} from '@ant-design/pro-form';
React、{useRef、useState} を 'react' からインポートします。
「瞬間」から瞬間をインポートします。
// import "./components/video.js"
// const [State, setState] = useState();
const waitTime = (時間:
export default () => {
const formRef = useRef<ProFormInstance>();
let video_ref: any = useRef();
let mediaStream:any = null;
// プレビュー キャンバスをクリア
const closeCanas = () => {
let Canvas = document.getElementById("canvas");
// @ts-ignore
let ctx = Canvas.getContext('2d');
ctx.clearRect(0, 20, 400, 320)
}
// カメラを閉じる
const onCloseDevice = ( ) => {
//閉じる
if(mediaStream) {
if (mediaStream.active == true) {
let track = mediaStream.getTracks()[0];
track.stop();
}
}
}
//ビデオカメラ領域を取得
const getMedia = async ()=>{
closeCanas()
let video = video_ref.current;
let 制約 = {
ビデオ: {幅: 480、高さ: 320}、
オーディオ: false
};
try {
mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = メディアストリーム;
video.play();
} catch (e) {
// @ts-ignore
// message.error(e);
console.log(e)
}
}
// getMedia()
const takePhoto = ()=>{
if(mediaStream){
if(mediaStream.active == true){
//获得Canvas对象
let Canvas = document.getElementById("canvas");
// @ts-ignore
let ctx = Canvas.getContext('2d');
ctx.drawImage(video_ref.current, 0, 20, 400, 320);
toBase64()
// onCloseDevice()
}
else{
message.error("デバイスが開かれていません。最初にデバイスを開いてください!") } }
else
{
message.error
("デバイスが開かれていません。最初にデバイスを開いてください!")
}
}
letbase64Data = null;
const toBase64 = () => {
//Canvas オブジェクトを取得
let Canvas = document.getElementById("canvas");
//キャンバスから写真データを取得
// @ts-ignore
var imgData = Canvas.toDataURL( );
//画像をBase64用に変換します
base64Data = imgData.substr(22);
コンソール。 log("base64Data:" +base64Data);
message.success("アップロードに成功しました!")
}
return (
<ProCard>
<StepsForm<{
name: string;
}>
formRef={formRef}
onFinish={async (values) => {
await waitTime(3000);
if(!base64Data){
message.error('写真をアップロードしてください')
return;
}
value.aa = Base64Data
console.log(1111,values);
message.success('正常に送信されました');
onCloseDevice ()
}}
formProps={
{
validateMessages: {
required: 'この項目は必須です',
},
}}
>
<StepsForm.StepForm<{
name: string;
}>
name="base"
title="ホテルのチェックインを開始します"
stepProps={
{
description: '適切な部屋を選択してください、そしてドキュメント情報を入力します',
}}
onFinish={async () => {
console.log(formRef.current?.getFieldsValue());
return true;
}}
>
</StepsForm.StepForm>
<StepsForm.StepForm< {
チェックボックス :文字列;
}>
name="チェックボックス"
title="ライブ写真"
stepProps={
{
description: '乗客の写真をアップロードしてください',
}}
onFinish={async () => {
console.log(formRef.current?.getFieldsValue());
true を返します。
}}
>
<div>
<div style={
{backgroundColor: "#FFF", padding: '20px'}}>
<Row>
<Col spa={12} key={1}>
<h3>实時画面:< /h3>
<video ref={video_ref} id="video" width="400" height="320" コントロール>
</video>
{/*<Row style={
{marginTop:
{marginTop: "36px"}}>
<Button type="primary" style={
{marginLeft: '20px'}} onClick={getMedia}>デバイスを開く</Button>
<Button type="primary" style={
{marginLeft: '20px'}} onClick={takePhoto}>写真を撮ってアップロード</Button>
{/*<Button type="primary" style={
{ marginLeft : '20px'}} onClick={toBase64}>アップロードOK</Button>*/} {/
*<Button type="primary" style={
{marginLeft:'20px'}} onClick={onCloseDevice}>デバイスを閉じる</Button>*/}
{/*<Button type="primary" style={
{marginLeft: '20px'}} onClick={closeCanas}>プレビューをクリア< /ボタン>*/}
</行>
</Col>
<Col>
<div>
<h3>プレビュー:</h3>
<canvas id="canvas" width="400" height="320" ></canvas> </div> </Col>
</Row>
<
/
div >
</div>
{/*<ProFormUploadButton width="sm" name="LK_ZP" label="乗客の写真" max={1} rules={[{ required: true, message: "これは必須フィールドです" } ]}/>*/}
</StepsForm.StepForm>
<StepsForm.StepForm
name="time"
title="チェックインを送信"
stepProps={
{
description: 'ここにナンバー プレート番号などの他の情報を入力します',
}}
>
</StepsForm.StepForm>
</StepsForm>
</ProCard>
);
};