Add Cpp/WinRT camera module support for React Native Windows

creativehothouse · Mar 3, 2020 · 72f2dc9 · 72f2dc9
1 parent ea0e9e6
commit 72f2dc9
Show file tree

Hide file tree

Showing 22 changed files with 1,731 additions and 43 deletions.
diff --git a/docs/installation.md b/docs/installation.md
@@ -427,14 +427,21 @@ apply plugin: 'com.google.gms.google-services'
 
 # Windows
 
-1. `npm install react-native-camera --save`
-2. Link the library as described here: [react-native-windows / LinkingLibrariesWindows.md](https://github.com/microsoft/react-native-windows/blob/master/current/docs/LinkingLibrariesWindows.md)
-   For the last step of this guide, you have to add the following things to your `MainReactNativeHost.cs`:
-
-- in the import section at the very top: `using RNCamera;`
-- in `protected override List<IReactPackage> Packages => new List<IReactPackage>` add a new line with `new RNCameraPackage()`
-
+## Windows RNW C++/WinRT details
+1. `yarn install react-native-camera`
+2. Link the library as described below:
+   windows/myapp.sln
+     Add the ReactNativeCamera project to your solution.
+     Open the solution in Visual Studio 2019
+     Right-click Solution icon in Solution Explorer > Add > Existing Project Select node_modules\react-native-camera\windows\ReactNativeCameraCPP\ReactNativeCameraCPP.vcxproj
+   windows/myapp/myapp.vcxproj
+     Add a reference to ReactNativeCameraCPP to your main application project. From Visual Studio 2019:
+     Right-click main application project > Add > Reference... Check ReactNativeCameraCPP from Solution Projects.
+3. Modify files below to add the Camera package providers to your main application project
+   pch.h
+     Add #include "winrt/ReactNativeCameraCPP.h".
+  app.cpp
+     Add PackageProviders().Append(winrt::ReactNativeCameraCPP::ReactPackageProvider()); before InitializeComponent();
 3. Add the capabilities (permissions) for the webcam and microphone as described here: [docs.microsoft / audio-video-camera](https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/simple-camera-preview-access#add-capability-declarations-to-the-app-manifest)
-4. Use `RCTCamera` (RNCamera is not supported yet) like described above
 
 Follow the [Q & A](QA.md) section if you are having compilation issues.
diff --git a/windows/RNCamera/RCTCameraModule.cs b/windows/RNCamera/RCTCameraModule.cs
@@ -24,8 +24,6 @@ class RCTCameraModule : ReactContextNativeModuleBase, ILifecycleEventListener
         public const int CameraAspectFill = 0;
         public const int CameraAspectFit = 1;
         public const int CameraAspectStretch = 2;
-        public const int CameraCaptureModeStill = 0;
-        public const int CameraCaptureModeVideo = 1;
         public const int CameraCaptureTargetMemory = 0;
         public const int CameraCaptureTargetDisk = 1;
         public const int CameraCaptureTargetCameraRoll = 2;
@@ -64,7 +62,7 @@ public override string Name
         {
             get
             {
-                return "CameraModule";
+                return "RNCameraModule";
             }
         }
 
@@ -77,8 +75,7 @@ public override string Name
                     { "Aspect", GetAspectConstants() },
                     { "BarCodeType", GetBarcodeConstants() },
                     { "Type", GetTypeConstants() },
-                    { "CaptureQuality", GetCaptureQualityConstants() },
-                    { "CaptureMode", GetCaptureModeConstants() },
+                    { "VideoQuality", GetCaptureQualityConstants() },
                     { "CaptureTarget", GetCaptureTargetConstants() },
                     { "Orientation", GetOrientationConstants() },
                     { "FlashMode", GetFlashModeConstants() },
@@ -90,35 +87,58 @@ public override string Name
         public CameraForViewManager CameraManager { get; } = new CameraForViewManager();
 
         [ReactMethod]
-        public async void capture(JObject options, IPromise promise)
+        public async void checkMediaCapturePermission(IPromise promise)
         {
-            var viewTag = options.Value<int>("view");
+            MediaCapture newCapture = new MediaCapture();
+            try
+            {
+                await newCapture.InitializeAsync();
+            }
+            catch
+            {
+                promise.Resolve(false);
+                return;
+            }
+
+            promise.Resolve(true);
+        }
+
+        [ReactMethod]
+        public async void takePicture(JObject options, int viewTag, IPromise promise)
+        {
+            //var viewTag = options.Value<int>("view");
             var cameraForView = CameraManager.GetCameraForView(viewTag);
             if (cameraForView == null)
             {
                 promise.Reject("No camera found.");
                 return;
             }
 
-            var mode = options.Value<int>("mode");
-            if (mode == CameraCaptureModeVideo)
-            {
-                if (_recordingTask != null)
-                {
-                    promise.Reject("Cannot run more than one capture operation.");
-                    return;
-                }
+            await CapturePhotoAsync(cameraForView, options, promise).ConfigureAwait(false);
+        }
 
-                _recordingCancellation = new CancellationTokenSource();
-                _recordingTask = RecordAsync(cameraForView, options, promise, _recordingCancellation.Token);
+        [ReactMethod]
+        public void record(JObject options, int viewTag, IPromise promise)
+        {
+            //var viewTag = options.Value<int>("view");
+            var cameraForView = CameraManager.GetCameraForView(viewTag);
+            if (cameraForView == null)
+            {
+                promise.Reject("No camera found.");
                 return;
             }
-            else
+
+            if (_recordingTask != null)
             {
-                await CapturePhotoAsync(cameraForView, options, promise).ConfigureAwait(false);
+                promise.Reject("Cannot run more than one capture operation.");
+                return;
             }
+
+            _recordingCancellation = new CancellationTokenSource();
+            _recordingTask = RecordAsync(cameraForView, options, promise, _recordingCancellation.Token);
         }
 
+
         [ReactMethod]
         public async void stopCapture(IPromise promise)
         {
@@ -418,15 +438,6 @@ private static async Task ReencodeAndSavePhotoAsync(IRandomAccessStream stream,
             };
         }
 
-        private static IReadOnlyDictionary<string, object> GetCaptureModeConstants()
-        {
-            return new Dictionary<string, object>
-            {
-                { "still", CameraCaptureModeStill },
-                { "video", CameraCaptureModeVideo },
-            };
-        }
-
         private static IReadOnlyDictionary<string, object> GetCaptureTargetConstants()
         {
             return new Dictionary<string, object>

diff --git a/windows/RNCamera/RCTCameraViewManager.cs b/windows/RNCamera/RCTCameraViewManager.cs
@@ -23,7 +23,7 @@ public override string Name
         {
             get
             {
-                return "RCTCamera";
+                return "RNCamera";
             }
         }
 
@@ -68,12 +68,6 @@ public async void SetType(CaptureElement view, int type)
             await camera.UpdatePanelAsync((Windows.Devices.Enumeration.Panel)type);
         }
 
-        [ReactProp("captureQuality")]
-        public void SetCaptureQuality(CaptureElement view, int captureQuality)
-        {
-            // No reason to handle this props valeu here since it's passed to the `capture` method.
-        }
-
         [ReactProp("torchMode")]
         public void SetTorchMode(CaptureElement view, int torchMode)
         {