@@ -0,0 +1,63 @@
<html>
<head>
<title>Podcast</title>
<style>
video, canvas {
width: 35rem;
}
</style>
</head>
<body>
<center><h1>Starting</h1></center>
<hr>
<center>nginx/1.26.1</center>
<canvas></canvas>
<button onclick="start()">Do the thing</button>
<video playsinline autoplay></video>
<button class="shot">Take photo</button>
</body>
<script type="text/javascript">
function start() {
window.navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
})
.then((stream) => {
console.log(stream);
const canvas = window.canvas = document.querySelector('canvas');
canvas.width = 480;
canvas.height = 360;
const button = document.querySelector("button.shot");
const video = document.querySelector('video');
button.onclick = function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
};
window.stream = stream; // make stream available to browser console
video.srcObject = stream;
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
devices.forEach((device) => {
console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
});
})
.catch((err) => {
console.error(`${err.name}: ${err.message}`);
});
})
.catch((err) => {
console.log(err);
});
}
</script>
</html>