{"version":3,"file":"component---src-pages-erweitert-webseiten-einbindung-ws-stream-wqhd-cameras-index-mdx-2c0a64ab0854617040c4.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/* @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 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 <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n    <SEOHelmet title='Website-Integration - WS-Stream für WQHD-Kameras' dateChanged='2022-12-08' author='Mike Polinowski' tag='INSTAR IP Camera' description='Fügen Sie das Websocket-HTML5-Live-Video von Ihrer WQHD 2k+ Kamera in Ihre Website ein.' image='/images/Search/AU_SearchThumb_WebsiteIntegration_HD_Cams.png' twitter='/images/Search/AU_SearchThumb_WebsiteIntegration_HD_Cams.webp' location={props.location.pathname} mdxType=\"SEOHelmet\" />\n    <BreadCrumbs locationBC={props.location} locationDE={props.location.pathname} locationEN='/en/Erweitert/Webseiten_Einbindung/WS_Stream_WQHD_Cameras/' locationFR='/fr/Advanced_User/Website_Integration/WS_Stream_WQHD_Cameras/' crumbLabel=\"Website\" mdxType=\"BreadCrumbs\" />\n    <NavButtons mdxType=\"NavButtons\" />\n    <h1 {...{\n      \"id\": \"website-integration---ws-stream-für-wqhd-kameras\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h1\" {...{\n        \"href\": \"#website-integration---ws-stream-f%C3%BCr-wqhd-kameras\",\n        \"aria-label\": \"website integration   ws stream für wqhd kameras permalink\",\n        \"className\": \"header-link-icon before\"\n      }}><svg parentName=\"a\" {...{\n          \"aria-hidden\": \"true\",\n          \"focusable\": \"false\",\n          \"height\": \"16\",\n          \"version\": \"1.1\",\n          \"viewBox\": \"0 0 16 16\",\n          \"width\": \"16\"\n        }}><path parentName=\"svg\" {...{\n            \"fillRule\": \"evenodd\",\n            \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n          }}></path></svg></a>{`Website-Integration - WS-Stream für WQHD-Kameras`}</h1>\n    <blockquote>\n      <p parentName=\"blockquote\">{`Dieser Artikel ist `}<strong parentName=\"p\">{`nur für 1440p WQHD Kameramodelle`}</strong>{` gedacht. Für `}<strong parentName=\"p\">{`1080p Full HD Kameramodelle`}</strong>{` folgen Sie bitte unserer Anleitung `}<a parentName=\"p\" {...{\n          \"href\": \"/de/Advanced_User/Website_Integration/HTML5_Stream_Full_HD_Cameras/\"\n        }}>{`hier`}</a>{`. Für `}<strong parentName=\"p\">{`720p HD-Modelle`}</strong>{` lesen Sie bitte die HD-Anleitung `}<a parentName=\"p\" {...{\n          \"href\": \"/de/Advanced_User/Website_Integration/HD_Camera_Integration/\"\n        }}>{`hier`}</a>{`.`}</p>\n    </blockquote>\n    <h2 {...{\n      \"id\": \"ws-video-stream\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#ws-video-stream\",\n        \"aria-label\": \"ws video stream permalink\",\n        \"className\": \"header-link-icon before\"\n      }}><svg parentName=\"a\" {...{\n          \"aria-hidden\": \"true\",\n          \"focusable\": \"false\",\n          \"height\": \"16\",\n          \"version\": \"1.1\",\n          \"viewBox\": \"0 0 16 16\",\n          \"width\": \"16\"\n        }}><path parentName=\"svg\" {...{\n            \"fillRule\": \"evenodd\",\n            \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n          }}></path></svg></a>{`WS Video Stream`}</h2>\n    <p>{`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 `}<a parentName=\"p\" {...{\n        \"href\": \"https://wiki.instar.com/dl/Developer/html_ws_client.zip\"\n      }}>{`Download-Bereich`}</a>{` zur Verfügung gestellt.`}</p>\n    <p>{`Um diesen Code zu testen:`}</p>\n    <ol>\n      <li parentName=\"ol\">{`Ziehen Sie einfach die HTML-Datei und den Ordner mit den Skripten in das aktive Verzeichnis Ihres Webservers.`}</li>\n      <li parentName=\"ol\">{`Benennen Sie die HTML-Datei in `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`index.html`}</code>{` um und öffnen Sie sie in Ihrem Text- oder Code-Editor.`}</li>\n      <li parentName=\"ol\">{`Geben Sie in der Datei die Adresse Ihrer Kamera, den HTTP-Port, Ihr Kamera-Login und den gewünschten Stream an:`}</li>\n    </ol>\n    <p><span parentName=\"p\" {...{\n        \"className\": \"gatsby-resp-image-wrapper\",\n        \"style\": {\n          \"position\": \"relative\",\n          \"display\": \"block\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": \"920px\"\n        }\n      }}>{`\n      `}<a parentName=\"span\" {...{\n          \"className\": \"gatsby-resp-image-link\",\n          \"href\": \"/de/static/3fefb07684109baa034edddedc2a7887/966a0/INSTAR_WS_Video_Stream.png\",\n          \"style\": {\n            \"display\": \"block\"\n          },\n          \"target\": \"_blank\",\n          \"rel\": \"noopener\"\n        }}>{`\n    `}<span parentName=\"a\" {...{\n            \"className\": \"gatsby-resp-image-background-image\",\n            \"style\": {\n              \"paddingBottom\": \"20.869565217391305%\",\n              \"position\": \"relative\",\n              \"bottom\": \"0\",\n              \"left\": \"0\",\n              \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAA7rAAAO6wFxzYGVAAAAyUlEQVQI1z3LW2+CMBiAYW2pOuhXDqWllWBKrSecjA6VTBdv/P//aWEm3rwXb/JMNGtoeYbVjeQthg1i2zA5FuWN6zvXg1w98uUdeA/8DJmX6qL1T5g0iNYY7IRQm1W+bp/SDpE4ztIdAhuneyH6Ul2k6ufminWHixNKNtPITCODYJQjXlAn9MntfoulF6rjsp0zR+m+Yt8u+cqhIXYg6jNItxhsAOuArV9yxB/gxvVfTG1ALQEbw0HHncu8idtZfSWVx6F5mzf+A6ziFvLU6m6TAAAAAElFTkSuQmCC')\",\n              \"backgroundSize\": \"cover\",\n              \"display\": \"block\"\n            }\n          }}></span>{`\n  `}<picture parentName=\"a\">{`\n          `}<source parentName=\"picture\" {...{\n              \"srcSet\": [\"/de/static/3fefb07684109baa034edddedc2a7887/e4706/INSTAR_WS_Video_Stream.avif 230w\", \"/de/static/3fefb07684109baa034edddedc2a7887/d1af7/INSTAR_WS_Video_Stream.avif 460w\", \"/de/static/3fefb07684109baa034edddedc2a7887/7f308/INSTAR_WS_Video_Stream.avif 920w\", \"/de/static/3fefb07684109baa034edddedc2a7887/81785/INSTAR_WS_Video_Stream.avif 944w\"],\n              \"sizes\": \"(max-width: 920px) 100vw, 920px\",\n              \"type\": \"image/avif\"\n            }}></source><source parentName=\"picture\" {...{\n              \"srcSet\": [\"/de/static/3fefb07684109baa034edddedc2a7887/a0b58/INSTAR_WS_Video_Stream.webp 230w\", \"/de/static/3fefb07684109baa034edddedc2a7887/bc10c/INSTAR_WS_Video_Stream.webp 460w\", \"/de/static/3fefb07684109baa034edddedc2a7887/966d8/INSTAR_WS_Video_Stream.webp 920w\", \"/de/static/3fefb07684109baa034edddedc2a7887/59b61/INSTAR_WS_Video_Stream.webp 944w\"],\n              \"sizes\": \"(max-width: 920px) 100vw, 920px\",\n              \"type\": \"image/webp\"\n            }}></source>{`\n          `}<source parentName=\"picture\" {...{\n              \"srcSet\": [\"/de/static/3fefb07684109baa034edddedc2a7887/81c8e/INSTAR_WS_Video_Stream.png 230w\", \"/de/static/3fefb07684109baa034edddedc2a7887/08a84/INSTAR_WS_Video_Stream.png 460w\", \"/de/static/3fefb07684109baa034edddedc2a7887/c0255/INSTAR_WS_Video_Stream.png 920w\", \"/de/static/3fefb07684109baa034edddedc2a7887/966a0/INSTAR_WS_Video_Stream.png 944w\"],\n              \"sizes\": \"(max-width: 920px) 100vw, 920px\",\n              \"type\": \"image/png\"\n            }}></source>{`\n          `}<img parentName=\"picture\" {...{\n              \"className\": \"gatsby-resp-image-image\",\n              \"src\": \"/de/static/3fefb07684109baa034edddedc2a7887/c0255/INSTAR_WS_Video_Stream.png\",\n              \"alt\": \"INSTAR Kamera Websocket Videostream\",\n              \"title\": \"INSTAR Kamera Websocket Videostream\",\n              \"loading\": \"lazy\",\n              \"decoding\": \"async\",\n              \"style\": {\n                \"width\": \"100%\",\n                \"height\": \"100%\",\n                \"margin\": \"0\",\n                \"verticalAlign\": \"middle\",\n                \"position\": \"absolute\",\n                \"top\": \"0\",\n                \"left\": \"0\"\n              }\n            }}></img>{`\n        `}</picture>{`\n  `}</a>{`\n    `}</span></p>\n    <ul>\n      <li parentName=\"ul\"><strong parentName=\"li\">{`ws_protocol`}</strong>{` = `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`ws`}</code>{` oder `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`wss`}</code>{` `}{`*`}</li>\n      <li parentName=\"ul\"><strong parentName=\"li\">{`ws_hostname`}</strong>{` = `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`192.168.2.120`}</code>{` (DDNS oder lokale IP)`}</li>\n      <li parentName=\"ul\"><strong parentName=\"li\">{`ws_port`}</strong>{`     = `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`80`}</code>{` (Kamera HTTP oder HTTPS Port) `}{`*`}</li>\n      <li parentName=\"ul\"><strong parentName=\"li\">{`ws_endpoint`}</strong>{` = `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`/ws`}</code>{` (Die URL, unter der der ws-Stream bereitgestellt wird)`}</li>\n      <li parentName=\"ul\"><strong parentName=\"li\">{`cam_username`}</strong>{` = `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`admin`}</code>{` (Benutzernamen für die Kamera Login)`}</li>\n      <li parentName=\"ul\"><strong parentName=\"li\">{`cam_password`}</strong>{` = `}<code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`instar`}</code>{` (Benutzeranmeldung für die Kamera Login)`}</li>\n    </ul>\n    <blockquote>\n      <p parentName=\"blockquote\"><strong parentName=\"p\">{`*`}{` Hinweis`}</strong>{`: 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.`}</p>\n    </blockquote>\n    <p>{`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:`}</p>\n    <ul>\n      <li parentName=\"ul\"><code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`0`}</code>{` = h.264 video & audio`}</li>\n      <li parentName=\"ul\"><code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`1`}</code>{` = h.264 video & NO audio`}</li>\n      <li parentName=\"ul\"><code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`2`}</code>{` = h.265 video & audio`}</li>\n      <li parentName=\"ul\"><code parentName=\"li\" {...{\n          \"className\": \"language-text\"\n        }}>{`3`}</code>{` = h.265 video & NO audio`}</li>\n    </ul>\n    <div {...{\n      \"className\": \"gatsby-highlight\",\n      \"data-language\": \"js\"\n    }}><pre parentName=\"div\" {...{\n        \"className\": \"language-js\"\n      }}><code parentName=\"pre\" {...{\n          \"className\": \"language-js\"\n        }}><span parentName=\"code\" {...{\n            \"className\": \"token comment\"\n          }}>{`// Add media mime type`}</span>{`\n`}<span parentName=\"code\" {...{\n            \"className\": \"token comment\"\n          }}>{`// 0 => 'video/mp4; codecs=\"avc1.4D001E, mp4a.40.2\"'`}</span>{`\n`}<span parentName=\"code\" {...{\n            \"className\": \"token comment\"\n          }}>{`// 1 => 'video/mp4; codecs=\"avc1.4D001E\"'`}</span>{`\n`}<span parentName=\"code\" {...{\n            \"className\": \"token comment\"\n          }}>{`// 2 => 'video/mp4; codecs=\"hev1.2.4.L120.B0, mp4a.40.2\"'`}</span>{`\n`}<span parentName=\"code\" {...{\n            \"className\": \"token comment\"\n          }}>{`// 3 => 'video/mp4; codecs=\"hev1.2.4.L120.B0\"'`}</span>{`\n`}<span parentName=\"code\" {...{\n            \"className\": \"token keyword\"\n          }}>{`var`}</span>{` codec_mime `}<span parentName=\"code\" {...{\n            \"className\": \"token operator\"\n          }}>{`=`}</span>{` `}<span parentName=\"code\" {...{\n            \"className\": \"token number\"\n          }}>{`0`}</span><span parentName=\"code\" {...{\n            \"className\": \"token punctuation\"\n          }}>{`;`}</span></code></pre></div>\n    <p>{`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:`}</p>\n    <p><span parentName=\"p\" {...{\n        \"className\": \"gatsby-resp-image-wrapper\",\n        \"style\": {\n          \"position\": \"relative\",\n          \"display\": \"block\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": \"920px\"\n        }\n      }}>{`\n      `}<a parentName=\"span\" {...{\n          \"className\": \"gatsby-resp-image-link\",\n          \"href\": \"/de/static/546e25788353a771d9006c5775a37caa/e996b/ws_html_video_01.png\",\n          \"style\": {\n            \"display\": \"block\"\n          },\n          \"target\": \"_blank\",\n          \"rel\": \"noopener\"\n        }}>{`\n    `}<span parentName=\"a\" {...{\n            \"className\": \"gatsby-resp-image-background-image\",\n            \"style\": {\n              \"paddingBottom\": \"92.6086956521739%\",\n              \"position\": \"relative\",\n              \"bottom\": \"0\",\n              \"left\": \"0\",\n              \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAEMUlEQVQ4y3WOW0xadxzH/2W2q4pTK4pcD+ccQC4CBREUUUFQKoh3RdB62dC5SZWL66pd24emybbsYVuyLWm2pF1s9rLaOiugtnFNmi0ma5p0tybdQ5c0W6dOAV2BczicBZcte/GTb/LL75t88/2CPqerTCRGBKISJsTkwgwOTGfx/hVUyuYxOHAp+z+HV8KCEHut9BU7XFUBlldWby4shJZXloKh+RsL1+dvLgVDwVA4GAqHwitfLd6av7GwuBQMhZf/MZdC4fDt26tfr63cuQM2NjZ3dnbIfeKJRCKRJP/H7u7u1taf5AGAWCy2vb2NYRhBEPF4IpnEcDyFYTiG4QRBRGLRnWgkiWPbkcjzeCKRTMb3lUgmU6kUiEQi0WiMIAgind7dex7b3cMxPIXhBJ4iSTKNESROHNi8ubkVjcXSJEkQRAqPk2Q6TZKZN3PJ7578vPDgbuiHb1d+XF97dH/1p/Xg99/cenhv7dH9FJHKhH/7/VkmmUr/8gx7/Aex9/jJXw8exn99SpLkJ3evOy6fHbl60X31kueL98bn3h65crH/s/Nn5j9K4hiIZ0iQJJnAybl18vI98unHcxuBc9EvFzPL9vsPnG3t6up0udocjg6nw3nSMTDocL484BwdHnIPDQ0POAedPf293a7urr7O9p721u52W6fd2mE3Wy3vf/gByGYwihCkGIZLELgURVgoAqEwwodRAcoXlXEFfFhahpaLmTwui8ctYjEKGKUF9JLD1NxxjwfQhCJ2ubxULGFKJGyJhCeRKlRKfaVmpNGsUVeiUplYW1ljMthOGGVqJR1GmTyExuZSacUTXi+gyeRCjVZWVSWsOC6vVFoaa0wGbY/ZeGVsWN9gkTRayxuMU+6+6cAoXaNjIHxYpWRKRfm0Iu+0HzBrdOUmo9FmkmrVHLmcW16u0GmVWrXVpLd0tNb2OVQWs3uoy3myGamrqjfUN/e0l9UpYQQOnH4D2HstjW2mnl6LrUlX22yutTWpq9TqmsrWlrq29kZji6G1u8HaojfWq7qbtZM9xv6B5karfsyouzB7BkBCRCSXNpmqzQ0VXRZNX2utXiPqM9V4XXaBXlthNfS6TuiMKraIL1UrZFK+WCoQiARiiHN25k1wlM5gC4VKlVyh4MtkqOJ4mUQMOeuq3x1oGWypNhjVKpvBVKeo08vyReJ8JjuPzqAW0ynUl8Y8p0ABi8VEUb5YxBcLICHKEfB5AkQlFWkVErVKAguRAphbyuNwUYjB59MhXgkMF0NQYXHJKa8PgKys7MJjLA6TSjv2YmF+TlEhJS9XiUBmiRAAQMk6Ao7mgBeOAMphkJ1zKIdKyc2j5FABODTsHgXuCc9kIHDurZmpgH8q4Pednp7wed+Znf300nm/f/LVySnf2ZnXvN7R1z3jPr/HHxif8np9fo/H8/m1a38DLCwU0KMg9xYAAAAASUVORK5CYII=')\",\n              \"backgroundSize\": \"cover\",\n              \"display\": \"block\"\n            }\n          }}></span>{`\n  `}<picture parentName=\"a\">{`\n          `}<source parentName=\"picture\" {...{\n              \"srcSet\": [\"/de/static/546e25788353a771d9006c5775a37caa/e4706/ws_html_video_01.avif 230w\", \"/de/static/546e25788353a771d9006c5775a37caa/d1af7/ws_html_video_01.avif 460w\", \"/de/static/546e25788353a771d9006c5775a37caa/7f308/ws_html_video_01.avif 920w\", \"/de/static/546e25788353a771d9006c5775a37caa/35372/ws_html_video_01.avif 1050w\"],\n              \"sizes\": \"(max-width: 920px) 100vw, 920px\",\n              \"type\": \"image/avif\"\n            }}></source><source parentName=\"picture\" {...{\n              \"srcSet\": [\"/de/static/546e25788353a771d9006c5775a37caa/a0b58/ws_html_video_01.webp 230w\", \"/de/static/546e25788353a771d9006c5775a37caa/bc10c/ws_html_video_01.webp 460w\", \"/de/static/546e25788353a771d9006c5775a37caa/966d8/ws_html_video_01.webp 920w\", \"/de/static/546e25788353a771d9006c5775a37caa/c139f/ws_html_video_01.webp 1050w\"],\n              \"sizes\": \"(max-width: 920px) 100vw, 920px\",\n              \"type\": \"image/webp\"\n            }}></source>{`\n          `}<source parentName=\"picture\" {...{\n              \"srcSet\": [\"/de/static/546e25788353a771d9006c5775a37caa/81c8e/ws_html_video_01.png 230w\", \"/de/static/546e25788353a771d9006c5775a37caa/08a84/ws_html_video_01.png 460w\", \"/de/static/546e25788353a771d9006c5775a37caa/c0255/ws_html_video_01.png 920w\", \"/de/static/546e25788353a771d9006c5775a37caa/e996b/ws_html_video_01.png 1050w\"],\n              \"sizes\": \"(max-width: 920px) 100vw, 920px\",\n              \"type\": \"image/png\"\n            }}></source>{`\n          `}<img parentName=\"picture\" {...{\n              \"className\": \"gatsby-resp-image-image\",\n              \"src\": \"/de/static/546e25788353a771d9006c5775a37caa/c0255/ws_html_video_01.png\",\n              \"alt\": \"INSTAR Kamera Websocket Videostream\",\n              \"title\": \"INSTAR Kamera Websocket Videostream\",\n              \"loading\": \"lazy\",\n              \"decoding\": \"async\",\n              \"style\": {\n                \"width\": \"100%\",\n                \"height\": \"100%\",\n                \"margin\": \"0\",\n                \"verticalAlign\": \"middle\",\n                \"position\": \"absolute\",\n                \"top\": \"0\",\n                \"left\": \"0\"\n              }\n            }}></img>{`\n        `}</picture>{`\n  `}</a>{`\n    `}</span></p>\n    <ul>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"https://forum.instar.com/t/2k-wqhd-websocket-videostream-fuer-webseiteneinbindung/29077\"\n        }}>{`2k+ WQHD Websocket Videostream für Webseiteneinbindung`}</a>{` (`}<em parentName=\"li\">{`Github Links`}</em>{`)`}</li>\n    </ul>\n    <p><em parentName=\"p\">{`Der Forumseintrag enthält auch einen Link zu einem Repository für einen NGINX-Webproxy, den Sie verwenden können, um den Videostream Ihrer Kamera dem Internet zugänglich zu machen und die Verschlüsselung z. B. mit einem Let's Encrypt-Zertifikat durchzuführen`}</em></p>\n\n    </MDXLayout>;\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":""}