How to get started with WebRTC? - webrtc

I am a beginner with WebRTC, and I would like to know if there is anything I need to import to use the JavaScript APIs.

No, you do not need to import any library. webRTC is included in Chrome and Firefox (and for Chrome beta and Firefox on Android).
Your error may be because you need to prefix it with webkit like this:
peer = new webkitRTCPeerConnection(...)

You don't need to include anything to use WebRTC's APIs, but as a practical matter, you will probably want to use an adapter to normalize API naming differences between browser vendors (e.g. webkitGetUserMedia/mozGetuserMedia).
Google maintains a nice adapter that does this, and handles a few gotcha errors you might run into if using them directly.
Just include the following script in your page.
https://code.google.com/p/webrtc/source/browse/trunk/samples/js/base/adapter.js

Related

Chrome manifest v3 - is there a viable workaround to use Google's File Picker in a Chrome extension?

My searches have turned up nothing concrete. My extension uses Google's file picker to allow the user to browse their sheets and choose a desired file to write some data to, which manifest v3 breaks because of some GAPI limitations. Unless I've missed something obvious, there does not seem to be a simple workaround or method for this to migrate to v3 -- it just seems to be disallowed.
I'm not asking if there's a way to do something that they intend to not be possible (even though I doubt such a thing would exist with Google) but I'm optimistically hoping that maybe there is some hacky/annoying workaround that still fits within their rules. If I absolutely have to just allow them to set a sheet URL manually I will...I'm just trying to avoid it.
Any tips or suggestions would be appreciated.
You may have to test it yourself to make sure there are no weird behaviors, but Google has some recommendations regarding this in their migration guide:
In Manifest V3, all of your extension's logic must be included in the extension. You can no longer load and execute a remotely hosted file. A number of alternative approaches are available, depending on your use case and the reason for remote hosting. Here are approaches to consider:
Configuration-driven features and logic
In this approach, your extension loads a remote configuration (for example a JSON file) at runtime and caches the configuration locally. The extension then uses this cached configuration to decide which features to enable.
Externalize logic with a remote service
Consider migrating application logic from the extension to a remote web service that your extension can call. (Essentially a form of message passing.) This provides you the ability to keep code private and change the code on demand while avoiding the extra overhead of resubmitting to the Chrome Web Store.
Bundle third-party libraries
If you are using a popular framework like React or Bootstrap, you can download the minified files, add them to your project and import them locally.
For your case, option #3 seems like the easiest. Looking at the Google Picker API documentation it only uses two relatively small script files, https://apis.google.com/js/api.js and https://accounts.google.com/gsi/client. You could try to bundle these in your Chrome extension and call the methods locally.

How to use webauthn without key fob

I have tried my firefox 62 and chromium on various webauthn examples and I could not make any of them work. Are those supposed to work without special hardware? I activated security.webauth.webauthn_enable_softtoken in about:config. Though I can't find much documentation on what exactly it does. Is webauthn ever supposed to work without special hardware?
https://webauthn.bin.coffee/
https://webauthn.io/
https://webauthndemo.appspot.com/
To be able to use the "softtoken" in Firefox you have to enable it and disable the usbtoken:
security.webauth.webauthn_enable_softtoken=true
security.webauth.webauthn_enable_usbtoken=false
Then you can test on https://webauthn.bin.coffee/ and https://webauthn.io/ .
However, I have no idea how exactly it works and where its documentation is located.
As for the question how to use Webauthn, it should be possible according to the standard, but if browsers support it is another thing. Check this comment: https://github.com/w3c/webauthn/issues/1027#issuecomment-411441722
The spec is indeed written with hardware-backed authenticators (external or built-in) as the main concern, but WebAuthn does not in any way forbid integration of purely software-based authenticators.
...
It's perfectly possible for browsers or browser plugins to provide support for software authenticators, although WebAuthn provides no standardised API for doing that.
Well, WebAuthn is evolving technology. Supported only in Firefox/Chrome Desktop and Chrome Mobile browsers.
You'll need some U2F stuff like https://www.yubico.com/products/yubikey-for-mobile/
or AddOns like https://krypt.co/
Webauthn is pretty widely supported now, and it works in modern browsers without a roaming authenticator (a USB device or similar). It's very easy to test on the site you mentioned, https://webauthn.io/
https://caniuse.com/#search=webauthn

Working with multiple APIs for Multi-platform apps

I currently have a Chrome extension that uses Chrome's APIs and plan on making a Microsoft Edge version once it opens up as well. My question is how do you work with the multiple API's?
For example, I use the following to check if the extension has just been installed or not:
chrome.runtime.onInstalled
I'm assuming for Edge it would be something like:
edge.runtime.onInstalled
What's the best way to work with both of these? Do I just duplicate the code within the file where there is a copy of the code for one and the other and presumably the browser will ignore the other browser's code? (doesn't sound like the good option)
Or is there some cross-browser framework that I should use instead?
Or is there some other solution?
And please forgive me, this is my first entry into building extensions/apps, I'm generally just a Web Designer.
Thank you!
All browsers support or
chrome.runtime.onInstalled
or
browser.runtime.onInstalled
So, the right way is to start scripts in your extension with this code:
var browser = browser || chrome
And then use browser, for example:
browser.runtime.onInstalled
(I'm sorry about my english)
Edit:
Chrome and Opera support chrome and not browser.
Firefox support chrome and browser.
Edge support browser and I don't know if it support chrome.
Anyway, my solution work in all browsers.
Update (5.8.16):
Edge support browser and not chrome.

WebRTC Firefox to Chrome video call not working

My WebRTC app works fine when I connect two of the same browsers, but when I try a combination neither respond to each others signaling messages. Something probably worth mentioning is that I have not implemented TURN, however I don't see why that should make a difference so I'm not going to change that unless I'm fairly certain it will.
I don't have much of a clue where the error lies, so I will just add code on request for the sake of readability.
Make sure you enable DTLS-SRTP (Firefox only supports DTLS-SRTP) by passing the following to the PeerConnection constructor:
{ 'optional': [{'DtlsSrtpKeyAgreement': 'true'}]}
See this page for more details.
You have not really described what goes wrong with the signaling. No error messages and so on.
But based on the fact that you only see the fault when using two different web browsers I would recommend using Adapter.js that have been somewhat promoted from webRTC.
Link to webRTC demo that shows on the interoperability using Adapter.js(page also contains a link to Adapter.js):http://www.webrtc.org/demo
Direct link to
adapter.js
Try to turn off your firewalls to check if it fixes the problem.
In my case (Windown 7), default windows firewall didn't allow UDP for Private Inbound Connection Setting and Firefox + Chrome p2p connection just didn't work.
Hope it helps.

How to export Safari Web Inspector timeline data?

Just like in Chrome Developer Tool, I was wondering if there is any tool/extension/plugin which would allow me to export timeline data in Safari. I tried the nightly build of webkit but it does not have that feature. Seems like this is a Chrome specific functionality.
I have to use Safari because I am testing a webapp on iPhone.
I searched around for any hints but could not get any. As of now I am thinking of two options to get the timeline information:
Build a Safari extension
Get Chrome Dev Tool's timeline code and build my own version of webkit (if that's even possible!)
Any guides/insights would be highly appreciated!
Update 1: I downloaded Webkit and found out that it supports remote iPhone debugging through USB. Probably I can find the code for web inspector for Webkit and use that code to export the timeline data.
Safari's Web inspector does use the WebKit remote debugging protocol.
However, Safari does not use TCP/HTTP as a transport layer, thus
making it incompatible with Chrome. source
Thankfully, someone from Google wrote a proxy allowing to overcome this limitation.