Member Avatar for ChrisJ

This html web page code, when viewed via mobile device, captures video from the mobile device. By tapping the page, the mobile video full screen appears, ready to begin recording. I'd like to find a way to reduce the dimensions of that full screen, if possible. I'm guessing it might need height and width dimnsions via some javascript code referencing "fileToUpload"?

<form action="uploadMobile.php"  method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();">
<input type="submit" value="Upload" name="submit" id="go" style="display: none;"/>
</form>

Any guidance/assistance is appreciated.

Edited by Dani because: Formatting fixed
  • 3 Contributors
  • 3 Replies
  • 86 Views
  • 13 Minutes Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

— the file-input + capture approach hands control to the platform camera app, so the browser page cannot shrink or restyle that native full-screen UI. and are right that the fix is to bypass the native camera UI and do capture inside the page: request a media stream, present a small preview, and either record the stream at lower constraints or draw the preview into a canvas sized to your target and record the canvas stream.

A concise pattern (feature-detect, request a low-res stream, copy into a sized canvas, record the canvas stream) looks like this:

async function start() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) return /* fallback */;
  const constraints = { video: { width: { ideal: 640 }, height: { ideal: 480 } } };
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  videoEl.srcObject = stream;

  const canvas = document.createElement('canvas');
  canvas.width = 640; canvas.height = 480;
  const ctx = canvas.getContext('2d');

  function draw() { ctx.drawImage(videoEl, 0,0,canvas.width,canvas.height); requestAnimationFrame(draw); }
  draw();

  const recorder = new MediaRecorder(canvas.captureStream(30));
  // collect blobs, stop and upload the blob
}

Notes and caveats: getUserMedia and MediaRecorder require HTTPS and have spotty differences across mobile browsers; some browsers ignore constraint hints and some older mobile Safari versions lack full MediaRecorder support. Feature-detect and keep the original file-input as a fallback. For details on APIs and browser support, see the MDN docs for MediaDevices.getUserMedia, MediaRecorder, and HTMLCanvasElement.captureStream.

Recommended Answers

All 3 Replies

Member Avatar for Dani

The code you are providing is just a simple HTML file upload form with nothing special about it. The capture property is a hint directed to the web browser the desired use case is for the end user to use the device's native media capturing capabilities to capture something to be uploaded. As far as I am aware, you cannot pass a further hint for the resolution you prefer to capture in.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.