{"version":3,"sources":["webpack:///./src/assets/images/Software/IPhone_App_NEW_(13).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(15).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(1).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(14).png","webpack:///./src/components/Products/Software/instarvision-iPhone-p2p-floating-gallery.jsx","webpack:///./src/pages/Software/iOS/InstarVision/iPhone/P2P/index.jsx","webpack:///./src/assets/images/Software/IPhone_App_NEW_(2).png"],"names":["module","exports","TabContainer","props","children","dir","Typography","component","style","padding","FloatingGallery","state","value","handleChange","event","setState","handleChangeIndex","index","render","this","classes","theme","className","root","AppBar","position","topbar","Tabs","onChange","indicatorColor","variant","scrollButtons","Tab","label","Paper","paper","elevation","axis","direction","onChangeIndex","textcontainer","imagecontainer","alt","src","iPhone01","images","iPhone02","to","iPhone03","iPhone04","iPhone05","React","Component","withStyles","backgroundColor","palette","background","width","display","justifyContent","maxHeight","margin","marginBottom","withTheme","seodata","marginTop","alertbox","borderRadius","boxShadow","color","location","Fragment","SEOHelmet","title","description","image","pathname","pills","pill","link","href","previousTitle","previousLink","nextTitle","nextLink"],"mappings":"kFAAAA,EAAOC,QAAU,IAA0B,mE,uBCA3CD,EAAOC,QAAU,IAA0B,mE,qBCA3CD,EAAOC,QAAU,IAA0B,kE,uBCA3CD,EAAOC,QAAU,IAA0B,mE,qWCoB3C,SAASC,EAAaC,GAAQ,IACpBC,EAAkBD,EAAlBC,SAAUC,EAAQF,EAARE,IAElB,OACE,kBAACC,EAAA,EAAD,CAAYC,UAAU,MAAMF,IAAKA,EAAKG,MAAO,CAAEC,QAAS,KACrDL,GAUP,IAyBMM,E,oJACJC,MAAQ,CACNC,MAAO,G,EAGTC,aAAe,SAACC,EAAOF,GACrB,EAAKG,SAAS,CAAEH,W,EAGlBI,kBAAoB,SAAAC,GAClB,EAAKF,SAAS,CAAEH,MAAOK,K,sCAGzBC,OAAA,WAAU,IAAD,EACoBC,KAAKhB,MAAxBiB,EADD,EACCA,QAASC,EADV,EACUA,MAEjB,OACE,yBAAKC,UAAWF,EAAQG,MACtB,kBAACC,EAAA,EAAD,CAAQC,SAAS,SAASH,UAAWF,EAAQM,QAC3C,kBAACC,EAAA,EAAD,CACEf,MAAOO,KAAKR,MAAMC,MAClBgB,SAAUT,KAAKN,aACfgB,eAAe,UACfC,QAAQ,aACRC,cAAc,QAEd,kBAACC,EAAA,EAAD,CAAKC,MAAM,cACX,kBAACD,EAAA,EAAD,CAAKC,MAAM,eACX,kBAACD,EAAA,EAAD,CAAKC,MAAM,gBACX,kBAACD,EAAA,EAAD,CAAKC,MAAM,eACX,kBAACD,EAAA,EAAD,CAAKC,MAAM,gBAGf,kBAACC,EAAA,EAAD,CAAOZ,UAAWF,EAAQe,MAAOC,UAAW,GAC1C,kBAAC,IAAD,CACEC,KAA0B,QAApBhB,EAAMiB,UAAsB,YAAc,IAChDrB,MAAOE,KAAKR,MAAMC,MAClB2B,cAAepB,KAAKH,mBAEpB,kBAACd,EAAD,CAAcG,IAAKgB,EAAMiB,WACvB,yBAAKhB,UAAWF,EAAQoB,eACtB,wCADF,wEAC4F,qCAD5F,oEAGA,yBAAKlB,UAAWF,EAAQqB,gBACtB,yBAAKC,IAAI,2BAA2BC,IAAKC,IAAUtB,UAAWF,EAAQyB,WAG1E,kBAAC3C,EAAD,CAAcG,IAAKgB,EAAMiB,WACvB,yBAAKhB,UAAWF,EAAQoB,eACtB,wCADF,eACmC,mDADnC,yCACyG,6BAAM,8BAE/G,yBAAKlB,UAAWF,EAAQqB,gBACtB,yBAAKC,IAAI,2BAA2BC,IAAKG,IAAUxB,UAAWF,EAAQyB,WAG1E,kBAAC3C,EAAD,CAAcG,IAAKgB,EAAMiB,WACvB,yBAAKhB,UAAWF,EAAQoB,eACtB,wCADF,yEAC6F,kBAAC,OAAD,CAAMO,GAAG,gDAAT,QAD7F,MACmK,kBAAC,OAAD,CAAMA,GAAG,2DAAT,SADnK,qEAGA,yBAAKzB,UAAWF,EAAQqB,gBACtB,yBAAKC,IAAI,2BAA2BC,IAAKK,IAAU1B,UAAWF,EAAQyB,WAG1E,kBAAC3C,EAAD,CAAcG,IAAKgB,EAAMiB,WACvB,yBAAKhB,UAAWF,EAAQoB,eACtB,wCADF,4CACgE,kBAAC,OAAD,CAAMO,GAAG,gDAAT,QADhE,MACsI,kBAAC,OAAD,CAAMA,GAAG,2DAAT,SADtI,0BAC4O,kBAAC,OAAD,CAAMA,GAAG,gDAAT,QAD5O,MACkT,kBAAC,OAAD,CAAMA,GAAG,iDAAT,SADlT,2FAGA,yBAAKzB,UAAWF,EAAQqB,gBACtB,yBAAKC,IAAI,2BAA2BC,IAAKM,IAAU3B,UAAWF,EAAQyB,WAG1E,kBAAC3C,EAAD,CAAcG,IAAKgB,EAAMiB,WACvB,yBAAKhB,UAAWF,EAAQoB,eACtB,wCADF,4FACgH,6BAAK,8BAErH,yBAAKlB,UAAWF,EAAQqB,gBACtB,yBAAKC,IAAI,2BAA2BC,IAAKO,IAAU5B,UAAWF,EAAQyB,e,GA5ExDM,IAAMC,WA4FrBC,eArHA,SAAAhC,GAAK,MAAK,CACvBE,KAAM,CACJ+B,gBAAiBjC,EAAMkC,QAAQC,WAAWrB,MAC1CsB,MAAO,SACPhC,SAAU,YAEZC,OAAQ,CACN4B,gBAAiB,WAEnBb,eAAgB,CACdiB,QAAS,OACTC,eAAgB,UAElBd,OAAQ,CACNe,UAAW,IACXC,OAAQ,GAEVrB,cAAe,CACbsB,aAAc,IAEhB3B,MAAO,CACL1B,QAAS,OAgGqB,CAAEsD,WAAW,GAAhCV,CAAwC3C,GC9IjDsD,EACG,0BADHA,EAES,0JAFTA,EAGG,oD,yFAoBM,CAAEC,UAAW,IAoFbZ,sBArGA,CACba,SAAU,CACRZ,gBAAiB,YACjBa,aAAc,EACdC,UAAW,8BACXV,QAAS,eACTG,OAAQ,SACRpD,QAAS,iBACT4D,MAAO,oBA6FIhB,EAzFf,SAA0BlD,GAAQ,IACxBiB,EAAsBjB,EAAtBiB,QAASkD,EAAanE,EAAbmE,SACjB,OACE,kBAAC,IAAMC,SAAP,KACE,kBAACC,EAAA,EAAD,CAAWC,MAAOT,EAAeU,YAAaV,EAAqBW,MAAOX,EAAeM,SAAUA,EAASM,WAC5G,6DACA,uDAEA,kBAAC,IAAD,CACEC,MACE,CACE,CACEC,KAAM,WACNC,KAAM,iBAER,CACED,KAAM,MACNC,KAAM,qBAER,CACED,KAAM,eACNC,KAAM,kCAER,CACED,KAAM,SACNC,KAAM,4CAKd,mDAAwB,0CACxB,6BACA,0CACA,yBAAKzD,UAAWF,EAAQ8C,UACtB,2BAAG,mHACH,oIAAyG,+DAAzG,oDAAsM,2DAAtM,oDAEF,6BACA,6BACA,kBAAC,EAAD,MACA,6BACA,6BACA,2DACA,+GAAoF,kDAApF,wLAA6S,kBAAC,IAAD,CAAMnB,GAAG,gDAAT,QAA7S,MAAmX,kBAAC,IAAD,CAAMA,GAAG,2DAAT,SAAnX,qbACA,6BACA,6BACA,+BACE,+BACE,4BACE,2CACA,uJAA4H,uBAAGiC,KAAK,8CAAR,yBAA5H,MAEF,4BACE,mCACA,4MAAiL,kBAAC,IAAD,CAAMjC,GAAG,gDAAT,QAAjL,MAAuP,kBAAC,IAAD,CAAMA,GAAG,2DAAT,SAAvP,kMAEF,4BACE,2CACA,4LAEF,4BACE,yCACA,sMAAgL,yCAAhL,MAEF,4BACE,wCACA,mIAA6G,0CAA7G,qDAEF,4BACE,wCACA,2IAAgH,kBAAC,IAAD,CAAMA,GAAG,gDAAT,kBAAhH,iDAIN,6BACA,6BACA,kBAAC,IAAD,CACEkC,cAAc,wBACdC,aAAa,wCACbC,UAAU,iBACVC,SAAS,yD,qBC5GjBpF,EAAOC,QAAU,IAA0B","file":"component---src-pages-software-i-os-instar-vision-i-phone-p-2-p-index-jsx-346363a04a832d348fc3.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(13)-68298026ae637987e047d3d3e340f4dd.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(15)-0a5de5aaefd66c3844eadef0d786b7b8.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(1)-ab5aeaebf86f4c17380dabe387c9b8a9.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(14)-0ca800eaff483eda6db356d2ab712453.png\";","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Link } from \"gatsby\"\n\nimport SwipeableViews from 'react-swipeable-views'\n\nimport { withStyles } from '@material-ui/core/styles'\n// import withRoot from '../../../utils/withRoot'\nimport AppBar from '@material-ui/core/AppBar'\nimport Paper from '@material-ui/core/Paper'\nimport Tabs from '@material-ui/core/Tabs'\nimport Tab from '@material-ui/core/Tab'\nimport Typography from '@material-ui/core/Typography'\n\nimport iPhone01 from '../../../assets/images/Software/IPhone_App_NEW_(1).png'\nimport iPhone02 from '../../../assets/images/Software/IPhone_App_NEW_(2).png'\nimport iPhone03 from '../../../assets/images/Software/IPhone_App_NEW_(14).png'\nimport iPhone04 from '../../../assets/images/Software/IPhone_App_NEW_(13).png'\nimport iPhone05 from '../../../assets/images/Software/IPhone_App_NEW_(15).png'\n\nfunction TabContainer(props) {\n  const { children, dir } = props;\n\n  return (\n    <Typography component=\"div\" dir={dir} style={{ padding: 8 * 3 }}>\n      {children}\n    </Typography>\n  );\n}\n\nTabContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  dir: PropTypes.string.isRequired,\n};\n\nconst styles = theme => ({\n  root: {\n    backgroundColor: theme.palette.background.paper,\n    width: '100 vw',\n    position: 'relative',\n  },\n  topbar: {\n    backgroundColor: '#1274d3',\n  },\n  imagecontainer: {\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  images: {\n    maxHeight: 600,\n    margin: 0,\n  },\n  textcontainer: {\n    marginBottom: 15,\n  },\n  paper: {\n    padding: 15\n  }\n});\n\nclass FloatingGallery extends React.Component {\n  state = {\n    value: 0,\n  };\n\n  handleChange = (event, value) => {\n    this.setState({ value });\n  };\n\n  handleChangeIndex = index => {\n    this.setState({ value: index });\n  };\n\n  render() {\n    const { classes, theme } = this.props;\n\n    return (\n      <div className={classes.root}>\n        <AppBar position=\"static\" className={classes.topbar}>\n          <Tabs\n            value={this.state.value}\n            onChange={this.handleChange}\n            indicatorColor=\"primary\"\n            variant=\"scrollable\"\n            scrollButtons=\"auto\"\n          >\n            <Tab label=\"Schritt I\" />\n            <Tab label=\"Schritt II\" />\n            <Tab label=\"Schritt III\" />\n            <Tab label=\"Schritt IV\" />\n            <Tab label=\"Schritt V\" />\n          </Tabs>\n        </AppBar>\n        <Paper className={classes.paper} elevation={1}>\n          <SwipeableViews\n            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}\n            index={this.state.value}\n            onChangeIndex={this.handleChangeIndex}\n          >\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[01]</strong> Gehen Sie in die Multiansicht oder Kameras Menü und klicken Sie den <strong>+</strong> Button in der oberen rechten Ecke, um Ihre Kamera hinzuzufügen.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone01} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[02]</strong> Wählen Sie <strong>Neue P2P Kamera</strong>, um eine neue IP-Kamera hinzuzufügen.<br /><br />\n              </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone02} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[03]</strong> Scannen Sie entweder den QR Code aus der Weboberfläche Ihrer Kamera (<Link to=\"/Web_User_Interface/720p_Series/Network/P2P/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/Remote_Access/\">1080p</Link>) oder drücken Sie auf Scan um Sie im lokalen Netzwerk zu suchen.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone03} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[04]</strong> Überprüfen Sie die Richtigkeit der UID (<Link to=\"/Web_User_Interface/720p_Series/Network/P2P/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/Remote_Access/\">1080p</Link>), Ihres Admin Logins (<Link to=\"/Web_User_Interface/720p_Series/System/User/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/System/User/\">1080p</Link>) und drücken Sie den Test Button. Drücken Sie danach das Disketten Symbol oben rechts.\n              </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone04} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[05]</strong> Nach dem erfolgreichen Test drücken Sie bitte auf Speichern um Ihre Kamera hinzuzufügen.<br/><br/>\n              </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone05} className={classes.images} />\n              </div>\n            </TabContainer>\n          </SwipeableViews>\n        </Paper>\n      </div>\n    );\n  }\n}\n\nFloatingGallery.propTypes = {\n  classes: PropTypes.object.isRequired,\n  theme: PropTypes.object.isRequired,\n}\n\n// export default withRoot(withStyles(styles, { withTheme: true })(FloatingGallery))\nexport default withStyles(styles, { withTheme: true })(FloatingGallery)","import React from 'react'\nimport Link from 'gatsby-link'\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport SEOHelmet from '../../../../../../components/Layout/SEOHelmet'\nimport Footer from \"../../../../../../components/Layout/footer\"\nimport BreadCrumbs from '../../../../../../components/Layout/breadcrumbs/breadcrumbs'\nimport FloatingGallery from \"../../../../../../components/Products/Software/instarvision-iPhone-p2p-floating-gallery\"\n\nconst seodata = {\n  title: 'iPhone App InstarVision',\n  description: 'The P2P Access does not give you full access to all your cameras functions. But you don´t need to forward a port inside your router and P2P also works.',\n  image: '/images/Search/P_SearchThumb_InstarVision_iOS.png'\n};\n\nconst styles = {\n  alertbox: {\n    backgroundColor: 'indianred',\n    borderRadius: 2,\n    boxShadow: '0 2px 3px 0 rgba(0,0,0,.16)',\n    display: 'inline-block',\n    margin: '16px 0',\n    padding: '15px 15px 15px',\n    color: 'white!important',\n  }\n}\n\nfunction InstarVisionDDNS(props) {\n  const { classes, location } = props;\n  return (\n    <React.Fragment>\n      <SEOHelmet title={seodata.title} description={seodata.description} image={seodata.image} location={location.pathname} />\n      <h1 css={{ marginTop: 0 }}>InstarVision Surveillance Center</h1>\n      <h2>InstarVision iPhone App</h2>\n\n      <BreadCrumbs\n        pills={\n          [\n            {\n              pill: \"Software\",\n              link: \"/fr/Software/\"\n            },\n            {\n              pill: \"iOS\",\n              link: \"/fr/Software/iOS/\"\n            },\n            {\n              pill: \"InstarVision\",\n              link: \"/fr/Software/iOS/InstarVision/\"\n            },\n            {\n              pill: \"iPhone\",\n              link: \"/fr/Software/iOS/InstarVision/iPhone/\"\n            },\n          ]\n        } />\n\n      <h3>Ajouter une Caméra: <em>Accès P2P</em></h3>\n      <br />\n      <h3>Attention:</h3>\n      <div className={classes.alertbox}>\n        <p><strong>Les caméras 1080p utilisent une version P2P améliorée et ne sont pas affectées</strong></p>\n        <p>Lorsque vous vous connectez à votre caméra via P2P, vous ne pourrait pas Passer à la Détection audio, <strong>Régler les Paramètres vidéo</strong> (Débit binaire, contraste, luminosité, etc.) ou <strong>Accéder aux instantanés</strong> sur votre carte SD (l&apos;accès Vidéo disponible).</p>\n      </div>\n      <br />\n      <br />\n      <FloatingGallery />\n      <br />\n      <br />\n      <h3>Add an INSTAR P2P IP Camera</h3>\n      <p>Our HD camera line additionally allows you to add the camera by a so-called p2p (<strong>Point-to-Point</strong>) connection. To establish the p2p connection, choose to add a New p2p Camera, type in the camera&apos;s UID, which can be found on the sticker on the camera and the web user interface (<Link to=\"/Web_User_Interface/720p_Series/Network/P2P/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/Remote_Access/\">1080p</Link>). Or use the QR code scanner to scan your camera&apos;s code. Please be aware that the QR code on the sticker contains your camera&apos;s default login. The QR code in the webUI (Network/P2P) is generated dynamically and will contain your UID as well as your personal camera login. If you change your camera&apos;s administrator login or just activated the p2p service, you first have to restart your camera, before you can access it via your UID.</p>\n      <br />\n      <br />\n      <table>\n        <tbody>\n          <tr>\n            <th>DDNS or P2P</th>\n            <td>First you have to choose to add your camera via its local IP / DDNS address or its P2P UID. For the DDNS Service please <a href=\"/fr/Software/iOS/InstarVision/iPhone/DDNS/\">Continue Reading Here</a>.</td>\n          </tr>\n          <tr>\n            <th>UID</th>\n            <td>You can either search for P2P cameras on your local network (your smartphone has to be connected to your home router´s WiFi network!) or scan the QRcode from the P2P menu: (<Link to=\"/Web_User_Interface/720p_Series/Network/P2P/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/Remote_Access/\">1080p</Link> - it will automatically fill out all the necessary information to add your camera! You can also write down your camera´s UID (User Identification) from the P2P menu and type it in by hand.</td>\n          </tr>\n          <tr>\n            <th>Camera Name</th>\n            <td>Sie können hier einen Namen für Ihre Kamera frei wählen - dies muss nicht der gleiche Name sein, den Sie für die Kamera in der Weboberfläche vergeben habe.</td>\n          </tr>\n          <tr>\n            <th>User Name</th>\n            <td>To access your camera you will need to provide the username you use to log in to your camera&apos;s web user interface. The default username for both HD and VGA cameras is <strong>admin</strong>.</td>\n          </tr>\n          <tr>\n            <th>Password</th>\n            <td>Provide the password you use to log in to your camera&apos;s web user interface. The default password is <strong>instar</strong> for HD cameras and no password for VGA cameras.</td>\n          </tr>\n          <tr>\n            <th>Test/Add</th>\n            <td>Afterwards click on Test to check your configuration. Click on Save once the test was successful. Go to the <Link to=\"/Software/iOS/InstarVision/iPhone/Multiview/\">Multiview Menu</Link> to access your cameras live video stream.</td>\n          </tr>\n        </tbody>\n      </table>\n      <br />\n      <br />\n      <Footer\n        previousTitle=\"InstarVision (iPhone)\"\n        previousLink=\"/fr/Software/iOS/InstarVision/iPhone/\"\n        nextTitle=\"Multiview Menu\"\n        nextLink=\"/fr/Software/iOS/InstarVision/iPhone/Multiview/\" />\n    </React.Fragment>\n  );\n}\n\nInstarVisionDDNS.propTypes = {\n  classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(InstarVisionDDNS);","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(2)-2e5ca2218768b7235cd0b35d31b8f069.png\";"],"sourceRoot":""}