Share screen in safari 13 with agora sdk - safari

I am using agora-rtc-sdk 3.3.0. When i click on "share screen" and gave permission (problem is not with getDisplayMedia) safari reload page. The line which cause it, is client.publish(stream), if comment this line stream created successfully (according to console), same as client but i cant publish my "screen sharing" stream. This bug appears only in safari 13, other browsers works fine. Adding this part of code.
const beginShare = async() => {
agoraShareStream = AgoraRTC.createStream({
streamID: SHARE_ID,
audio: false,
video: false,
screen: true
});
await agoraShareStream.init(() => {
console.log('init local stream success')
});
setShareStream(agoraShareStream);
enqueueSnackbar("Started screen sharing", { variant: "info" });
}
const createShareClient = async() => {
const agoraShareClient = AgoraRTC.createClient({
mode: "rtc",
codec: "vp8"
});
await agoraShareClient.init(appId);
await agoraShareClient.join(getAgoraToken({ uid: SHARE_ID, channel }), channel, SHARE_ID);
agoraShareClient.publish(agoraShareStream);
setShareClient(agoraShareClient);
}

Unfortunately, Agora doesn't support screen sharing on Safari as noted in the documentation here: https://docs.agora.io/en/Video/screensharing_web?platform=Web#introduction
The Agora RTC Web SDK supports screen sharing in the following desktop browsers:
Chrome 58 or later
Firefox 56 or later
Edge 80 or later on Windows 10+

Related

react-native-share wouldn't open anything in real ios device but app doesn't freeze

I'm trying to implement sharing a pdf feature using react-native-share. When I click 'share' button, there should be a pop-up with different sharing options but nothing pops up when I connect to my real ios device and test it. The app doesn't freeze or anything. Weird thing is everything works as expected when I test it on ios simulator.
Here's my code snippet
const sharePdf = async () => {
const shareOptions = {
url: `file://${reportUri}`,
type: 'application/pdf',
failOnCancel: true,
};
await Share.open(shareOptions);
};

React Native Fetch Blob/React Native Blob Util Fail in Production but not in Developer time

I am trying to download a pdf generated through an own api that worked normally for me until yesterday, since then it has stopped working without any modification. Reviewing in developer mode through the metro everything seems to work correctly without any problems (I download the pdf normally), but when deploying the application in the playstore it closes unexpectedly, leaving me without knowing why this happens.
First I was using the React Native Fetch Blob, then I used React Native Blob Util hoping it would solve the problem but it keeps happening. Do you guys have any ideas for why does this happen?
The PDF file download this function:
const generarReciboPdf = async (datosDeuda:FormularioScreenParams,formaPago:ReactText,nroCheque?:string) =>{
const{config,fs} = ReactNativeBlobUtil
if (formaPago === 4 && (nroCheque == ""|| undefined)) {
return console.log('debe llenar todos los campos');
}
const { DownloadDir } = fs.dirs;
const token = await AsyncStorage.getItem('token');
let datosDeudaCompleto= {
...datosDeuda,
forma_pago:formaPago,
nro_cheque:nroCheque
}
let url = 'https://sys.arco.com.py/api/appRecibos/generarReciboPdf/'+JSON.stringify(datosDeudaCompleto)
// return console.log(url);
const options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true, // true will use native manager and be shown on notification bar.
notification: true,
mime:'application/pdf',
path: `${DownloadDir}/recibo_${datosDeuda.mes_deuda.replace(/ /g, "")}_${datosDeuda.razon_social.replace(/ /g, "")}.pdf`,
description: 'Downloading.',
},
};
config(options).fetch('GET', url,{Authorization :'Bearer '+token}).then((res) => {
console.log('se imprimio correctamte el pdf');
setErrorPdf(1)
}).catch((error)=>{
console.log(error);
setErrorPdf(-1);
});
}
Also, this error appears in Play Console: "PlayConsole Error Image".
PlayConsole Error Image

Issue with WebRTC/getUserMedia in iOS 14 Safari and phone sleep/unlock

I seem to have noticed a regression with getUserMedia in iOS 14 Safari. Here are steps to reproduce:
Go to https://webrtc.github.io/samples/src/content/getusermedia/gum/ on iOS 14 Safari
Click "Open camera" and accept camera permissions; you should see local camera video.
Click the power button and lock the phone; let the phone go to sleep
Unlock/wake the phone; the local camera video is gone.
This does not happen on devices running iOS 13.
My questions are:
Can anyone else confirm this on their devices? I have only tested on iPhone 11 so far.
Has anyone found a solution yet?
Yes, I am having the a similar strange issue with iOS 14.2 and getUserMedia I can only get
navigator.mediaDevices.getUserMedia({video: true }) to work
If I change it to:
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
it will fail.
It's not an issue with code as I tested my project on safari MacOS, chrome for MacOS, linux Firefox.
As a temp fix so I could move on with my life for the moment I did this:
const constraints = navigator.userAgent.includes("iPhone") ? {video:true} : {
audio:true,
video: {
width: { ideal: 640 },
height: {ideal: 400 }
}
};
Yes also here!
I check this behavior in Browserstack with iOS:
12.x: ✓
13.x: ✓
14.x: ✗
Try this:
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(stream => {
const videoTracks = stream.getVideoTracks();
console.log(videoTracks[0].enabled);
document.querySelector('video').srcObject = stream;
});
// Output
true <-- ?
Then if you try again get the camera, but replacing the video track on the previous MediaStream works.
Sometimes if you use video constraints with facingMode: 'user' also works, why? I don't know.
I still can't find a consistent solution.
Having the same issue on iPad pro 2nd generation with iOS 14.7.1 and iPhone 7 iOS 14.6.x. The only solution I found that seems to constantly work is to call getUserMedia separated by audio and video constraints. As an example:
async function getMedia(constraints) {
let videoStream = null;
let audioStream = null;
try {
videoStream = await navigator.mediaDevices.getUserMedia({video: true});
audioStream = await navigator.mediaDevices.getUserMedia({audio: true});
/* use the stream */
} catch (err) {
/* handle the error */
}
}
You can replace {video: true} or {audio: true} with your desired constraints. Then you can either work with the separate MediaStream objects or to construct your own MediaStream object from the audio and video tracks of your streams.

React-Native-Image-Picker Dialog automatically closes after launching in IOS

Description
I am using React-Native-Image-Picker to Select and Upload Files from my App, The issue i am facing that It is working in Android but in ios react-native-image-picker dialog automically closes after launching, therefore i cannot select files for upload.
All the required permissions by ios for file upload have also been given.
How to repeat issue and example
import ImagePicker from 'react-native-image-picker';
import RNFetchBlob from 'react-native-fetch-blob';
var options = {
title: 'Select Image',
quality : 0.25,
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(options, response => {
console.log('Response = ', response);
RNFetchBlob.fs.stat(response.path)
.then((stats) => {
if (stats.size <= 5000000) {
let source = response;
let checkboxStates = {...this.state.checkboxStates};
checkboxStates['image'] = true;
this.setState({ imagePath: source, imageVisible: true, totalUploadSize: this.state.totalUploadSize + stats.size });
this.setState({checkboxStates});
}
else{
toastMessage('Image should be less than 5 MB');
}
}).catch((err) => {});
});
Additional Information
React Native version: 0.61.5
Platform: IOS
Development Operating System: Mac OS Mojave 10.14.2
Dev tools: Xcode 10.14.2
Device : IPad Pro (IOS 9)
for someone who experience this, in my case this is cause of close of modal of choose option of image upload the open image picker immediately. try to close in given time then open image library or close modal after image picker launched like this :
ImagePicker.launchCamera(imageOptions, async (response) => {
setModalPicker(false)
This happens when the modal that has the option buttons for selecting either from camera or gallery is closed. You can close the modal after selecting an image.
ImagePicker.launchImageLibrary(options, (response) => {
//close the modal here
})

Chromium won't load any websites and keeps crashing

All of the sudden my scripts aren't working anymore.
const puppeteer = require("puppeteer");
async function run() {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto("https://www.google.com");
// browser.close();
}
run();
When I run node index.js, Chromium launches, however, it is all white, then my mouse turns into the little rainbow spinning circle (Mac) and it crashes and I get the following error:
(node:37226) UnhandledPromiseRejectionWarning: Error: Navigation failed because browser has disconnected!
Thanks for any help!
I had the same problem on mac and solved it by adding '--no-sandbox' to the chrome args.
You can expose it as an env variable like so:
CHROME_ARGS=--no-sandbox
or add it to your browser.launch configuration:
const browser = await puppeteer.launch({
headless: false,
args: ['--no-sandbox']
});