Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add android take snapshot feature #365

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

chinloongtan
Copy link
Contributor

@chinloongtan chinloongtan commented Aug 6, 2020

#358

Take snapshot of remote participant video for Android.
For iOS, use react-native-view-shot.


A few changes I made that might not make it to the master branch.
I created this PR as a reference for anyone in the future who might need this feature.

  1. PatchedVideoView now extends VideoTextureView, previously VideoView.
  2. Comment out this.getSurfaceViewRenderer().applyZOrder(true); as VideoTextureView don't have that method.

captureBitmapFromYuvFrame doesn't freeze video like getBitmap does (noticeably longer). So I am keeping the implementation since it's working.


takeSnapshot intercepts renderFrame and convert the frame to bitmap, then to temp image file.
It takes snapshot of 1 participant view. (For multiple views in 1 image, you might want to think about other way to do it.)

Usage:

              <TwilioVideoParticipantView
                ref={(ref) => {
                  this.remoteView = ref;
                }}
                onSnapshot={this.onSnapshot}
                ...
              />
this.remoteView.takeSnapshot(); // put this in button `onPress`
  onSnapshot(event = {}) {
    if (event.error) {
      console.log('onSnapshot error', event.error);
      return;
    }

    console.log('Screenshot added', event.uri);
  }

Sample uri
/data/user/0/com.xxx/cache/snapshot_video3186517848496583071.png

Copy link
Collaborator

@slycoder slycoder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, looks great! Just one minor comment below before merging.

@@ -16,6 +16,6 @@
public TwilioVideoPreview(ThemedReactContext themedReactContext) {
super(themedReactContext);
CustomTwilioVideoView.registerThumbnailVideoView(this.getSurfaceViewRenderer());
this.getSurfaceViewRenderer().applyZOrder(true);
// this.getSurfaceViewRenderer().applyZOrder(true);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that it's problematic that we apply this to each view but would you mine leaving this line as is for now? I wanna try a more comprehensive approach to this going forward.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, will figure that out. Cause I did it to comply with extending PatchedVideoView from VideoTextureView

@Andriiklymiuk
Copy link

what the status of this one?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants