According to https://caniuse.com/?search=mediarecorder the MediaRecorder API has been supported by Safari and Safari on iOS since version 14. However when I try to use it I'm getting 'Can't find variable: MediaRecorder'
Am I instantiating this in the wrong way? Here's a code snippet
this.videoRecorder = new MediaRecorder(mediaStream, {
mimeType: "video/webm",
audioBitsPerSecond: 128000
});
and, for just audio
this.audioRecorder = new MediaRecorder(mediaStream, {
audioBitsPerSecond: 128000
});
Any pointers much appreciated!
I've found that mediaRecorder is still an experimental feature that needs to be enabled on Safari on Mac OS. It's enabled on iOS, the problems I was having on that platform were unrelated.
Related
I am developing an application with ionic, I want to open the camera to run a tensorlfowjs model.
Ionic packages html and javascript files in a native application and executes them in a webview, with the web version and the android version I have no problems.
But in the version for ios it is giving me a lot of problems opening the camera from the webview.
let video: HTMLVideoElement = document.getElementById("vid") as HTMLVideoElement;
var mediaDevices = navigator.mediaDevices;
mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {
// Changing the source of video to current stream.
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
});
})
.catch(error=>console.error('error open camera', error));
I have added the permissions for the camera in info.plist, when I run that code it shows a alert requesting permission for the camera the first time, but I always get an empty error message in the js code
[error] - error open camera {}
I am testing with a device with IOS: 14.4.2 this https://pastebin.com/Dx44XMYY is the system log. where you can see the following message
pp UserMediaPermissionRequestManagerProxy::denyRequest(F6CC2F45DD55FA12) 15, reason: InvalidConstraint
I do not know how to move forward, what to try, or what the reason for the error may be.
I appreciate any advice
Edit: As #jcesarmobile says, it seems to be ios 14 problem, I have tested the code with ios 15 and it works. I appreciate any advice on how to fix it
Since you are setting audio to true, you also need the microphone usage description
NSMicrophoneUsageDescription
I am working on an cordova Barcode Scanner app for mobile Devices. I am using the Framework QuaggaJS for Barcodescanning and the cordova-plugin-ioswebrtc to implement the webrtc functions to cordova. Its working fine on Android Devices and on local Web Browsers on PC, but if i want to use it on iOS I always getting the error "Failed to load ressource: file is directory".
I am initializing Quagga with the following settings:
{decoder:{readers:["code_93_reader"]},
numberOfWorkers: 4,
inputStream:
{
name: "Live",
type: "Livestream",
target: document.querySelector('#scanner'),
constraints:
{
width:{min:640},
height:{min:480},
facingMode: "environment"
}
}
}
The error Message does not describe where the error comes from so I am not sure if its a problem of quaggaJS or of the iOS WebRTC plugin of cordova. Does anyone has build a cordova app with QuaggaJS and can help me where these problem comes from?
If I am Running the getUserMedia Function in the console, i get to different Objects back. In normal iOS Browser the result is of type MediaStream and in the cordova app the result is of type Blob. In safari my app is working without problems, and the Blob Object has all attributes of MediaStream and more so that should not be a problem or?
I'm going through the docs in React Native and can only find navigating to external links from the app I am in.
I want to be able to navigate to the Settings app (more specifically to the privacy > location services page) but, can not seem to find the necessary information on it. There is the native iOS way of doing it which I am trying to replicate through React Native.
Is this possible?
I have tried the following to detect if there is a Settings URL. The console logs that the Settings url works however, it does not navigate to that page.
Update: thanks to #zvona I am now navigating to the settings page but not sure how to get to a specific deep link.
Linking.canOpenURL('app-settings:').then(supported => {
console.log(`Settings url works`)
Linking.openURL('app-settings:'
}).catch(error => {
console.log(`An error has occured: ${error}`)
})
You can access settings of the application with:
Linking.openURL('app-settings:');
But I don't know (yet) how to open a specific deep-link.
2021 update use:
Linking.openSettings();
otherwise your app will be rejected due use of non-public URL scheme
I successfully opened the settings by the code below, hope it's helpful :)
Linking.canOpenURL('app-settings:').then(supported => {
if (!supported) {
console.log('Can\'t handle settings url');
} else {
return Linking.openURL('app-settings:');
}
}).catch(err => console.error('An error occurred', err));
Reference: https://facebook.github.io/react-native//docs/linking.html
Since React Native version 0.59 this should be possible using openSettings();. This is described in the React Native Linking documentation. Although it did not work for me. When I tried quickly I saw a _reactNative.Linking.openSettings is not a function error message.
Linking.openSettings();
You can deep-link referencing the settings's index like so:
Linking.openURL('app-settings:{index}')
For example Linking.openURL('app-settings:{3}') would open the Bluetooth settings.
Linking.openURL('app-settings:1');
Adding an answer that worked for me and is easy to apply.
openSettings function in #react-native-community/react-native-permissions works for both iOS and Android.
Calling openSettings function will direct the user to the settings page of your app.
import { openSettings } from 'react-native-permissions';
openSettings();
You can import Linking from 'react-native' and then use Linking.openSettings() to trigger the call. This link explains it very concisely:
https://til.hashrocket.com/posts/eyegh79kqs-how-to-open-the-settings-app-in-reactnative-060
For example: to navigate under Settings/Bluetooth you have to use Linking.openURL('App-Prefs:Bluetooth');
For iOS 14 and ReactNative 16.13
You can use the most easiest way to open the app setting from react-native.
just,
import { Linking } from 'react-native';
and user below line anywhere you want open the app setting.
Linking.openSettings();
Old question, but this didn't work for me on Android and I found something that did. Hope this helps anyone looking for the same. :)
https://github.com/lunarmayor/react-native-open-settings
I don't have the ability to test it for iOS though.
Opens the platform specific settings for the given application.
You can handle your case using Linking from react-native. In my case, I accessed the touch id settings on IOS using:-
Linking.openURL('App-Prefs:PASSCODE');
we have migrated a worklight 6.1 application t IBM mobilefirst 7.0 platform and all the functionalities working as expected on the android environment, but in ios we are facing an issue: there is a function called "quick receipt". on click on a button the device camera opens and a photo is taken. The problem is that the photo is not displaying - it returns complete blank page this issue on ios device only but not on Android device.
Camera.DestinationType.FILE_URI is not working on IOS.
for security reason we wont share the code. here is similar prototype code.
html
<div><img alt="QuickReceipts" src="resources/img/camera.png" onclick="imgCapture();"</div>
JavaScript
imgCapture: function (){
navigator.camera.getPicture(this.onSuccess, this.onFail,{quality:80,destinationType:Camera.DestinationType.FILE_URI, targetWidth:600,targetHeight:1050}
},
onSuccess:function(imgData)
{
// applying the css and displaying the img
$("#imgReceipt").attr("src","data:image/jpeg;base64," +imgData);
$("#imgReceipt").css("display", "block");
}
onFail:function(imgData){
// failure msg
}
One suggestion is to attempt to code change as mentioned by Nazmul: http://www.telerik.com/forums/ios-cordova-3-5-0-camera-getpicture-targetwidth-issue.
Another suggestion is to upgrade to the latest 7.1 iFix from IBM Fix Central which contains several Cordova corrections and may address your issue.
If your issue is not resolved still, I suggest to open an IBM PMR (support ticket).
Could not find information. I built pg app with 'cordova-plugin-wkwebview-engine'.
How to check if phonegap web app on ios 9.2 is really using WKWebview? Could not find info how userAgent string should look like for WKWebView.
Previous answer doesn't work on iOS 10, but you can use this code
if (window.webkit) {
//WKWebView
}
Old answer:
You can check for indexedDB
if (window.indexedDB) {
//WKWebView
}