{"version":3,"file":"component---src-pages-advanced-user-website-integration-ws-stream-wqhd-cameras-index-mdx-5148db9109cf41a02799.js","mappings":"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","sources":["webpack://instar-wiki/./src/pages/Advanced_User/Website_Integration/WS_Stream_WQHD_Cameras/index.mdx"],"sourcesContent":["import * as React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport NavButtons from 'components/Advanced_User/NavButtons';\nimport BreadCrumbs from 'components/Layout/BreadCrumbs';\nimport SEOHelmet from 'components/Layout/SEOHelmet';\nexport const _frontmatter = {\n \"title\": \"Website integration - WS stream for WQHD cameras\",\n \"path\": \"/Advanced_User/Website_Integration/WS_Stream_WQHD_Cameras/\",\n \"dateChanged\": \"2022-12-08\",\n \"author\": \"Mike Polinowski\",\n \"excerpt\": \"Insert the Websocket HTML5 live video from your WQHD 2k+ camera into your website.\",\n \"image\": \"./AU_SearchThumb_WebsiteIntegration_HD_Cams.png\",\n \"social\": \"/images/Search/AU_SearchThumb_WebsiteIntegration_HD_Cams.webp\",\n \"toc\": \"/images/Search/TOC_Icons/Wiki_Tiles_Advanced_Integration_white.webp\",\n \"chapter\": \"Advanced User\"\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n\n \n \n \n

{`Website integration - WS stream for WQHD cameras`}

\n
\n

{`This manual is `}{`only intended for 1080p Full HD camera models`}{`. For `}{`1080p Full HD camera models`}{` please follow our guide `}{`here`}{`. For `}{`720p HD models`}{` please see the HD guide `}{`here`}{`.`}

\n
\n

{`See also`}{`:`}

\n \n

{`WS Video Stream`}

\n

{`With your INSTAR WQHD cameras you can integrate the HTML5 (plugin-free) websocket video stream directly into a website. We have provided you with the required HTML and JavaScript code in our `}{`download area`}{`.`}

\n

{`To test this code:`}

\n
    \n
  1. {`Simply drag the HTML file and the folder with scripts into the active directory of your web server.`}
    2. \n
  2. {`rename the HTML file to `}{`index.html`}{` and open it in your text or code editor`}
    3. \n
  3. {`specify in the file the address of your camera, the HTTP port, your camera login and the desired stream:`}
    4. \n
\n

{`\n `}{`\n `}{`\n `}{`\n `}{`\n `}{`\n `}{`\n `}{`\n `}{`\n `}

\n
    \n
  • {`ws_protocol`}{` = `}{`ws`}{` or `}{`wss`}{` `}{`*`}
    • \n
  • {`ws_hostname`}{` = `}{`192.168.2.120`}{` (DDNS or local IP)`}
    • \n
  • {`ws_port`}{` = `}{`80`}{` (Camera HTTP or HTTPS Port) `}{`*`}
    • \n
  • {`ws_endpoint`}{` = `}{`/ws`}{` (The URL where the ws stream is served)`}
    • \n
  • {`cam_username`}{` = `}{`admin`}{` (User name for the camera Login)`}
    • \n
  • {`cam_password`}{` = `}{`instar`}{` (User login for the camera Login)`}
    • \n
\n
\n

{`*`}{` Note`}{`: When using TLS (secure websocket) you will have to use a CA signed certificate like from Let's Encrypt. Follow the link at the bottom of this article to a Github repository that helps you to setup a NGINX Docker container you can use to handle the encryption part for you.`}

\n
\n

{`Google Chrome is very strict when it comes to MIME Types (Firefox mostly does not care - it is best to start testing in Firefox and then try to get the stream to work in Chrome...). Depending on your settings you will have to adjust them here:`}

\n
    \n
  • {`0`}{` = h.264 video & audio`}
    • \n
  • {`1`}{` = h.264 video & NO audio`}
    • \n
  • {`2`}{` = h.265 video & audio`}
    • \n
  • {`3`}{` = h.265 video & NO audio`}
    • \n
\n 
{`// Add media mime type`}{`\n`}{`// 0 => 'video/mp4; codecs=\"avc1.4D001E, mp4a.40.2\"'`}{`\n`}{`// 1 => 'video/mp4; codecs=\"avc1.4D001E\"'`}{`\n`}{`// 2 => 'video/mp4; codecs=\"hev1.2.4.L120.B0, mp4a.40.2\"'`}{`\n`}{`// 3 => 'video/mp4; codecs=\"hev1.2.4.L120.B0\"'`}{`\n`}{`var`}{` codec_mime `}{`=`}{` `}{`0`}{`;`}
\n

{`Then start your web server and open the provided page in your web browser. The code you downloaded above is a minimal example. For a more complete version check:`}

\n

{`\n `}{`\n `}

\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"names":["_frontmatter","layoutProps","MDXLayout","MDXContent","_ref","components","props","_objectWithoutProperties","_excluded","mdx","Object","assign","mdxType","SEOHelmet","title","dateChanged","author","tag","description","image","twitter","location","pathname","BreadCrumbs","locationBC","locationDE","locationEN","locationFR","crumbLabel","NavButtons","parentName","isMDXComponent"],"sourceRoot":""}