{"version":3,"sources":["webpack:///./src/assets/images/Software/IPhone_App_NEW_(5).png","webpack:///./src/components/Products/Software/instarvision-iPhone-ddns-floating-gallery.jsx","webpack:///./src/pages/Software/iOS/InstarVision/iPhone/DDNS/index.jsx","webpack:///./src/assets/images/Software/IPhone_App_NEW_(1).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(6).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(9).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(4).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(3).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(8).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(2).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(10).png","webpack:///./src/assets/images/Software/IPhone_App_NEW_(7).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","iPhone06","iPhone07","iPhone08","iPhone09","iPhone10","React","Component","withStyles","backgroundColor","palette","background","width","display","justifyContent","maxHeight","margin","marginBottom","withTheme","styles","floatingbutton","float","presets","brand","color","seodata","ButtonLink01","forwardRef","ref","role","marginTop","location","Fragment","SEOHelmet","title","description","image","pathname","pills","pill","link","Button","href","previousTitle","previousLink","nextTitle","nextLink"],"mappings":"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","file":"component---src-pages-software-i-os-instar-vision-i-phone-ddns-index-jsx-ddd9d4c42a1f6fa78a65.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(5)-b8df0d0351664c100a9815bd24052aea.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_(3).png'\nimport iPhone04 from '../../../assets/images/Software/IPhone_App_NEW_(4).png'\nimport iPhone05 from '../../../assets/images/Software/IPhone_App_NEW_(5).png'\nimport iPhone06 from '../../../assets/images/Software/IPhone_App_NEW_(6).png'\nimport iPhone07 from '../../../assets/images/Software/IPhone_App_NEW_(7).png'\nimport iPhone08 from '../../../assets/images/Software/IPhone_App_NEW_(8).png'\nimport iPhone09 from '../../../assets/images/Software/IPhone_App_NEW_(9).png'\nimport iPhone10 from '../../../assets/images/Software/IPhone_App_NEW_(10).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            <Tab label=\"Schritt VI\" />\n            <Tab label=\"Schritt VII\" />\n            <Tab label=\"Schritt VIII\" />\n            <Tab label=\"Schritt IX\" />\n            <Tab label=\"Schritt X\" />\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 IP 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/DDNS/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/Remote_Access/\">1080p</Link>) oder wählen Sie manuell das Kameramodell.\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> Wählen Sie den Hersteller Ihrer Kamera.<br /><br />\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> Wählen Sie Ihr Kameramodell.<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            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[06]</strong> Nach dem Auswählen der Kamera drücken Sie bitte Weiter um fortzufahren.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone06} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[07]</strong> Geben Sie einen Namen für Ihre Kamera und drücken Sie Weiter um fortzufahren.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone07} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[08]</strong> Geben Sie die DDNS-Adresse Ihrer Kamera (<Link to=\"/Web_User_Interface/720p_Series/Network/DDNS/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/Remote_Access/\">1080p</Link>) ein oder die lokale IP Adresse (<Link to=\"/Web_User_Interface/720p_Series/Network/IP_Configuration/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/IP_Configuration/\">1080p</Link>) und klicken Sie auf Weiter um fortzufahren.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone08} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[09]</strong> Geben Sie den LAN (HTTP) Port (<Link to=\"/Web_User_Interface/720p_Series/Network/IP_Configuration/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/IP_Configuration/\">1080p</Link>) Ihrer Kamera ein und klicken Sie auf Weiter um fortzufahren.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone09} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[10]</strong> Geben Sie den Benutzernamen Ihres Kameralogins (<Link to=\"/Web_User_Interface/720p_Series/System/User/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/System/User/\">1080p</Link>) ein und klicken Sie auf Weiter um fortzufahren.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone10} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[11]</strong> Geben Sie das Kennwort Ihres Kameralogins(<Link to=\"/Web_User_Interface/720p_Series/System/User/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/System/User/\">1080p</Link>) ein und klicken Sie auf Weiter um fortzufahren.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone09} className={classes.images} />\n              </div>\n            </TabContainer>\n            <TabContainer dir={theme.direction}>\n              <div className={classes.textcontainer}>\n                <strong>[12]</strong> Sie können auf das blaue + tippen, um eine lokale IP und einen lokalen Port hinzuzufügen. Jetzt können Sie Ihre Einstellungen testen und danach auf Speichern drücken um die Kamera hinzuzufügen.\n                </div>\n              <div className={classes.imagecontainer}>\n                <img alt=\"InstarVision Android App\" src={iPhone10} 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'\nimport Button from '@material-ui/core/Button'\n\nimport presets from \"../../../../../../utils/presets\"\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-ddns-floating-gallery\"\n\nconst styles = {\n  floatingbutton: {\n    float: 'right',\n    background: presets.brand,\n    color: 'white!important',\n  },\n}\n\nconst seodata = {\n  title: 'iPhone App InstarVision',\n  description: 'The DDNS Access gives you full access to all your cameras functions. As well as allowing you to access its web user interface through your browser.',\n  image: '/images/Search/P_SearchThumb_InstarVision_iOS.png'\n};\n\nconst ButtonLink01 = React.forwardRef((props, ref) => <Link to=\"/Software/Mobile_Access_Over_HTTPS/\"  role=\"button\" {...props} ref={ref} />)\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 DDNS</em></h3>\n      <p>Vous avez manqué l&apos;audio avec votre modèle 1080p?\n        <Button variant=\"contained\" color=\"primary\" className={classes.floatingbutton} component={ButtonLink01}>\n          Audio & HTTPS\n        </Button>\n      </p>\n      <br />\n      <p>Après avoir installé la nouvelle version, lancez l&apos;app et faites glisser vers la droite pour entrer dans l&apos;onglet Caméras. Le symbole <strong>+</strong> en haut à droite vous permet de choisir entre trois façons d&apos;ajouter votre caméra IP.</p>\n      <br />\n      <br />\n      <FloatingGallery />\n      <br />\n      <br />\n      <h3>Add an INSTAR DDNS IP Camera</h3>\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 Point-2-Point Service please <a href=\"/fr/Software/Android/InstarVision/P2P/\">Continue Reading Here</a>.</td>\n          </tr>\n          <tr>\n            <th>Camera Model</th>\n            <td>InstarVision allows you to add cameras from different manufacturers beside INSTAR. Please choose the correct brand and model of your camera. You can also opt to simply scan your camera&apos;s QRcode from the DDNS menu: (<Link to=\"/Web_User_Interface/720p_Series/Network/DDNS/\">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!</td>\n          </tr>\n          <tr>\n            <th>Camera Name</th>\n            <td>You can choose a name for your camera - the name does not have to be identical with the camera name inside the web user interface.</td>\n          </tr>\n          <tr>\n            <th>Host / IP Address</th>\n            <td>Type your camera&apos;s local IP address (e.g. 192.168.178.26) to access your camera at home or use your DDNS address (e.g. abcd12.ddns-instar.de) when you want to be able to access your camera from the road. Please be aware that you will need a <Link to=\"/Internet_Access/Port_Forwarding/\">Port Forwarding</Link> rule inside your internet router to use the <Link to=\"/Internet_Access/The_DDNS_Service/\">DDNS Service</Link>!</td>\n          </tr>\n          <tr>\n            <th>Port</th>\n            <td>Type in the camera&apos;s http port, that can be found and set in the camera&apos;s web user interface: (<Link to=\"/Web_User_Interface/720p_Series/Network/IP_Configuration/\">720p</Link> / <Link to=\"/Web_User_Interface/1080p_Series/Network/IP_Configuration/\">1080p</Link>). The default value is 80 - but we recommend that you change it to the port 8081 or higher. Please be aware that you will need a <Link to=\"/Internet_Access/Port_Forwarding/\">Port Forwarding</Link> rule inside your internet router to use the <Link to=\"/Internet_Access/The_DDNS_Service/\">DDNS Service</Link>!</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/Android/InstarVision/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=\"P2P Menu\"\n        nextLink=\"/fr/Software/iOS/InstarVision/iPhone/P2P/\" />\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_(1)-ab5aeaebf86f4c17380dabe387c9b8a9.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(6)-a7a7065111ba12fe5ba13767552a52d2.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(9)-b51ad330204c72f0940948e90bb6887b.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(4)-ca4f25f641dbbf2f9712066a7ec7f403.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(3)-c1651d5a4d8ae4aa82c3008896d4e03e.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(8)-733929ddf226acef5bd58cc5a0a2bff7.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(2)-2e5ca2218768b7235cd0b35d31b8f069.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(10)-3eb34acde5e2eace7540b657ba6cb174.png\";","module.exports = __webpack_public_path__ + \"static/IPhone_App_NEW_(7)-03bf11ea7e396d160e6d71d590ff09dc.png\";"],"sourceRoot":""}