Skip to content

Instantly share code, notes, and snippets.

@phpmaps
Created March 4, 2023 17:23
Show Gist options
  • Save phpmaps/09b55503d1c42a6650576018e8660b30 to your computer and use it in GitHub Desktop.
Save phpmaps/09b55503d1c42a6650576018e8660b30 to your computer and use it in GitHub Desktop.
Camera react-native-webview
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React from 'react';
import { WebView } from 'react-native-webview';
//https://simpl.info/getusermedia/sources/
//https://demo-onboarding.incodesmile.com/incode_internal310/flow/64023c3cabf419406093dab2?region=ALL
//https://davidwalsh.name/demo/camera.php
//https://incodetech-govcheck.s3.us-west-2.amazonaws.com/incode-camera-iframe.html
function App(): JSX.Element {
return (
<WebView
useWebKit
originWhitelist={['*']}
allowsInlineMediaPlayback
bounces={true}
mediaPlaybackRequiresUserAction={false}
mediaCapturePermissionGrantType="grantIfSameHostElsePrompt"
source={{
uri: 'https://incodetech-govcheck.s3.us-west-2.amazonaws.com/incode-camera-iframe.html'
}}
startInLoadingState
scalesPageToFit
javaScriptEnabledAndroid={true}
javaScriptEnabled={true}
style={{ flex: 1 }}
/>
)
}
export default App;
@phpmaps
Copy link
Author

phpmaps commented Mar 4, 2023

{
  "name": "camera",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-webview": "^11.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}


@phpmaps
Copy link
Author

phpmaps commented Mar 4, 2023


<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>


@phpmaps
Copy link
Author

phpmaps commented Mar 4, 2023

This project was created using the react-native-community CLI, @react-native-community/cli.

npx react-native init camera

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment