{"version":3,"file":"component---src-pages-erweitert-webseiten-einbindung-ws-stream-wqhd-cameras-index-mdx-a3b1ba2ba3a3a9f20816.js","mappings":"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","sources":["webpack://instar-wiki/./src/pages/Erweitert/Webseiten_Einbindung/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\n/* @jsx mdx */\n\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 für WQHD-Kameras\",\n \"path\": \"/Erweitert/Webseiten_Einbindung/WS_Stream_WQHD_Cameras/\",\n \"dateChanged\": \"2022-12-08\",\n \"author\": \"Mike Polinowski\",\n \"excerpt\": \"Fügen Sie das Websocket-HTML5-Live-Video von Ihrer WQHD 2k+ Kamera in Ihre Website ein.\",\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 für WQHD-Kameras`}

\n
\n

{`Dieser Artikel ist `}{`nur für 1440p WQHD Kameramodelle`}{` gedacht. Für `}{`1080p Full HD Kameramodelle`}{` folgen Sie bitte unserer Anleitung `}{`hier`}{`. Für `}{`720p HD-Modelle`}{` lesen Sie bitte die HD-Anleitung `}{`hier`}{`.`}

\n
\n

{`WS Video Stream`}

\n

{`Mit Ihren INSTAR WQHD Kameras können Sie den HTML5 (Plugin-freien) Websocket-Videostream direkt in eine Website einbinden. Den dafür notwendigen HTML- und JavaScript-Code haben wir Ihnen in unserem `}{`Download-Bereich`}{` zur Verfügung gestellt.`}

\n

{`Um diesen Code zu testen:`}

\n
    \n
  1. {`Ziehen Sie einfach die HTML-Datei und den Ordner mit den Skripten in das aktive Verzeichnis Ihres Webservers.`}
    2. \n
  2. {`Benennen Sie die HTML-Datei in `}{`index.html`}{` um und öffnen Sie sie in Ihrem Text- oder Code-Editor.`}
    3. \n
  3. {`Geben Sie in der Datei die Adresse Ihrer Kamera, den HTTP-Port, Ihr Kamera-Login und den gewünschten Stream an:`}
    4. \n
\n

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

\n
    \n
  • {`ws_protocol`}{` = `}{`ws`}{` oder `}{`wss`}{` `}{`*`}
    • \n
  • {`ws_hostname`}{` = `}{`192.168.2.120`}{` (DDNS oder lokale IP)`}
    • \n
  • {`ws_port`}{` = `}{`80`}{` (Kamera HTTP oder HTTPS Port) `}{`*`}
    • \n
  • {`ws_endpoint`}{` = `}{`/ws`}{` (Die URL, unter der der ws-Stream bereitgestellt wird)`}
    • \n
  • {`cam_username`}{` = `}{`admin`}{` (Benutzernamen für die Kamera Login)`}
    • \n
  • {`cam_password`}{` = `}{`instar`}{` (Benutzeranmeldung für die Kamera Login)`}
    • \n
\n
\n

{`*`}{` Hinweis`}{`: Wenn Sie TLS (Secure Websocket) verwenden, müssen Sie ein von einer Zertifizierungsstelle signiertes Zertifikat wie das von Let's Encrypt verwenden. Folgen Sie dem Link am Ende dieses Artikels zu einem Github-Repository, das Ihnen hilft, einen NGINX-Docker-Container einzurichten, der beim Einrichten dieser Vorraussetzung hilft.`}

\n
\n

{`Google Chrome ist sehr streng, wenn es um MIME-Typen geht (Firefox kümmert sich meist nicht darum - am besten beginnen Sie mit dem Test in Firefox und versuchen dann, den Stream in Chrome zum Laufen zu bringen...). Je nach Ihren Kameraeinstellungen müssen Sie diese hier anpassen:`}

\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

{`Starten Sie dann Ihren Webserver und öffnen Sie die bereitgestellte Seite in Ihrem Webbrowser. Der Code, den Sie oben heruntergeladen haben, ist ein Minimalbeispiel. Eine vollständigere Version finden Sie hier:`}

\n

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

\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"names":["_frontmatter","layoutProps","MDXContent","components","props","mdxType","title","dateChanged","author","tag","description","image","twitter","location","pathname","locationBC","locationDE","locationEN","locationFR","crumbLabel","parentName","isMDXComponent"],"sourceRoot":""}