Website : rimsha.abasa.com
backdoor
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
var
/
canvas
/
ui
/
features
/
submit_assignment
/
react
/
Filename :
WebcamModal.jsx
back
Copy
// Copyright (C) 2021 - present Instructure, Inc. // // This file is part of Canvas. // // Canvas is free software: you can redistribute it and/or modify it under // the terms of the GNU Affero General Public License as published by the Free // Software Foundation, version 3 of the License. // // Canvas is distributed in the hope that it will be useful, but WITHOUT ANY // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR // A PARTICULAR PURPOSE. See the GNU Affero General Public License for more // details. // // You should have received a copy of the GNU Affero General Public License along // with this program. If not, see <http://www.gnu.org/licenses/>. import React, {useState, useEffect, useRef} from 'react' import {Button} from '@instructure/ui-buttons' import PropTypes from 'prop-types' import Modal from '@canvas/instui-bindings/react/InstuiModal' import {getUserMedia} from '../util/mediaUtils' import {IconVideoCameraOffSolid} from '@instructure/ui-icons' import {useScope as useI18nScope} from '@canvas/i18n' import Focus from '@canvas/outcomes/react/Focus' const I18n = useI18nScope('webcam_modal') const WebcamModal = ({onSelectImage, open, onDismiss}) => { const videoRef = useRef(null) const [takenImage, setTakenImage] = useState({}) const [permission, setPermission] = useState(null) useEffect(() => { let stream = null if (open) { setPermission(null) const askingTimeout = setTimeout(() => { setPermission('requesting') }, 500) getUserMedia({video: true}) .then(strm => { stream = strm videoRef.current.srcObject = strm setPermission('granted') }) .finally(() => { clearTimeout(askingTimeout) }) .catch(() => { setPermission('not_granted') }) } return () => { if (stream) { stream.getTracks().forEach(track => track.stop()) } } }, [open, videoRef]) const onTakePicture = () => { const video = videoRef.current const canvas = document.createElement('canvas') canvas.width = video.videoWidth canvas.height = video.videoHeight canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height) const dataURL = canvas.toDataURL() canvas.toBlob(blob => { setTakenImage({ dataURL, blob, }) }) } const innerOnSelectImage = () => { onSelectImage(takenImage) setTakenImage({}) } const showVideo = permission === 'granted' && !takenImage.dataURL return ( <Modal open={open} onDismiss={() => { setTakenImage({}) onDismiss() }} size="medium" label={I18n.t('Webcam')} > <Modal.Body> {/* eslint-disable jsx-a11y/media-has-caption */} <video className="webcam-request-video" autoPlay={true} ref={videoRef} style={{display: showVideo ? 'block' : 'none'}} /> {/* eslint-enable jsx-a11y/media-has-caption */} {['requesting', 'not_granted'].includes(permission) && ( <div className="webcam-access-wrapper"> <div> <IconVideoCameraOffSolid size="large" /> <p> <b>{I18n.t('Canvas needs acccess to your camera.')}</b> <br /> {I18n.t('You can provide this access in your browser settings.')} </p> </div> </div> )} {takenImage.dataURL && ( <img src={takenImage.dataURL} style={{width: '100%'}} alt={I18n.t('Captured Image')} /> )} </Modal.Body> {permission === 'granted' && ( <Modal.Footer> {!takenImage.dataURL && ( <Focus> <Button color="primary" onClick={onTakePicture}> {I18n.t('Take Photo')} </Button> </Focus> )} {takenImage.dataURL && ( <> <Button onClick={() => setTakenImage({})} margin="none small"> {I18n.t('Try Again')} </Button> <Focus> <Button color="primary" onClick={innerOnSelectImage}> {I18n.t('Use This Photo')} </Button> </Focus> </> )} </Modal.Footer> )} </Modal> ) } WebcamModal.propTypes = { onSelectImage: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, onDismiss: PropTypes.func.isRequired, } export default WebcamModal