Skip to content

Instantly share code, notes, and snippets.

@Thomas-Gelf

Thomas-Gelf/videokonferenz-allein.html

Created November 5, 2020 12:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Thomas-Gelf/ef85b9ff2141005eccbc5b90e0d5c650 to your computer and use it in GitHub Desktop.
Save Thomas-Gelf/ef85b9ff2141005eccbc5b90e0d5c650 to your computer and use it in GitHub Desktop.
Download ZIP
Videokonferenz ganz allein
Raw
videokonferenz-allein.html
<html>
<head>
<meta charset="utf-8">
<title>Meine Videokonferenz mit mir selbst</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
}
body {
text-align: center;
}
#conference {
margin: 30px auto;
border: 10px darkgray solid;
border-radius: 5px;
display: inline-block;
}
#webcam {
width: 640px;
height: 480px;
background-color: lightgray;
}
div.error {
background-color: red;
color: white;
padding: 10px;
width: 640px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="conference">
<h1>Meine Videokonferenz</h1>
<video autoplay="true" id="webcam"></video>
</div>
<script type="text/javascript">
var webcam = document.querySelector("#webcam");
if (navigator.mediaDevices.getUserMedia) {
navigator
.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
webcam.srcObject = stream;
})
.catch(function (e) {
var error = document.createElement('div');
error.setAttribute('class', 'error');
error.innerHTML = e.message;
webcam.parentNode.insertBefore(error, webcam);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment