30:T106e,imageChooser = { ({ prompt: "Create an image chooser builder that will accept a file upload or camera capture, exporting the base64 encoded image value as the value", time: 1700317321358, comment: "" }); return (options = {}) => { const { width = 512, height = 512 } = options; let base64 = undefined; let stream = null; let imageCapture = null; let videoElement = null; const ui = htl.html`

ui.querySelector("#file-upload").click()}> Click to select image

`; function handleFileChange(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (evt) => { ui.value = evt.target.result; }; } } async function toggleCamera() { if (!stream) { try { stream = await navigator.mediaDevices.getUserMedia({ video: true }); videoElement = ui.querySelector("#camera-stream"); videoElement.style.display = "block"; videoElement.srcObject = stream; const track = stream.getVideoTracks()[0]; imageCapture = new ImageCapture(track); } catch (error) { console.error("Error accessing camera:", error); return; } } else { const lastFrame = await takePhoto(); if (lastFrame) ui.value = lastFrame; videoElement.style.display = "none"; videoElement.srcObject = null; stream.getTracks().forEach((track) => track.stop()); stream = null; imageCapture = null; } } function blobToBase64(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; }); } async function takePhoto() { if (imageCapture) { try { const blob = await imageCapture.takePhoto(); const base64String = await blobToBase64(blob); return base64String; } catch (error) { console.error("Error taking photo:", error); return null; } } return null; } Object.defineProperty(ui, "value", { get: () => base64, set: (val) => { base64 = val; const imagePreview = ui.querySelector("#image-preview"); const placeholderText = ui.querySelector("#placeholder-text"); imagePreview.style.backgroundImage = `url(${base64})`; placeholderText.style.display = base64 ? "none" : "flex"; // Dispatch an input event when the image changes ui.dispatchEvent(new Event("input")); } }); return ui; }; }31:[] 2e:{"title":"imgChooser","cells":[{"id":2837,"value":"# imgChooser\n\nBidirectional binding to a base64 encoded image UI. Can read from file upload or camera. Co-developed with [roboco-op](https://observablehq.com/@tomlarkworthy/robocoop)","pinned":false,"hidden":false,"mode":"md"},{"id":2807,"value":"viewof img = imageChooser({ width: 460, height: 256 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2818,"value":"img","pinned":true,"hidden":false,"mode":"ojs"},{"id":2803,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}