Camera integration through web

gistfile1.txt

import React, { Component } from 'react'

import { Card, Flex } from 'antd-mobile'
import { Text, View, StyleSheet, Image } from 'react-native'

import * as routePaths from '../routes/web/routeConstants'

import order from '../images/odrMdcn@2x.png'
import reOrder from '../images/rflMdcn@2x.png'

const ImageCaptureAPI = window.ImageCapture
const URL = window.URL

const style = StyleSheet.create({
  image: {
    height: 60,
    resizeMode: 'contain',
    paddingBottom: 100
  }
})

class Main extends Component {
  constructor (props) {
    super(props)

    this.state = {
      selectedTab: 'redTab',
      hidden: false
    }
    this.onTakePhotoButtonClick = this.onTakePhotoButtonClick.bind(this)
    this.onGetUserMediaButtonClick = this.onGetUserMediaButtonClick.bind(this)
  }

  // @param {string} path - URL to redirect on a specific page
  navigatePath (path) {
    this.props.history.push(path)
  }

  onGetUserMediaButtonClick () {
    console.log('asd')
    let video = document.getElementById('video')
    navigator.mediaDevices.getUserMedia({video: true})
    .then(mediaStream => {
      video.srcObject = mediaStream
      // video.src = mediaStream
      video.play()
      const track = mediaStream.getVideoTracks()[0]
      this.imageCapture = new ImageCaptureAPI(track)
    })
    .catch(error => console.log(error))
  }

  onTakePhotoButtonClick () {
    const img = document.getElementById('theImage')
    // ...
    this.imageCapture.takePhoto()
      .then(blob => {
        img.src = URL.createObjectURL(blob)
        // img.onload = () => { URL.revokeObjectURL(this.src) }
      })
      .catch(error => console.error('takePhoto() error:', error))
    console.log(img)
  }

  _handleImageChange (e) {
    const img = document.getElementById('theImage')
    let file = e.target.files[0]
    img.src = URL.createObjectURL(file)
  }

  render () {
    return (
      <View>
        <Flex>
          <Flex.Item align='center'>
            <Card>
              <Card.Body>
                <Image
                  source={order}
                  style={style.image}
                  alt='order Medicine'
                  onClick={this.navigatePath.bind(
                    this,
                    routePaths.ORDER_MEDICINE
                  )}
                />
                <Text>Order Medicine </Text>
              </Card.Body>
            </Card>
          </Flex.Item>
          <Flex.Item align='center'>
            <Card>
              <Card.Body>
                <Image
                  source={reOrder}
                  style={style.image}
                  alt='reorder Medicine'
                  onClick={this.navigatePath.bind(this, routePaths.PATIENT_LIST)}
                />
                <Text>Refill Medicine</Text>
              </Card.Body>
            </Card>
          </Flex.Item>
        </Flex>
        {/* <Button onClick={this.onGetUserMediaButtonClick}>Grab video</Button>
        <video id='video' autoplay style={{height: 320, width: 320}} />
        <Button onClick={this.onTakePhotoButtonClick}>Take Photo!</Button> */}
        {/* <form onSubmit={this.onTakePhotoButtonClick}> */}
        <input type='file' accept='image/*' capture='camera' onChange={(e) => this._handleImageChange(e)} />
        <img id='theImage' alt='' width='320' height='320' />
        {/* </form> */}
      </View>
    )
  }
}

export default Main