camera-preview
camera-preview copied to clipboard
capacitor-community
Plugin does not show camera preview on iOS after updating to iOS 15.4
Describe the bug
All was working fine until I update my iPhone to iOS 15 (not sure which minor version started the problem), but now after call CameraPreview.start method the camera preview doesn't appear. The led that indicates the device is using the camera turns on and if I call CameraPreview.capture method the picture is returned as expected but without showing the preview during all the process.
To Reproduce Steps to reproduce the behavior:
- Just start the camera preview.
Expected behavior
Show the camera preview when start method is called.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: iPhone 11
- OS: iOS 15.4.1
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context As I said, previously everything was working as expected. I didn't change anything in the code regarding Camera Preview and I only noticed the problem when some users of my app reported it to me. For Android it continues to work normally and the problem only occurs on iOS.
Code snippet that calls the start method:
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'rear',
width: this.platformWidth,
height: this.platformHeight,
toBack: true,
rotateWhenOrientationChanged: false
};
await CameraPreview.start(cameraPreviewOptions);
some dependencies in my package.json: {
"@angular/core": "~10.0.0",
"@capacitor-community/camera-preview": "^1.0.6",
"@capacitor/android": "^2.4.3",
"@capacitor/core": "2.4.3",
"@capacitor/ios": "^2.4.3",
"@ionic/angular": "^5.0.0"
}
Hi @IgorSamer, I'm running in the same issue, did you manage to sort it out?
I've tried to reproduce this with my iPhone Xs running iOS 15.5 and my app using Camera Preview still works like before. Are you able to update to 15.5 and see if it's now sorted?
@pbowyer unfortunately not, I've upgraded to iOS 15.5 an iPhone XR but the issue is still there. I suspect it is a general webview issue because even a simple html page using media device doesn't work on iOS Safari.
I post here the simple code, could you try and tell me if on your phone that works or not?
simple HTML page:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML5 Camera Test</title>
</head>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css"></style>
<body>
<div class="camera">
<video autoplay></video>
</div>
<button onclick="startvideo()">Start Video</button>
</body>
</html>
Javascript support source:
function startvideo() {
const hdConstraints = {
video: { width: 200, height: 200 },
};
const video = document.querySelector('video');
navigator.mediaDevices.getUserMedia(hdConstraints).then((stream) => {
video.srcObject = stream;
});
}
Stylesheet:
.camera {
width: 200px;
height: 200px;
border: 2px solid red;
}
Hi @IgorSamer, I'm running in the same issue, did you manage to sort it out?
I still couldn't find the cause of this behavior so I switched to the Camera plugin until I found out how to fix it
I've tried to reproduce this with my iPhone Xs running iOS 15.5 and my app using Camera Preview still works like before. Are you able to update to 15.5 and see if it's now sorted?
Tomorrow I will update and return here with the result
@pbowyer Just tested after updating my iPhone 11 to iOS 15.5 and unfortunately the same behaviour occurs. To be sure (besides already having the css rules for transparency applied and working normally on Android) I went to Safari "Inspect Element" and set background: transparent for all tree elements but the problem stays the same (capture and flip methods works as expected, but without showing preview). Any suggestions on where to investigate the cause?
@IgorSamer thanks for your update. I suspect it is a wkwebview bug because of the test I did on a simple html page using vanilla js media device API (you can grab the code from my previous post and try for yourself)
I've performed a set of tests to get some additional informations of this issue, here are my results. (All test have been done on iPhone XR with iOS 15.5)
Test 1
Original camera-preview plugin demo project: issue present
Test 2
Modified camera-preview plugin demo project with version 3 of Capacitor and plugin: issue present
Test 3
Original cordova-camera-preview demo project: issue not present
Test 4
Modified Capacitor camera-preview plugin demo project to use Cordova camera-preview plugin instead of Capacitor camera-preview plugin: issue not present
Definitely it seems an issue with the plugin, both in version 2 and 3. I tried to compare the iOS code of both plugins but I'm not an expert in iOS programming so I were unable to detect any differences between the two.
If there is anyone in the plugin community having iOS skills, please get in touch with me: I urgently need to sort out this issue.
I post here the simple code, could you try and tell me if on your phone that works or not?
Thanks for posting code to reproduce the problem. On my iPhone Xs running iOS 15.5 your sample code works once I add the playsinline attribute to the <video> tag. See https://webrtc.github.io/samples/src/content/getusermedia/gum/ for a demo that works on my iPhone.
For me the problem was that localhost was being served from http (not https). This means that navigator.mediaDevices is undefined. Once I served my localhost via ngrok everything worked fine (iOS 15.6).
Credits to this SO answer: https://stackoverflow.com/a/68957325
@sertal70 @IgorSamer I can't remember exactly what it was, but with iOS 15 there was view that was behaving differently or needed to be targeted to force the transparency.
In Plugin.swift -> start () try this:
self.webView?.backgroundColor = UIColor.clear self.webView?.isOpaque = false self.webView?.scrollView.backgroundColor = UIColor.clear self.webView?.scrollView.isOpaque = false
And in the stop() try this:
self.webView?.backgroundColor = self.viewColor ?? UIColor.white self.webView?.isOpaque = true
@Codemax999 thank you so much!!! I just added self.webView.scrollView.backgroundColor = UIColor.clear and finally worked like expected showing the preview again.