{"id":3314,"date":"2021-08-18T10:49:21","date_gmt":"2021-08-18T08:49:21","guid":{"rendered":"https:\/\/www.mariotti.de\/?p=3314"},"modified":"2021-08-18T10:49:21","modified_gmt":"2021-08-18T08:49:21","slug":"webcam","status":"publish","type":"post","link":"https:\/\/dev.mariotti.de\/?p=3314","title":{"rendered":"Simple Webcam Testseite"},"content":{"rendered":"<p>Dieser Beitrag stellt eine simple Webcam Testwebseite dar, die das Livebild der Webcam im Webbrowser anzeigt.<\/p>\n<p><video id=\"webcam\" autoplay=\"autoplay\" muted=\"\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><br \/>\n<script type=\"text\/javascript\">\n    const video = document.querySelector('#webcam');\n    window.navigator.mediaDevices.getUserMedia({ video: true })\n        .then(stream => {\n            video.srcObject = stream;\n            video.onloadedmetadata = (e) => {\n                video.play();\n            };\n        })\n        .catch( () => {\n            alert('Der Webbrowser hat kein Zugriff auf Webcam bzw. Mikrofon');\n        });\n<\/script><\/p>\n<p>&nbsp;<\/p>\n<p>Technisch gesehen handelt es sich bei sich hierbei um einen Zugriff auf das MediaDevice Web API, mehr details hierzu z.B. unter:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MediaDevices\" target=\"_blank\" rel=\"noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MediaDevices<\/a><\/p>\n<p>Hier der entsprechende HTML Code:<\/p>\n<pre><code class=\"language-xml\">&lt;video id=\"webcam\" controls muted autoplay&gt;&lt;\/video&gt;\n&lt;script type=\"text\/javascript\"&gt;\n    const video = document.querySelector('#webcam');\n    window.navigator.mediaDevices.getUserMedia({ video: true })\n        .then(stream =&gt; {\n            video.srcObject = stream;\n            video.onloadedmetadata = (e) =&gt; {\n                video.play();\n            };\n        })\n        .catch( () =&gt; {\n            alert('Der Webbrowser hat kein Zugriff auf Webcam bzw. Mikrofon');\n        });\n&lt;\/script&gt;<\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Beitrag stellt eine simple Webcam Testwebseite dar die deren Livebild ausgibt.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,35,36],"tags":[],"class_list":["post-3314","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-citrix","category-windows"],"_links":{"self":[{"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=\/wp\/v2\/posts\/3314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3314"}],"version-history":[{"count":0,"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=\/wp\/v2\/posts\/3314\/revisions"}],"wp:attachment":[{"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.mariotti.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}