228860 2021-08-06 03:36:27 -0700 Safari automatically reloads page when takes photos in max resolution on iPhone 7, iPhone 7 Plus. 2021-08-13 09:20:03 -0700 1 1 1 Unclassified WebKit WebRTC Safari 14 iPhone / iPad iOS 14 NEW InRadar P2 Minor --- 1 andrew.zaitsev.crtr webkit-unassigned webkit-bug-importer youennf oldest_to_newest 1782464 0 andrew.zaitsev.crtr 2021-08-06 03:36:27 -0700 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? 1782467 1 youennf 2021-08-06 04:17:53 -0700 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? 1784069 2 webkit-bug-importer 2021-08-13 03:37:15 -0700 <rdar://problem/81892761> 1784083 3 andrew.zaitsev.crtr 2021-08-13 05:07:05 -0700 There is an example: https://codesandbox.io/s/epic-volhard-qi9ho?file=/src/App.js 1784084 4 andrew.zaitsev.crtr 2021-08-13 05:07:50 -0700 (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 1784091 5 andrew.zaitsev.crtr 2021-08-13 06:08:19 -0700 (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 1784094 6 youennf 2021-08-13 06:56:26 -0700 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 (youenn@apple.com) a sysdiagnose so that I validate this. Is https://jsfiddle.net/njv0sftz/ also reloading on your devices? 1784108 7 andrew.zaitsev.crtr 2021-08-13 07:58:46 -0700 (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 (youenn@apple.com) 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? 1784118 8 youennf 2021-08-13 09:20:03 -0700 (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 (youenn@apple.com) 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.