iOS Camera

by Walter Rumsby

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div class="container py-3 px-0">
  <br/><br/><br/><br/><br/><br/>  
  <div class="row gy-2 gx-3 align-items-center">
    <div class="col-auto">
  <input type="text" class="form-control" placeholder="Add a comment"/>

    
    </div>
    <div class="col-auto">

  
  <label for="file-input" id="camera-btn" class="btn btn-secondary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
  <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
  <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg>
    <input type="file" accept="image/*" id="file-input" capture="environment" />
</label>

  <label for="file-attach" class="btn btn-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paperclip" viewBox="0 0 16 16">
  <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z"/>
</svg>
<input type="file" accept="image/*" id="file-attach" />
</label>

<label class="btn btn-secondary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
  <path d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0...

CSS

#file-input,
#file-attach {
display: none;
}

#preview {
  max-width: 300px;
}

JavaScript

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
	const fileList = e.currentTarget.files;
  const file = fileList[0];
  const reader = new FileReader();

  reader.addEventListener('load', ev => {
     const data = ev.target.result;

     document.getElementById('preview').src = data;
  });

   reader.readAsDataURL(file);
});

        if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
            console.log("enumerateDevices() not supported.");
        } else {
            // List cameras and microphones.
            navigator.mediaDevices.enumerateDevices()
            	.then(function(devices) {
			            let hasCamera = false;

            			devices.forEach(function(device) {
                		if (device.kind === 'videoinput') {
                  		hasCamera = true;
                  	}
	            		});
                  
                  return hasCamera;
            	}).then(hasCamera => {
              	if (!hasCamera) {
                	document.getElementById('camera-btn').classList.add('d-none');
                }
              })
            	.catch(function(err) {
              	console.log(err.name + ": " + err.message);
            	});
        }