[Example] Add custom native ARSCNView example (With ARFaceTrackingConfiguration

Author: jhen0409

packages/RNWebRTCARExample/README.md

@@ -1,5 +1,8 @@
 # Example for react-native-webrtc-ar-session
 
+- Example 1: AR scene example with `react-native-arkit`
+- Example 2: AR face tracking example with [custom native view](ios/ExampleARSCNViewManager.m) (You can switch it on Setting)
+
 ## Installation
 
 ```bash

packages/RNWebRTCARExample/ios/ExampleARSCNViewManager.h

@@ -1,13 +1,7 @@
-//
-//  ExampleARSCNViewManager.h
-//  RNWebRTCARExample
-//
-//  Created by Jhen-Jie Hong on 2020/2/27.
-//  Copyright © 2020 Facebook. All rights reserved.
-//
+#import <ARkit/ARKit.h>
+#import <React/RCTViewManager.h>
+#import <React/RCTBridgeModule.h>
 
-#ifndef ExampleARSCNViewManager_h
-#define ExampleARSCNViewManager_h
+@interface ExampleARSCNViewManager : RCTViewManager <RCTBridgeModule>
 
-
-#endif /* ExampleARSCNViewManager_h */
+@end

packages/RNWebRTCARExample/ios/ExampleARSCNViewManager.m

@@ -1,9 +1,60 @@
-//
-//  ExampleARSCNViewManager.m
-//  RNWebRTCARExample
-//
-//  Created by Jhen-Jie Hong on 2020/2/27.
-//  Copyright © 2020 Facebook. All rights reserved.
-//
-
-#import <Foundation/Foundation.h>
+#import "ExampleARSCNViewManager.h"
+#import <React/RCTUIManager.h>
+#import <RNWebRTCARSession/RNWebRTCARSession.h>
+
+@interface ExampleARSCNViewManager () <ARSCNViewDelegate, ARSessionDelegate>
+
+@end
+
+@implementation ExampleARSCNViewManager
+
+static ARSCNView *_arView = nil;
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  return [self instance];
+}
+
+- (ARSCNView*)instance {
+  if (_arView != nil) {
+    return _arView;
+  }
+  ARSCNView *arView = [[ARSCNView alloc] init];
+  arView.delegate = self;
+  arView.session.delegate = self;
+  arView.showsStatistics = true;
+  _arView = arView;
+  [self resume];
+  return _arView;
+}
+
+- (void)pause {
+  [_arView.session pause];
+}
+
+- (void)resume {
+  ARFaceTrackingConfiguration *configuration = [ARFaceTrackingConfiguration new];
+  [_arView.session runWithConfiguration:configuration];
+}
+
+#pragma mark - ARSCNViewDelegate
+- (nullable SCNNode *)renderer:(id <SCNSceneRenderer>)renderer nodeForAnchor:(ARAnchor *)anchor {
+  ARSCNFaceGeometry *faceMesh = [ARSCNFaceGeometry faceGeometryWithDevice:_arView.device];
+  SCNNode *node = [SCNNode nodeWithGeometry:faceMesh];
+  node.geometry.firstMaterial.fillMode = SCNFillModeLines;
+  return node;
+}
+
+RCT_EXPORT_METHOD(injectARSession:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
+  [RNWebRTCARSession setArView:_arView];
+  resolve(@{});
+}
+
+RCT_EXPORT_METHOD(revertARSession:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
+  [RNWebRTCARSession setArView:nil];
+  resolve(@{});
+}
+
+@end

packages/RNWebRTCARExample/ios/RNWebRTCARExample.xcodeproj/project.pbxproj

@@ -18,6 +18,7 @@
 		2DCD954D1E0B4F2C00145EB5 /* RNWebRTCARExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* RNWebRTCARExampleTests.m */; };
 		7F53579623FCD62A00634B31 /* PocketSVG.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 7F53579323FCD60F00634B31 /* PocketSVG.framework */; };
 		7F53579723FCD62A00634B31 /* PocketSVG.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 7F53579323FCD60F00634B31 /* PocketSVG.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
+		7F6ED7E024074B8E0079A14F /* ExampleARSCNViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 7F6ED7DF24074B8E0079A14F /* ExampleARSCNViewManager.m */; };
 		7FDD52672400E7A000CC0904 /* art.scnassets in Resources */ = {isa = PBXBuildFile; fileRef = 7FDD52662400E7A000CC0904 /* art.scnassets */; };
 		89B0909A2BE3D812E139EA70 /* libPods-RNWebRTCARExample-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 26B1CAA6CB7697A05C157EE8 /* libPods-RNWebRTCARExample-tvOS.a */; };
 		8ADC3F819262FE7D8BA12992 /* libPods-RNWebRTCARExample-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 075370F613C3C04B90D431A5 /* libPods-RNWebRTCARExample-tvOSTests.a */; };
@@ -139,6 +140,8 @@
 		7F53578723FCD60F00634B31 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		7F53578823FCD60F00634B31 /* MacDemo.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MacDemo.swift; sourceTree = "<group>"; };
 		7F53578923FCD60F00634B31 /* PocketSVG.podspec */ = {isa = PBXFileReference; lastKnownFileType = text; path = PocketSVG.podspec; sourceTree = "<group>"; };
+		7F6ED7DE24074B7B0079A14F /* ExampleARSCNViewManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ExampleARSCNViewManager.h; sourceTree = "<group>"; };
+		7F6ED7DF24074B8E0079A14F /* ExampleARSCNViewManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExampleARSCNViewManager.m; sourceTree = "<group>"; };
 		7FDD52662400E7A000CC0904 /* art.scnassets */ = {isa = PBXFileReference; lastKnownFileType = wrapper.scnassets; name = art.scnassets; path = RNWebRTCARExample/art.scnassets; sourceTree = "<group>"; };
 		A9ACBCDE1E25148D207915D7 /* Pods-RNWebRTCARExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNWebRTCARExample.debug.xcconfig"; path = "Target Support Files/Pods-RNWebRTCARExample/Pods-RNWebRTCARExample.debug.xcconfig"; sourceTree = "<group>"; };
 		D4924D71DCDD958C08AF9A7C /* Pods-RNWebRTCARExample-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNWebRTCARExample-tvOS.release.xcconfig"; path = "Target Support Files/Pods-RNWebRTCARExample-tvOS/Pods-RNWebRTCARExample-tvOS.release.xcconfig"; sourceTree = "<group>"; };
@@ -215,6 +218,8 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				7F6ED7DE24074B7B0079A14F /* ExampleARSCNViewManager.h */,
+				7F6ED7DF24074B8E0079A14F /* ExampleARSCNViewManager.m */,
 			);
 			name = RNWebRTCARExample;
 			sourceTree = "<group>";
@@ -800,6 +805,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				7F6ED7E024074B8E0079A14F /* ExampleARSCNViewManager.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);

packages/RNWebRTCARExample/js/AR.js

@@ -1,12 +1,17 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
 import { ARKit } from 'react-native-arkit'
+import ARFaceTracking from './Custom/AR'
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: 'black' },
 })
 
 export default function AR(props) {
+  const { faceTracking } = props
+  if (faceTracking) {
+    return <ARFaceTracking style={styles.container} />
+  }
   return (
     <ARKit
       style={styles.container}

packages/RNWebRTCARExample/js/App.js

@@ -18,6 +18,7 @@ export default function App() {
   const [setting, setSetting] = useState({
     debug: __DEV__,
     arEnabled: ar,
+    faceTracking: false,
   })
   const [localStreamURL, setLocalStreamURL] = useState(null)
   const [remoteStreams, setRemoteStreams] = useState({})
@@ -50,7 +51,7 @@ export default function App() {
       setRemoteStreams({})
       client.close()
     }
-  }, [setting.roomId, setting.arEnabled])
+  }, [setting.roomId, setting.arEnabled, setting.faceTracking])
 
   const handleSettingChange = useCallback(
     (name, value) =>
@@ -64,7 +65,7 @@ export default function App() {
   return (
     <>
       {setting.arEnabled ? (
-        <AR debug={setting.debug} />
+        <AR debug={setting.debug} faceTracking={setting.faceTracking} />
       ) : (
         <RTCView streamURL={localStreamURL} style={styles.container} />
       )}

packages/RNWebRTCARExample/js/Custom/AR.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react'
+import { requireNativeComponent, NativeModules } from 'react-native'
+
+const ExampleARSCNView = requireNativeComponent('ExampleARSCNView')
+
+const {
+  injectARSession,
+  revertARSession,
+} = NativeModules.ExampleARSCNViewManager
+
+export default function(props) {
+  useEffect(() => {
+    injectARSession()
+    return () => revertARSession()
+  }, [])
+  return <ExampleARSCNView {...props} />
+}

packages/RNWebRTCARExample/js/Setting.js

@@ -11,7 +11,10 @@ import {
   Linking,
 } from 'react-native'
 import { Modalize } from 'react-native-modalize'
-import { isARWorldTrackingSupported } from 'react-native-webrtc-ar-session'
+import {
+  isARWorldTrackingSupported,
+  isARFaceTrackingSupported,
+} from 'react-native-webrtc-ar-session'
 import AsyncStorage from '@react-native-community/async-storage'
 import debounce from 'lodash.debounce'
 
@@ -80,6 +83,7 @@ export default function Settings(props) {
   const [roomId, setRoomId] = useState('')
   const [debug, setDebug] = useState(__DEV__)
   const [arEnabled, setAREnabled] = useState(true)
+  const [faceTracking, setFaceTracking] = useState(false)
 
   useEffect(() => {
     AsyncStorage.getItem('roomId').then(setRoomId)
@@ -99,6 +103,10 @@ export default function Settings(props) {
     onChange('arEnabled', arEnabled)
   }, [onChange, arEnabled])
 
+  useEffect(() => {
+    onChange('faceTracking', faceTracking)
+  }, [onChange, faceTracking])
+
   const handleRoomIdChange = useMemo(
     () =>
       debounce(id => {
@@ -151,6 +159,15 @@ export default function Settings(props) {
             <Switch value={debug} onValueChange={setDebug} />
           </TouchableOpacity>
         )}
+        {isARFaceTrackingSupported && (
+          <TouchableOpacity
+            style={styles.switch}
+            onPress={() => setFaceTracking(val => !val)}
+          >
+            <Text style={styles.field}>Switch Face Tracking Example</Text>
+            <Switch value={faceTracking} onValueChange={setFaceTracking} />
+          </TouchableOpacity>
+        )}
         <View style={styles.textContainer}>
           <Text style={styles.text}>Visit</Text>
           <TouchableOpacity onPress={() => Linking.openURL(readme)}>

packages/react-native-webrtc-ar-session/README.md

@@ -44,6 +44,8 @@ You can have native ARSCNView setup without `react-native-arkit`:
 [RNWebRTCARSession setArView:__your_arscnview_here__];
 ```
 
+[Example](https://github.com/jhen0409/rn-webrtc-arkit-integration/blob/master/packages/RNWebRTCARExample/ios/ExampleARSCNViewManager.m)
+
 ## License
 
 [MIT](https://github.com/jhen0409/rn-webrtc-arkit-integration/blob/master/LICENSE.md)