feat: camera support

farfromrefug · farfromrefug · commit 40cad20f54be · 2021-06-02T15:12:25.000+02:00
diff --git a/demo/App_Resources/Android/src/main/AndroidManifest.xml b/demo/App_Resources/Android/src/main/AndroidManifest.xml
@@ -14,6 +14,8 @@
 	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 	<uses-permission android:name="android.permission.INTERNET"/>
 	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+    <uses-permission android:name="android.webkit.PermissionRequest" />
+    <uses-permission android:name="android.permission.CAMERA" />
 
 	<application
 		android:name="com.tns.NativeScriptApplication"
diff --git a/demo/App_Resources/iOS/Info.plist b/demo/App_Resources/iOS/Info.plist
@@ -30,6 +30,10 @@
 	<array>
 		<string>armv7</string>
 	</array>
+
+
+    <key>NSCameraUsageDescription</key>
+    <string>lokavaluto needs your camera to scan QRCodes</string>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
diff --git a/demo/app/assets/test-data/html/camera.html b/demo/app/assets/test-data/html/camera.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <style>
+        body {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    video {
+        object-fit: cover;
+        position: absolute;
+        min-width: 100%;
+        min-height: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    </style>
+    <head>
+        <title>Blank</title>
+    </head>
+    <body>
+        <video autoplay playsinline style='z-index:-1;'>
+    </video>
+    <button onclick="startCam()">startCam</button>
+
+<script>
+
+    function startCam() {
+        console.log('startCam')
+        const constraints = {
+  video: true,
+};
+
+const video = document.querySelector("video");
+
+navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+  video.srcObject = stream;
+});
+video.onloadedmetadata = function (e) {
+                    video.play();
+                };
+    }
+
+</script>
+    </body>
+</html>
diff --git a/demo/app/main-page.ts b/demo/app/main-page.ts
@@ -7,6 +7,7 @@ import {
     ShouldOverrideUrlLoadEventData,
 } from '@nativescript-community/ui-webview';
 import * as fastEqual from 'fast-deep-equal';
+import { request } from '@nativescript-community/perms';
 
 let webview: AWebView;
 let page: Page;
@@ -26,7 +27,7 @@ export function webviewLoaded(args: LoadEventData) {
     // } else {
     //     webview.src = 'http://localhost:8080';
     // }
-    webview.src = "~/assets/test-data/html/javascript-calls.html";
+    webview.src = "~/assets/test-data/html/camera.html";
 
     webview.on(AWebView.shouldOverrideUrlLoadingEvent, (args: ShouldOverrideUrlLoadEventData) => {
         console.log(`${args.httpMethod} ${args.url}`);
@@ -37,13 +38,19 @@ export function webviewLoaded(args: LoadEventData) {
 
     webview.on(AWebView.loadFinishedEvent, (args: LoadFinishedEventData) => {
         console.log(`WebViewExt.loadFinishedEvent: ${args.url}`);
-        webview.loadStyleSheetFile('local-stylesheet.css', '~/assets/test-data/css/local-stylesheet.css', false);
+        // webview.loadStyleSheetFile('local-stylesheet.css', '~/assets/test-data/css/local-stylesheet.css', false);
     });
 
     webview.on('gotMessage', (msg) => {
         gotMessageData = msg.data;
         console.log(`webview.gotMessage: ${JSON.stringify(msg.data)} (${typeof msg})`);
     });
+
+    webview.on('requestPermissions', async (args: any) => {
+        // only android
+        const res = await request(args.permissions[0]);
+        args.callback(res[0] === 'authorized');
+    });
 }
 
 async function executeJavaScriptTest<T>(js: string, expected?: T): Promise<T> {
diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -3,6 +3,6 @@
   xmlns:nota="@nativescript-community/ui-webview">
   <GridLayout class="p-2" rows="auto, *" columns="*">
     <Button id="test_button" row="0" text="Run Tests" tap="runTests" class="btn btn-primary"></Button>
-    <nota:AWebView row="1" loaded="webviewLoaded" webConsoleEnabled="false" debugMode="true" viewPortSize="initial-scale=1.2" enterFullscreen="enterFullscreen" exitFullscreen="exitFullscreen"></nota:AWebView>
+    <nota:AWebView row="1" loaded="webviewLoaded" webRTC="true" webConsoleEnabled="true" debugMode="true" viewPortSize="initial-scale=1.2" enterFullscreen="enterFullscreen" exitFullscreen="exitFullscreen"></nota:AWebView>
   </GridLayout>
 </Page>
diff --git a/demo/package.json b/demo/package.json
@@ -30,6 +30,7 @@
   },
   "homepage": "https://github.com/NativeScript/nativescript-app-templates",
   "dependencies": {
+    "@nativescript-community/perms": "^2.1.6",
     "@nativescript-community/ui-webview": "file:../plugin",
     "@nativescript/core": "~8.0.7",
     "@nativescript/theme": "~3.0.1",
diff --git a/plugin/platforms/ios/Podfile b/plugin/platforms/ios/Podfile
@@ -0,0 +1,2 @@
+platform :ios, '11'
+pod 'WKWebViewRTC', :git => 'https://github.com/pplink/WKWebViewRTC.git', :branch => 'objc-support'
diff --git a/references.d.ts b/references.d.ts
@@ -3,3 +3,4 @@
 /// <reference path="./src/types/url.d.ts" />
 /// <reference path="./src/types/android/webviewinterface.d.ts" />
 /// <reference path="./src/types/ios/NotaWebViewExt.d.ts" />
+/// <reference path="./src/types/ios/objc!WKWebViewRTC.d.ts" />
diff --git a/src/types/ios/objc!WKWebViewRTC.d.ts b/src/types/ios/objc!WKWebViewRTC.d.ts
@@ -0,0 +1,53 @@
+
+declare class WKWebViewRTC extends NSObject implements WKScriptMessageHandler {
+
+	static alloc(): WKWebViewRTC; // inherited from NSObject
+
+	static new(): WKWebViewRTC; // inherited from NSObject
+
+	readonly debugDescription: string; // inherited from NSObjectProtocol
+
+	readonly description: string; // inherited from NSObjectProtocol
+
+	readonly hash: number; // inherited from NSObjectProtocol
+
+	readonly isProxy: boolean; // inherited from NSObjectProtocol
+
+	readonly superclass: typeof NSObject; // inherited from NSObjectProtocol
+
+	readonly  // inherited from NSObjectProtocol
+
+	constructor(o: { wkwebview: WKWebView; contentController: WKUserContentController; });
+
+	class(): typeof NSObject;
+
+	conformsToProtocol(aProtocol: any /* Protocol */): boolean;
+
+	dispose(): void;
+
+	initWithWkwebviewContentController(wkwebview: WKWebView, contentController: WKUserContentController): this;
+
+	isEqual(object: any): boolean;
+
+	isKindOfClass(aClass: typeof NSObject): boolean;
+
+	isMemberOfClass(aClass: typeof NSObject): boolean;
+
+	performSelector(aSelector: string): any;
+
+	performSelectorWithObject(aSelector: string, object: any): any;
+
+	performSelectorWithObjectWithObject(aSelector: string, object1: any, object2: any): any;
+
+	respondsToSelector(aSelector: string): boolean;
+
+	retainCount(): number;
+
+	self(): this;
+
+	userContentControllerDidReceiveScriptMessage(userContentController: WKUserContentController, message: WKScriptMessage): void;
+}
+
+declare var WKWebViewRTCVersionNumber: number;
+
+declare var WKWebViewRTCVersionString: interop.Reference<number>;
diff --git a/src/webview-ext-common.ts b/src/webview-ext-common.ts
@@ -78,6 +78,11 @@ export const supportZoomProperty = new Property<WebViewExtBase, boolean>({
     defaultValue: false,
     valueConverter: booleanConverter,
 });
+export const webRTCProperty = new Property<WebViewExtBase, boolean>({
+    name: 'webRTC',
+    defaultValue: false,
+    valueConverter: booleanConverter,
+});
 
 export const srcProperty = new Property<WebViewExtBase, string>({
     name: 'src',
@@ -223,6 +228,7 @@ export enum EventNames {
     EnterFullscreen = 'enterFullscreen',
     ExitFullscreen = 'exitFullscreen',
     WebPrompt = 'webPrompt',
+    RequestPermissions = 'requestPermissions',
 }
 
 export interface LoadJavaScriptResource {
@@ -329,6 +335,12 @@ export interface WebConsoleEventData extends WebViewExtEventData {
     };
 }
 
+export interface RequestPermissionsEventData extends WebViewExtEventData {
+    eventName: EventNames.RequestPermissions;
+    url: string;
+    permissions: string[]
+}
+
 /**
  * Event data containing information for the loading events of a WebView.
  */
@@ -436,6 +448,9 @@ export class WebViewExtBase extends ContainerView {
     public static get exitFullscreenEvent() {
         return EventNames.ExitFullscreen;
     }
+    public static get requestPermissionsEvent() {
+        return EventNames.RequestPermissions;
+    }
 
     public readonly supportXLocalScheme: boolean;
 
@@ -1536,6 +1551,29 @@ export class WebViewExtBase extends ContainerView {
     [isEnabledProperty.getDefault]() {
         return true;
     }
+
+    async _onRequestPermissions (permissions) {
+        if (!this.hasListeners(EventNames.RequestPermissions)) {
+            return false
+        }
+        return new Promise<void>((resolve, reject)=>{
+            const args = {
+                eventName: EventNames.RequestPermissions,
+                object: this,
+                url: this.src,
+                permissions: permissions,
+                callback: function (allow) {
+                    if (allow) {
+                        resolve();
+                    }
+                    else {
+                        reject();
+                    }
+                },
+            };
+            this.notify(args);
+        });
+    }
 }
 
 // eslint-disable-next-line no-redeclare
@@ -1606,6 +1644,11 @@ export interface WebViewExtBase {
      */
     on(event: EventNames.WebConsole, callback: (args: WebConsoleEventData) => void, thisArg?: any);
     once(event: EventNames.WebConsole, callback: (args: WebConsoleEventData) => void, thisArg?: any);
+    /**
+     * Get Android WebView console entries.
+     */
+    on(event: EventNames.RequestPermissions, callback: (args: WebConsoleEventData) => void, thisArg?: any);
+    once(event: EventNames.RequestPermissions, callback: (args: WebConsoleEventData) => void, thisArg?: any);
 }
 
 autoInjectJSBridgeProperty.register(WebViewExtBase);
@@ -1622,3 +1665,4 @@ scrollBounceProperty.register(WebViewExtBase);
 viewPortProperty.register(WebViewExtBase);
 isScrollEnabledProperty.register(WebViewExtBase);
 scalesPageToFitProperty.register(WebViewExtBase);
+webRTCProperty.register(WebViewExtBase);
diff --git a/src/webview-ext.android.ts b/src/webview-ext.android.ts
@@ -315,6 +315,7 @@ function initializeWebViewClient(): void {
             }
             owner._onLoadFinished(failingUrl, `${description}(${errorCode})`).catch(() => void 0);
         }
+
     }
 
     WebViewExtClient = WebViewExtClientImpl;
@@ -494,6 +495,43 @@ function initializeWebViewClient(): void {
 
             return false;
         }
+        async _onPermissionsRequest (permissionRequest: android.webkit.PermissionRequest) {
+            try {
+                const requests = permissionRequest.getResources();
+                const wantedPermissions = new Array();
+                const requestedPermissions = new Array();
+                for (let i = 0; i < requests.length; i += 1) {
+                    switch (requests[i]) {
+                        case android.webkit.PermissionRequest.RESOURCE_AUDIO_CAPTURE: {
+                            requestedPermissions.push(android.webkit.PermissionRequest.RESOURCE_AUDIO_CAPTURE);
+                            wantedPermissions.push("audio");
+                            break;
+                        }
+                        case android.webkit.PermissionRequest.RESOURCE_VIDEO_CAPTURE: {
+                            requestedPermissions.push(android.webkit.PermissionRequest.RESOURCE_VIDEO_CAPTURE);
+                            wantedPermissions.push("camera");
+                            break;
+                        }
+                    }
+                }
+                if (requestedPermissions.length === 0) {
+                    permissionRequest.deny();
+                }
+                await this.owner.get()._onRequestPermissions(wantedPermissions);
+            
+                permissionRequest.grant(requestedPermissions);
+            } catch(err) {
+                console.error(err);
+                permissionRequest.deny();
+            }
+        }
+        onPermissionRequest (permissionRequest: android.webkit.PermissionRequest) {
+            this._onPermissionsRequest(permissionRequest);
+        }
+        // onPermissionRequestCanceled (permissionRequest: android.webkit.PermissionRequest) {
+        //     console.log("onPermissionRequestCanceled", permissionRequest);
+        //     return super.onPermissionRequestCanceled(permissionRequest);
+        // }
     }
 
     WebChromeViewExtClient = WebChromeViewExtClientImpl;
diff --git a/src/webview-ext.ios.ts b/src/webview-ext.ios.ts
@@ -1,14 +1,16 @@
 import { File, Trace, alert, confirm, knownFolders, profile, prompt } from '@nativescript/core';
 import { isEnabledProperty } from '@nativescript/core/ui/core/view';
 import { webViewBridge } from './nativescript-webview-bridge-loader';
-import { NavigationType, WebViewExtBase, autoInjectJSBridgeProperty, scrollBounceProperty, NotaTraceCategory } from './webview-ext-common';
+import { NavigationType, WebViewExtBase, autoInjectJSBridgeProperty, scrollBounceProperty, NotaTraceCategory, webRTCProperty } from './webview-ext-common';
 
 export * from './webview-ext-common';
 
 const messageHandlerName = 'nsBridge';
 
 export class AWebView extends WebViewExtBase {
     public ios: WKWebView;
+    nativeViewProtected: WKWebView;
+    webViewRTC: WKWebViewRTC
 
     public static supportXLocalScheme = typeof CustomUrlSchemeHandler !== 'undefined';
 
@@ -27,7 +29,6 @@ export class AWebView extends WebViewExtBase {
     public readonly supportXLocalScheme = typeof CustomUrlSchemeHandler !== 'undefined';
 
     public viewPortSize = { initialScale: 1.0 };
-
     public createNativeView() {
         const configuration = WKWebViewConfiguration.new();
         configuration.dataDetectorTypes = WKDataDetectorTypes.All;
@@ -450,6 +451,15 @@ export class AWebView extends WebViewExtBase {
         nativeView.scrollView.userInteractionEnabled = !!enabled;
     }
 
+    [webRTCProperty.setNative](enabled: boolean) {
+        const nativeView = this.nativeViewProtected;
+        if (!nativeView || this.webViewRTC) {
+            return;
+        }
+
+        this.webViewRTC = WKWebViewRTC.alloc().initWithWkwebviewContentController(nativeView, nativeView.configuration.userContentController);
+    }
+
     /**
      * iOS11+
      *

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+platform :ios, '11'`
	`2`	`+pod 'WKWebViewRTC', :git => 'https://github.com/pplink/WKWebViewRTC.git', :branch => 'objc-support'`