I want to make a conferencing app using Jitsi and add some of my own pages in it. Is it possible to navigate between my pages and jitsi conferencing page.
I've tried to understand the code and flow in the lib-jitsi-meet repository. Here's the github link https://github.com/jitsi/jitsi-meet
If you don't need a custom UI for the conferencing piece, a good idea (and easier) would be to use Jitsi Meet External API to embed conferencing in your application
https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md
Jitsi provides two types of API documentation.
iFrame API:- You can easily add Jitsi as an Iframe.
lib-jitsi-meet : This will help for low-level development
For more details :-
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ljm-api
Related
I'm looking for a way to embed a browser in a React application with the ability to add onclick events on search page selectors. I'm wondering if I could use Electron or NW.js. Does anybody have an idea?
I started with iframes at first, but here's the problem with cross domain. Then I thought about puppeteer and png rendering with positioning, but it's not very intuitive. And recently I found threads about Electron and NW.js
You haven't really explained what you mean by "embed a browser in a React app". A browser is an executable that renders HTML/CSS/JS. React is a JS library that runs in a browser.
I'm not sure what you are trying to do. Maybe embed a different website on the same page? In which case, yes you would use an iframe. There are many security contraints put in place, for good reason.
Electron is a Node.js script that spawns a chromium browser that can communicate with a separate Node process.
NW.js is a modified Chromium browser with Node.js built in.
Both of them are going to have security restrictions similar to a normal browser. NW.js has some additional options you could try (again, not sure what you actually want). But there are still server-side restrictions for CORS that you'd need to deal with no matter what.
I think the real solution here is for you to re-evaluate what your goal is, and then find a better solution to it.
More on NW.js/Electron at:
https://xpda.net
I have a react js app built long time ago that uses 3rd party libraries and APIs, now I want to add this app to saleforce. Is there a way to add the existing react js app or do I have to build a new app using the saleforce development tools? Any advise and help is appreciated.
Can you live in an iframe? There's lightning:container tag that could help you. Search questions or blogs that mention it, on SO and on dedicated https://salesforce.stackexchange.com/. Iframe sounds meh but there are ways for it to communicate with parent ("canvas apps" in documentation - and it has nothing to do with <canvas> tag), silently log in to SF, use REST API...
You could try to rewrite your app to native Aura/LWC but you won't be able to call APIs directly from JS. You'll have to pass through SF server-side language called Apex. Which is doable but more for you to learn. There are some more restrictions, although light DOM and LWS help with these, many things Locker service blocks are OK in LWS.
There's also hybrid approach with loading your app as a library?
I have a complex requirement, where we have an asp.net webforms site we want to try and upgrade in a step by step way. We are considering using React (frontend, with asp.net core backend) for this purpose. The website has an iframe in the centre, and we want to try and replace the old content with the new completely separately hosted React content. This needs to occur after clicking a link on the asp.net webforms page.
I managed to create a ‘Create React app’ website prototype and it was simple to load it into the iframe by linking directly to the React website. I came unstuck when I wanted to try and add an authentication token into the header (oauth2 with openid connect for use with IdentityServer). The only way I could see to do this was to try using javascript to add the header by making an XMLHttpRequest object (or I tried also using the Fetch API) and this partially worked but not everything was correctly loaded.
I see for example an answer here How to embed React App into another website which I assume is the best way to add the website into an iframe.
So, I can’t find much on the internet about dealing with authentication… I guess because asp.net webforms are so old by now, but I assume others have wanted to do something similar before. The question I have, is what would be considered to be the best way to do this? I don’t know if I’m going in completely the wrong direction.
I made a progressive web app with Create React App.
The user shall be able to make data available offline by clicking i.e. a button. Is there a convention or best practise to do that?
I have read this awesome documentation, that helps to make your PWA work offline
Part 1
Part 2
Have a look at workbox. It's used in Create React App as well as Next.js.
The actual answer to the question can be found in section Access Caches from Your Web App's Code.
I have a generated Zoho CRM webform for Contact us. I need to integrate that form into my react application and submit user inputs. I can get the iframe version, javascript version, and HTML/CSS version of the generated code. I want to know which one is best for the Reactjs PWA application and can we use this directly with react. Can someone help me with this?
I would suggest avoiding iframe altogether. You might find a lot of issues when dealing with cross-domain artifacts and policies. If you want to customize the look and feel of the form, better go ahead with the HTML & CSS version. JavaScript file will be an external dependency. It also would be a hacky / non-react way.