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?
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?
<rdar://problem/81892761>
There is an example: https://codesandbox.io/s/epic-volhard-qi9ho?file=/src/App.js
(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
(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
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?
(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?
(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.