Streaming webcam content to a html video element in iOS Safari

I have a web application that captures video from the device's webcam and streams that video to a html <video> element. This application works in Safari on the iPad (and macOS Safari 14.1.2 on Big Sur 11.5.1) but does not work in Safari on the iPhone.

The iPad is an iPad Pro (11-inch) running iOS 14.6

This shows the live streaming video content from the webcam on the page in real time. (Same as macOS)

The iPhone is an iPhone 12 Pro, running iOS 14.7.1

This shows a black rectangle from the webcam and then never updates. (Sampling images from the video element into a canvas element shows that the webcam gets a single image from the webcam upon loading but never updates after that initial image.)

The JavaScript code looks like the following, where video is the html video element on the page:

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
      if ('srcObject' in video) {
        video.srcObject = localMediaStream;
      } else {
        video.src = window.URL.createObjectURL(localMediaStream);
      }
      video.play();
    })
    .catch(err => {
      console.error(`Not available!!!!`, err);
    });

Does anybody have any ideas about what is different about the iPhone here?

Cheers, S t u a r t .