Bug 228860 – Safari automatically reloads page when takes photos in max resolution on iPhone 7, iPhone 7 Plus.

• Status: NEW
• Component: WebRTC

[Andrew]

There is a Web RTC video stream with max resolution and video tag which shows the stream from the camera.

async function setStream() {
  const stream = await window.navigator.mediaDevices.getUserMedia({
        video: {
          facingMode: 'user',
          width: {
            min: 960,
            ideal: resolution.width,
          },
          height: {
            min: 720,
            ideal: resolution.height,
          },
          frameRate: {
            min: 30,
          },
          aspectRatio: {
            ideal: RESOLUTION_ASPECT_RATIO,
          },
        },
        audio: false,
      });

  videoNode.srcObject = stream;
}

It's possible to take photos by clicking on the button, this code will be run:

function takePhoto() {
    const canvasNode = document.createElement('canvas');
    canvasNode.width = videoWidth;
    canvasNode.height = videoHeight;

    const context = canvasNode.getContext('2d')!;

    context.drawImage(videoNode, 0, 0, videoWidth, videoHeight);

    const photo = canvasNode.toDataURL('image/jpeg', 1.0);
}

After that, will close all tracks:

stream.getTracks().forEach((track) => track.stop());

Next will show the taken image. 

There are three the same steps, step by step in my flow.

Issue: 
Sometimes Safari will reload the page. How I can resolve this issue?

[youenn fablet]

This might be a similar issue as https://bugs.webkit.org/show_bug.cgi?id=228816.
Can you provide a jsfiddle that shows the issue so that I validate it is the same issue as bug 228816?

[Radar WebKit Bug Importer]

<rdar://problem/81892761>

[Andrew]

There is an example:

https://codesandbox.io/s/epic-volhard-qi9ho?file=/src/App.js

[Andrew]

(In reply to youenn fablet from comment #1)
> This might be a similar issue as
> https://bugs.webkit.org/show_bug.cgi?id=228816.
> Can you provide a jsfiddle that shows the issue so that I validate it is the
> same issue as bug 228816?

There is an example:

https://codesandbox.io/s/epic-volhard-qi9ho?file=/src/App.js

[Andrew]

(In reply to youenn fablet from comment #1)
> This might be a similar issue as
> https://bugs.webkit.org/show_bug.cgi?id=228816.
> Can you provide a jsfiddle that shows the issue so that I validate it is the
> same issue as bug 228816?

There is example without react:
https://codesandbox.io/s/elated-franklin-kkjkk?file=/src/index.js

[youenn fablet]

This does not seem to be the same issue as https://bugs.webkit.org/show_bug.cgi?id=228816.
Given the page reload, it seems like the web process is jetsamed so maybe the page is taking too much memory.
You can send me ([e-mail]) a sysdiagnose so that I validate this.

Is https://jsfiddle.net/njv0sftz/ also reloading on your devices?

[Andrew]

(In reply to youenn fablet from comment #6)
> This does not seem to be the same issue as
> https://bugs.webkit.org/show_bug.cgi?id=228816.
> Given the page reload, it seems like the web process is jetsamed so maybe
> the page is taking too much memory.
> You can send me ([e-mail]) a sysdiagnose so that I validate this.
> 
> Is https://jsfiddle.net/njv0sftz/ also reloading on your devices?

Ok. I'm going to send you sysdiagnose.

Your example has a lower quality for the camera, and it works. But, for my application, I should use the maximum quality of the camera. Maybe do you have a word of advice for me?

[youenn fablet]

(In reply to Andrew from comment #7)
> (In reply to youenn fablet from comment #6)
> > This does not seem to be the same issue as
> > https://bugs.webkit.org/show_bug.cgi?id=228816.
> > Given the page reload, it seems like the web process is jetsamed so maybe
> > the page is taking too much memory.
> > You can send me ([e-mail]) a sysdiagnose so that I validate this.
> > 
> > Is https://jsfiddle.net/njv0sftz/ also reloading on your devices?
> 
> Ok. I'm going to send you sysdiagnose.
> 
> Your example has a lower quality for the camera, and it works. But, for my
> application, I should use the maximum quality of the camera. Maybe do you
> have a word of advice for me?

https://jsfiddle.net/qm84rgd6/1/ should get the highest size.
Would it work in your devices?

I'll check the sysdiagnose to validate if the process gets jetsamed or something else is going on.