How to allow webview camera and microphone access from swift

Stellan Haglund 🚀 — Wed, 25 Jan 2023 15:23:56 +0000

With the release of iOS 15, Apple introduced the ability to request media capture permission directly from the WKWebView. This allows developers to have more control over how and when the user is prompted for camera and microphone access.

To implement this feature, we will first need to implement the a WKUIDelegate method To your ViewController This method is called when the WKWebView encounters a request for camera or microphone access from a website.

Here's how it looks.

    @available(iOS 15, *)
    func webView(
        _ webView: WKWebView,
        requestMediaCapturePermissionFor origin: WKSecurityOrigin,
        initiatedByFrame frame: WKFrameInfo,
        type: WKMediaCaptureType,
        decisionHandler: @escaping (WKPermissionDecision) -> Void
    ) {
        decisionHandler(.grant)
    }

You also need to add the WKUIDelegate to your ViewController and set
webView.uiDelegate = self and your done.

No more permission request from the webview. 🎉

A good thing to note though is that this will allow permissions from all sites, you should probably limit it to use only the url's you want.

Make your sveltekit app hybrid in minutes

Stellan Haglund 🚀 — Wed, 25 Jan 2023 15:16:58 +0000

Today I published a new project on Github 🎉, it's called miniflow you can visit it here.
miniflow.

What it does is listen to route changes in sveltekit and does native navigation transitions automatically, you can also add configurations from your +page.js files to create stuff like tabbars, choose your icons and so on.
An important not is that eventhough each route is pushed and popped to the stack a single webview is used the majority of the time, which means it doesn't need to reload that and the navigation is almost instant.
A few quirks here that I mention a bit further down.

It's still very early but the idea works very well and makes the app feel native directly.

The API for how to use it is still being defined but for now it looks like this

Example usage

/src/routes/+layout.svelte

import { navigating, page } from '$app/stores';

$: if($page) n($page)

function n(p){
    let n = $navigating

    if(typeof window !== 'undefined'){
        let msg = {
            from: n?.from.route.id || '', 
            to: n?.to.route.id || '',
            route: p.data,
            type: n?.type || 'initial'
        }
        if(window?.webkit?.messageHandlers?.myMessage){
            webkit.messageHandlers.myMessage.postMessage(msg)
        }      
    }
}

Then in your routes you can pass specific configurations.
src/routes/example/+page.js

Navbar with back chevron:

export async function load() {
    return {
        app: {
            type: 'plain',
            nav: {
                left: {
                    action: 'history.back()',
                    image: 'chevron-left.png',
                    title: ''
                }
            }
        }
    };
};

Or for tabs:

export async function load() {
    return {
        app: {
            type: 'tabs',
            nav: {
                left: {
                    action: '',
                    image: 'chevron-left.png',
                    title: ''
                }
            },
            tabs: [
                {
                    title: '',
                    icon: 'icon.png',
                    url: 'home'
                },
                {
                    title: '',
                    icon: 'cog.png',
                    url: 'settings'
                }
            ]
        }
    }
}

What's next

There are a lot of things that can be improved and worked on especially on the Android side, and as I plan to use this myself for several projects I intend to do it as soon as possible.

Things like

Being able to handle a remote PWA to make the app also work in offline mode.
When opening modals a new WebView is created because it can't be shown in two places at once (but I think this can be solved with some creative ideas)
Make sure theres a default view even if you don't pass anything from that specific route
A well defined API for how things are defined.
On android the Back and Home functionality isn't good at all at the moment.
Probably many more things :) but we are still very early here!

DEV Community: Stellan Haglund 🚀

How to allow webview camera and microphone access from swift

Make your sveltekit app hybrid in minutes

Example usage

What's next

Be sure to try it and let me know what you think! 👍