Skip to content

Commit b137f4e

Browse files
jhen0409CAMOBAP
jhen0409
and
CAMOBAP
authored
Support capture SurfaceView on Android (#427)
* Add possibility to capture SurfaceView content * Use PixelCopy to include content of SurfaceView in screenshot * Disable SurfaceView screenshot by default, but allow to enable it Co-authored-by: Alexande B <[email protected]> * Use main looper for PixelCopy request to avoid blocking * Create new bitmap on PixelCopy.request for correct view position * Update react-native-video & example * Use react-native-video v6 alpha (Use the exoplayer intergration by default) * Add another video view and enable surface view mode * Use applyTransformations for draw surface view content Co-authored-by: Alexande B <[email protected]>
1 parent e7fa41a commit b137f4e

File tree

10 files changed

+163
-61
lines changed

10 files changed

+163
-61
lines changed

‎android/src/main/java/fr/greweb/reactnativeviewshot/RNViewShotModule.java‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ public void captureRef(int tag, ReadableMap options, Promise promise) {
8686
final String resultStreamFormat = options.getString("result");
8787
final String fileName = options.hasKey("fileName") ? options.getString("fileName") : null;
8888
final Boolean snapshotContentContainer = options.getBoolean("snapshotContentContainer");
89+
final boolean handleGLSurfaceView = options.hasKey("handleGLSurfaceViewOnAndroid") && options.getBoolean("handleGLSurfaceViewOnAndroid");
8990

9091
try {
9192
File outputFile = null;
@@ -99,7 +100,7 @@ public void captureRef(int tag, ReadableMap options, Promise promise) {
99100
uiManager.addUIBlock(new ViewShot(
100101
tag, extension, imageFormat, quality,
101102
scaleWidth, scaleHeight, outputFile, resultStreamFormat,
102-
snapshotContentContainer, reactContext, activity, promise)
103+
snapshotContentContainer, reactContext, activity, handleGLSurfaceView, promise)
103104
);
104105
} catch (final Throwable ex) {
105106
Log.e(RNVIEW_SHOT, "Failed to snapshot view tag " + tag, ex);

‎android/src/main/java/fr/greweb/reactnativeviewshot/ViewShot.java‎

Lines changed: 62 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,20 @@
88
import android.graphics.Paint;
99
import android.graphics.Point;
1010
import android.net.Uri;
11-
11+
import android.os.Build;
12+
import android.os.Handler;
1213
import androidx.annotation.IntDef;
1314
import androidx.annotation.NonNull;
1415
import androidx.annotation.StringDef;
1516

1617
import android.os.Build;
1718
import android.os.Handler;
1819
import android.os.HandlerThread;
20+
import android.os.Looper;
1921
import android.util.Base64;
2022
import android.util.Log;
23+
import android.view.PixelCopy;
24+
import android.view.SurfaceView;
2125
import android.view.TextureView;
2226
import android.view.View;
2327
import android.view.ViewGroup;
@@ -44,6 +48,8 @@
4448
import java.util.Locale;
4549
import java.util.Set;
4650
import java.util.WeakHashMap;
51+
import java.util.concurrent.CountDownLatch;
52+
import java.util.concurrent.TimeUnit;
4753
import java.util.zip.Deflater;
4854

4955
import javax.annotation.Nullable;
@@ -71,6 +77,10 @@ public class ViewShot implements UIBlock, LifecycleEventListener {
7177
* ARGB size in bytes.
7278
*/
7379
private static final int ARGB_SIZE = 4;
80+
/**
81+
* Wait timeout for surface view capture.
82+
*/
83+
private static final int SURFACE_VIEW_READ_PIXELS_TIMEOUT = 5;
7484

7585
private HandlerThread mBgThread;
7686
private Handler mBgHandler;
@@ -157,6 +167,7 @@ public void run() {
157167
private final Boolean snapshotContentContainer;
158168
@SuppressWarnings({"unused", "FieldCanBeLocal"})
159169
private final ReactApplicationContext reactContext;
170+
private final boolean handleGLSurfaceView;
160171
private final Activity currentActivity;
161172
//endregion
162173

@@ -174,6 +185,7 @@ public ViewShot(
174185
final Boolean snapshotContentContainer,
175186
final ReactApplicationContext reactContext,
176187
final Activity currentActivity,
188+
final boolean handleGLSurfaceView,
177189
final Promise promise) {
178190
this.tag = tag;
179191
this.extension = extension;
@@ -186,6 +198,7 @@ public ViewShot(
186198
this.snapshotContentContainer = snapshotContentContainer;
187199
this.reactContext = reactContext;
188200
this.currentActivity = currentActivity;
201+
this.handleGLSurfaceView = handleGLSurfaceView;
189202
this.promise = promise;
190203

191204
reactContext.addLifecycleEventListener(this);
@@ -405,26 +418,54 @@ private Point captureViewImpl(@NonNull final View view, @NonNull final OutputStr
405418

406419
for (final View child : childrenList) {
407420
// skip any child that we don't know how to process
408-
if (!(child instanceof TextureView)) continue;
409-
410-
// skip all invisible to user child views
411-
if (child.getVisibility() != VISIBLE) continue;
412-
413-
final TextureView tvChild = (TextureView) child;
414-
tvChild.setOpaque(false); // <-- switch off background fill
415-
416-
// NOTE (olku): get re-usable bitmap. TextureView should use bitmaps with matching size,
417-
// otherwise content of the TextureView will be scaled to provided bitmap dimensions
418-
final Bitmap childBitmapBuffer = tvChild.getBitmap(getExactBitmapForScreenshot(child.getWidth(), child.getHeight()));
419-
420-
final int countCanvasSave = c.save();
421-
applyTransformations(c, view, child);
422-
423-
// due to re-use of bitmaps for screenshot, we can get bitmap that is bigger in size than requested
424-
c.drawBitmap(childBitmapBuffer, 0, 0, paint);
425-
426-
c.restoreToCount(countCanvasSave);
427-
recycleBitmap(childBitmapBuffer);
421+
if (child instanceof TextureView) {
422+
// skip all invisible to user child views
423+
if (child.getVisibility() != VISIBLE) continue;
424+
425+
final TextureView tvChild = (TextureView) child;
426+
tvChild.setOpaque(false); // <-- switch off background fill
427+
428+
// NOTE (olku): get re-usable bitmap. TextureView should use bitmaps with matching size,
429+
// otherwise content of the TextureView will be scaled to provided bitmap dimensions
430+
final Bitmap childBitmapBuffer = tvChild.getBitmap(getExactBitmapForScreenshot(child.getWidth(), child.getHeight()));
431+
432+
final int countCanvasSave = c.save();
433+
applyTransformations(c, view, child);
434+
435+
// due to re-use of bitmaps for screenshot, we can get bitmap that is bigger in size than requested
436+
c.drawBitmap(childBitmapBuffer, 0, 0, paint);
437+
438+
c.restoreToCount(countCanvasSave);
439+
recycleBitmap(childBitmapBuffer);
440+
} else if (child instanceof SurfaceView && handleGLSurfaceView) {
441+
final SurfaceView svChild = (SurfaceView)child;
442+
final CountDownLatch latch = new CountDownLatch(1);
443+
444+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
445+
final Bitmap childBitmapBuffer = getExactBitmapForScreenshot(child.getWidth(), child.getHeight());
446+
try {
447+
PixelCopy.request(svChild, childBitmapBuffer, new PixelCopy.OnPixelCopyFinishedListener() {
448+
@Override
449+
public void onPixelCopyFinished(int copyResult) {
450+
final int countCanvasSave = c.save();
451+
applyTransformations(c, view, child);
452+
c.drawBitmap(childBitmapBuffer, 0, 0, paint);
453+
c.restoreToCount(countCanvasSave);
454+
recycleBitmap(childBitmapBuffer);
455+
latch.countDown();
456+
}
457+
}, new Handler(Looper.getMainLooper()));
458+
latch.await(SURFACE_VIEW_READ_PIXELS_TIMEOUT, TimeUnit.SECONDS);
459+
} catch (Exception e) {
460+
Log.e(TAG, "Cannot PixelCopy for " + svChild, e);
461+
}
462+
} else {
463+
Bitmap cache = svChild.getDrawingCache();
464+
if (cache != null) {
465+
c.drawBitmap(svChild.getDrawingCache(), 0, 0, paint);
466+
}
467+
}
468+
}
428469
}
429470

430471
if (width != null && height != null && (width != w || height != h)) {

‎example/Example/ios/Example.xcodeproj/project.pbxproj‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88

99
/* Begin PBXBuildFile section */
1010
00E356F31AD99517003FC87E /* ExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ExampleTests.m */; };
11-
0C80B921A6F3F58F76C31292 /* libPods-Example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-Example.a */; };
1211
13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
1312
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
1413
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
15-
7699B88040F8A987B510C191 /* libPods-Example-ExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-Example-ExampleTests.a */; };
14+
18B88FE9BEF1140FF52CCEC0 /* libPods-Example-ExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 169C542F436F5321740B320E /* libPods-Example-ExampleTests.a */; };
15+
5988C3FBC6135EB858E1BD70 /* libPods-Example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7AEBA4E17C14A4CB566F0E2B /* libPods-Example.a */; };
1616
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
1717
/* End PBXBuildFile section */
1818

@@ -36,11 +36,11 @@
3636
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Example/Images.xcassets; sourceTree = "<group>"; };
3737
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = "<group>"; };
3838
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = "<group>"; };
39-
19F6CBCC0A4E27FBF8BF4A61 /* libPods-Example-ExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Example-ExampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
39+
169C542F436F5321740B320E /* libPods-Example-ExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Example-ExampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
4040
3B4392A12AC88292D35C810B /* Pods-Example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Example.debug.xcconfig"; path = "Target Support Files/Pods-Example/Pods-Example.debug.xcconfig"; sourceTree = "<group>"; };
4141
5709B34CF0A7D63546082F79 /* Pods-Example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Example.release.xcconfig"; path = "Target Support Files/Pods-Example/Pods-Example.release.xcconfig"; sourceTree = "<group>"; };
4242
5B7EB9410499542E8C5724F5 /* Pods-Example-ExampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Example-ExampleTests.debug.xcconfig"; path = "Target Support Files/Pods-Example-ExampleTests/Pods-Example-ExampleTests.debug.xcconfig"; sourceTree = "<group>"; };
43-
5DCACB8F33CDC322A6C60F78 /* libPods-Example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Example.a"; sourceTree = BUILT_PRODUCTS_DIR; };
43+
7AEBA4E17C14A4CB566F0E2B /* libPods-Example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Example.a"; sourceTree = BUILT_PRODUCTS_DIR; };
4444
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = Example/LaunchScreen.storyboard; sourceTree = "<group>"; };
4545
89C6BE57DB24E9ADA2F236DE /* Pods-Example-ExampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Example-ExampleTests.release.xcconfig"; path = "Target Support Files/Pods-Example-ExampleTests/Pods-Example-ExampleTests.release.xcconfig"; sourceTree = "<group>"; };
4646
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -51,15 +51,15 @@
5151
isa = PBXFrameworksBuildPhase;
5252
buildActionMask = 2147483647;
5353
files = (
54-
7699B88040F8A987B510C191 /* libPods-Example-ExampleTests.a in Frameworks */,
54+
18B88FE9BEF1140FF52CCEC0 /* libPods-Example-ExampleTests.a in Frameworks */,
5555
);
5656
runOnlyForDeploymentPostprocessing = 0;
5757
};
5858
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
5959
isa = PBXFrameworksBuildPhase;
6060
buildActionMask = 2147483647;
6161
files = (
62-
0C80B921A6F3F58F76C31292 /* libPods-Example.a in Frameworks */,
62+
5988C3FBC6135EB858E1BD70 /* libPods-Example.a in Frameworks */,
6363
);
6464
runOnlyForDeploymentPostprocessing = 0;
6565
};
@@ -100,8 +100,8 @@
100100
isa = PBXGroup;
101101
children = (
102102
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
103-
5DCACB8F33CDC322A6C60F78 /* libPods-Example.a */,
104-
19F6CBCC0A4E27FBF8BF4A61 /* libPods-Example-ExampleTests.a */,
103+
7AEBA4E17C14A4CB566F0E2B /* libPods-Example.a */,
104+
169C542F436F5321740B320E /* libPods-Example-ExampleTests.a */,
105105
);
106106
name = Frameworks;
107107
sourceTree = "<group>";

‎example/Example/ios/Podfile.lock‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ PODS:
7575
- glog (0.3.5)
7676
- libevent (2.1.12)
7777
- OpenSSL-Universal (1.1.1100)
78+
- PromisesObjC (2.1.1)
79+
- PromisesSwift (2.1.1):
80+
- PromisesObjC (= 2.1.1)
7881
- RCT-Folly (2021.06.28.00-v2):
7982
- boost
8083
- DoubleConversion
@@ -292,10 +295,11 @@ PODS:
292295
- ReactCommon/turbomodule/core
293296
- react-native-slider (4.2.2):
294297
- React-Core
295-
- react-native-video (5.2.0):
298+
- react-native-video (6.0.0-alpha.1):
296299
- React-Core
297-
- react-native-video/Video (= 5.2.0)
298-
- react-native-video/Video (5.2.0):
300+
- react-native-video/Video (= 6.0.0-alpha.1)
301+
- react-native-video/Video (6.0.0-alpha.1):
302+
- PromisesSwift
299303
- React-Core
300304
- react-native-view-shot (3.3.0-next.0):
301305
- React-Core
@@ -499,6 +503,8 @@ SPEC REPOS:
499503
- fmt
500504
- libevent
501505
- OpenSSL-Universal
506+
- PromisesObjC
507+
- PromisesSwift
502508
- SocketRocket
503509
- YogaKit
504510

@@ -613,6 +619,8 @@ SPEC CHECKSUMS:
613619
glog: 476ee3e89abb49e07f822b48323c51c57124b572
614620
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
615621
OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
622+
PromisesObjC: ab77feca74fa2823e7af4249b8326368e61014cb
623+
PromisesSwift: 99fddfe4a0ec88a56486644c0da106694c92a604
616624
RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
617625
RCTRequired: 3e917ea5377751094f38145fdece525aa90545a0
618626
RCTTypeSafety: c43c072a4bd60feb49a9570b0517892b4305c45e
@@ -629,7 +637,7 @@ SPEC CHECKSUMS:
629637
react-native-maps: 8b8bfada2c86205a7f5a07dd1f92f29b33ea83aa
630638
react-native-safe-area-context: ebf8c413eb8b5f7c392a036a315eb7b46b96845f
631639
react-native-slider: 2f25c919f1dc309b90e2cc8346b8042ecec2102f
632-
react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28
640+
react-native-video: bb6f12a7198db53b261fefb5d609dc77417acc8b
633641
react-native-view-shot: 47106be5202c2554b4f106845616a8a158aae614
634642
react-native-webview: 8ec7ddf9eb4ddcd92b32cee7907efec19a9ec7cb
635643
React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6

‎example/Example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"react-native-screens": "^3.13.1",
3030
"react-native-svg": "^12.3.0",
3131
"react-native-svg-uri": "^1.2.3",
32-
"react-native-video": "^5.2.0",
32+
"react-native-video": "^6.0.0-alpha.1",
3333
"react-native-view-shot": "^3.3.0-next.0",
3434
"react-native-webview": "^11.18.2"
3535
},

‎example/Example/src/Full.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const App = () => {
3737
const mapViewRef = useRef();
3838
const webviewRef = useRef();
3939
const videoRef = useRef();
40+
const videoSurfaceRef = useRef();
4041
const transformParentRef = useRef();
4142
const transformRef = useRef();
4243
const surfaceRef = useRef();
@@ -82,8 +83,9 @@ const App = () => {
8283
}, []);
8384

8485
const capture = useCallback(
85-
ref => {
86-
(ref ? captureRef(ref, config) : captureScreen(config))
86+
(ref, options = {}) => {
87+
const opts = {...config, ...options};
88+
(ref ? captureRef(ref, opts) : captureScreen(opts))
8789
.then(res =>
8890
config.result !== 'file'
8991
? res
@@ -159,6 +161,12 @@ const App = () => {
159161
<Btn label="📷 MapView" onPress={() => capture(mapViewRef)} />
160162
<Btn label="📷 WebView" onPress={() => capture(webviewRef)} />
161163
<Btn label="📷 Video" onPress={() => capture(videoRef)} />
164+
<Btn
165+
label="📷 Video with SurfaceView (Android)"
166+
onPress={() =>
167+
capture(videoRef, {handleGLSurfaceViewOnAndroid: true})
168+
}
169+
/>
162170
<Btn label="📷 Native Screenshot" onPress={() => capture()} />
163171
<Btn
164172
label="📷 Empty View (should crash)"
@@ -326,10 +334,20 @@ const App = () => {
326334
</View>
327335
<Video
328336
ref={videoRef}
337+
disableFocus // NOTE: https://github.com/react-native-video/react-native-video/issues/2666
338+
style={{width: 300, height: 300}}
339+
source={require('./broadchurch.mp4')}
340+
volume={0}
341+
repeat
342+
/>
343+
<Video
344+
ref={videoSurfaceRef}
345+
disableFocus // NOTE: https://github.com/react-native-video/react-native-video/issues/2666
329346
style={{width: 300, height: 300}}
330347
source={require('./broadchurch.mp4')}
331348
volume={0}
332349
repeat
350+
useTextureView={false} // Use SurfaceView
333351
/>
334352
</View>
335353
</ScrollView>

‎example/Example/src/Video.js‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,47 @@
11
//@flow
2-
import React, { useState, useCallback } from 'react';
3-
import { SafeAreaView, Image } from 'react-native';
2+
import React, {useState, useCallback} from 'react';
3+
import {SafeAreaView, Image} from 'react-native';
44
import ViewShot from 'react-native-view-shot';
55
import Video from 'react-native-video';
66
import Desc from './Desc';
77

8-
const dimension = { width: 300, height: 300 };
8+
const sample = require('./broadchurch.mp4');
99

1010
const VideoExample = () => {
1111
const [source, setSource] = useState(null);
12-
const onCapture = useCallback(uri => setSource({ uri }), []);
12+
const onCapture = useCallback(uri => setSource({uri}), []);
1313
return (
1414
<SafeAreaView>
15-
<ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
16-
<Video style={dimension} source={require('./broadchurch.mp4')} volume={0} repeat />
15+
<ViewShot
16+
options={{handleGLSurfaceViewOnAndroid: true}}
17+
onCapture={onCapture}
18+
captureMode="continuous">
19+
<Video
20+
disableFocus // NOTE: https://github.com/react-native-video/react-native-video/issues/2666
21+
style={{width: 180, height: 90}}
22+
source={sample}
23+
volume={0}
24+
repeat
25+
resizeMode="cover"
26+
/>
27+
<Video
28+
disableFocus // NOTE: https://github.com/react-native-video/react-native-video/issues/2666
29+
style={{width: 180, height: 90}}
30+
source={sample}
31+
volume={0}
32+
repeat
33+
resizeMode="cover"
34+
useTextureView={false} // Use SurfaceView
35+
/>
1736
</ViewShot>
1837

1938
<Desc desc="above is a video and below is a continuous screenshot of it" />
2039

21-
<Image fadeDuration={0} source={source} style={dimension} />
40+
<Image
41+
fadeDuration={0}
42+
source={source}
43+
style={{width: '100%', height: 196}}
44+
/>
2245
</SafeAreaView>
2346
);
2447
};

0 commit comments

Comments
 (0)