I am trying to stream a video element via my phone camera and using WebRTC. I do this as follows (snippets):
<video id="yourVideo" autoplay muted playsinline></video>
var yourVideo = document.getElementById("yourVideo");
// ...
navigator.mediaDevices.getUserMedia({audio:false, video:true}).
then(function(stream){
console.log(stream)
yourVideo.srcObject = stream
pc.addStream(stream)
})
.catch(function(error){
console.log(error)
})
This works fine in the browser and my video/camera is displayed. However, on the phone it returns me the error DOMException. I cannot find any information that can explain this.
Running it Ionic V1.X
ionic cordova run android
When I run navigator.mediaDevices this is what I see:
Is it perhaps permission related? If so, how can I fix this?
You will have to first get the device source and then try for the stream, try this way
var videoElement = document.getElementById("yourVideo");
var videoSrc = undefined;
navigator.mediaDevices.enumerateDevices()
.then(getDevices).then(getStream).catch(handleError);
function getDevices(deviceInfos) {
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
if (deviceInfo.kind === 'videoinput') {
videoSrc = deviceInfo.deviceId;
break;
}
}
}
function getStream() {
navigator.mediaDevices.getUserMedia({
video: {
deviceId: {
exact: videoSrc
}
}
}).
then(gotStream).catch(handleError);
}
function gotStream(stream) {
videoElement.srcObject = stream;
}
function handleError(error) {
console.log('Error: ', error);
}
Related
Hi I tried below getUserMedia API to capture the android screen,But Its not working any help ?
const constraints = {
audio: false, // mandatory.
video: {'mandatory': {'chromeMediaSource':'screen'}}
};
const successCallback = (stream) => {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
};
const errorCallback = (error) => {
// We don't have access to the API
console.log("sadd"+error);
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
I am getting the error Requested device not found
I am trying to get payment from my application. Everything is working fine on iOS. But on Android, my function stuck on this line:
Stripe.publishableKey = pk_key;
await Stripe.instance.applySettings(); // after this line nothings happens.
thanks in advance.
Here is my full code:
try{
Stripe.publishableKey = pk_key;
await Stripe.instance.applySettings();
var total = cartInfo.getTotal();
var customerEmail = cartInfo.address!.email;
var data = {
'email': customerEmail,
'amount': (total*100),
};
var payment_intent = await postRequest(url, data);
// widget.onLoading!(false);
print(payment_intent);
await Stripe.instance.initPaymentSheet(
paymentSheetParameters: SetupPaymentSheetParameters(
paymentIntentClientSecret: payment_intent['paymentIntent'],
merchantDisplayName: 'test',
customerId: payment_intent['customer'],
customerEphemeralKeySecret: payment_intent['ephemeralKey'],
merchantCountryCode: 'UAE',
)
);
setState((){});
await Stripe.instance.presentPaymentSheet();
return true;
} catch(e) {
return false;
}
EDIT:
I updated FlutterActivity to FlutterFragmentActivity in main kotlin file. But now undefined method: cotext error raised. I dont understant why? here is the full kotlin code.
https://pastecode.io/s/z86216b1
react-native-audio-recorder-player, library for use in my project to record audio.
When I start recording everything works fine, but close the application when I call the function to stop recording the audio "audioRecorderPlayer.stopRecorder ()".
It works perfectly on IOS (emulator and real device), and on Android emulator, but, it doesn't work on real android device.
What could be the cause of this error and how could it be resolved?
"react-native": "0.63.3",
"react-native-audio-recorder-player": "^2.6.0-rc3",
hooks for control
const [record, setRecord] = useState(false);
start record function
async function handleRecord() {
try {
const permissions = await getPermissions();
if (permissions) {
const path = Platform.select({
ios: `audio-${new Date().getTime()}.m4a`,
android: `sdcard/audio-${new Date().getTime()}.mp3`
});
const audioSet = {
AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
AudioSourceAndroid: AudioSourceAndroidType.MIC,
AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
AVNumberOfChannelsKeyIOS: 2,
AVFormatIDKeyIOS: AVEncodingOption.aac
};
const result = await audioRecorderPlayer.startRecorder(path, audioSet);
setRecord(true);
audioRecorderPlayer.addRecordBackListener(e => {
return;
});
}
} catch (err) {
}
}
stop record function
async function onStopRecord() {
try {
const result = await audioRecorderPlayer.stopRecorder();
audioRecorderPlayer.removeRecordBackListener();
setRecord(false);
setFiles([
...files,
{
uri: result,
type: "audio/mpeg",
name: `audio-${new Date().getTime()}.mp3`
}
]);
}catch(error){
Alert.alert(
"Erro",
error
);
}
}
I have an Ionic 3 App where I can upload picture from a device. This feature works well with IOS, but fail on Android with the error code 5 (Encoding error).
This is the flow :
protected takePicture(source: number, callback: any) {
const options: CameraOptions = {
sourceType: source,
mediaType: 2,
};
this.camera.getPicture(options).then((imageData) => {
return callback(imageData)
});
}
And then :
let promise = new Promise((resolve, reject) => {
let prefix = '';
if (i.indexOf('file://') === -1 && i !== '') {
prefix = 'file://';
}
this.file.resolveLocalFilesystemUrl(prefix + i).then((fileEntry: any) => {
fileEntry.file((file: any) => {
let reader = new FileReader();
if (file.size > 99999999) {
return this.events.publish('error', this.errorUploadMessage, false);
}
reader.onloadend = function(e) {
let blob = new Blob([this.result], { type: file.type });
let filename = file.name;
let extension = filename.match(/^.*\./);
if (!extension || extension === '') {
let type = file.type.split('/').pop();
filename = filename + '.' + type;
}
resolve({ blob: blob, name: filename });
};
reader.readAsArrayBuffer(file);
});
}, (error) => {
console.log(error);
this.events.publish('error', this.errorUploadMessage, false);
});
});
Everything work well with IOS so I don't understand why not with android. When I check the path here:
this.file.resolveLocalFilesystemUrl(prefix + i)
I have this :
file://content://com.android.providers.media.documents/document/image%3A1313
Maybe the problem comes from 'image%3A1313' at the end. On IOS I can se the real picture name and extension (.jpeg for exemple).
I already checked several issues on SOF, but nothing work or seems to be revelant to my issue.
Ok just found the solution... removing the prefix ("file://") seems to do the trick... It's strange because I never seen this suggestion anywhere..
I have a directive which controls my input value desired formatted or not.
directive('validNumber', function(shareDataService)
{
return
{
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl)
{
if(!ngModelCtrl)
{
return;
}
ngModelCtrl.$parsers.push(function(val) {
if (angular.isUndefined(val)) {
var val = '';
}
var clean = val.replace(/[^-0-9\.]/g, '');
var decimalCheck = clean.split('.');
if(!angular.isUndefined(decimalCheck[1]))
{
decimalCheck[1] = decimalCheck[1].slice(0,2);
clean = decimalCheck[0] + '.' + decimalCheck[1];
}
if (val !== clean)
{
ngModelCtrl.$setViewValue(clean);
ngModelCtrl.$render();
}
return scope.hesapla(clean);
});
element.bind('keypress', function(event) {
if(event.keyCode === 32) { // space
event.preventDefault();
}
});
element.bind('keypress', function(event) {
if(event.keyCode === 45) { // - key
event.preventDefault();
}
});
}
};
})
It's working on browser perfectly but keypress event not working on the device.Tried to inspect device with google chrome but not firing. I also tried keyup or keydown but still not working. How can I get this done?
Thank you
Include jQuery Mobile file
What you need to do is just include a jQuery file into your project. A file named jQuery.mobile.js or quite similar (ex. jQuery.ui.js) of any version can help you.
You can download it from : Download | jQuery Mobile