Multimedia
API Reference: Device.Multimedia
Multimedia manages camera, video and image. Quick head-start for commonly used methods can be located at the example code below:
TypeScript
1
import PageSampleDesign from 'generated/pages/pageSample';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import ImageView from '@smartface/native/ui/imageview';
5
import Multimedia from '@smartface/native/device/multimedia';
6
import Button from '@smartface/native/ui/button';
7
8
//You should create new Page from UI-Editor and extend with it.
9
export default class Sample extends PageSampleDesign {
10
11
btnTakePhoto: Button;
12
btnPickPhoto: Button;
13
myImageView: ImageView;
14
15
constructor() {
16
super();
17
// Overrides super.onShow method
18
this.onShow = onShow.bind(this, this.onShow.bind(this));
19
// Overrides super.onLoad method
20
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
21
22
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
23
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
24
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
25
}
26
}
27
28
/**
29
* @event onShow
30
* This event is called when a page appears on the screen (everytime).
31
* @param {function} superOnShow super onShow function
32
* @param {Object} parameters passed from Router.go function
33
*/
34
function onShow(superOnShow: () => void) {
35
const { headerBar } = this;
36
superOnShow();
37
Application.statusBar.visible = false;
38
headerBar.visible = false;
39
}
40
41
/**
42
* @event onLoad
43
* This event is called once when page is created.
44
* @param {function} superOnLoad super onLoad function
45
*/
46
function onLoad(superOnLoad: () => void) {
47
superOnLoad();
48
49
50
this.btnTakePhoto = new Button({
51
text: "Take A Photo",
52
onPress: () => {
53
Multimedia.capturePhoto({
54
onSuccess: ({ image }) => {
55
this.myImageView.image = image;
56
},
57
aspectRatio: {
58
x: 1,
59
y: 1
60
},
61
allowsEditing: true,
62
page: this
63
});
64
}
65
});
66
67
this.btnPickPhoto = new Button({
68
text: "Pick from Gallery",
69
onPress: () => {
70
Multimedia.pickFromGallery({
71
type: Multimedia.Action.IMAGE,
72
allowsEditing: true,
73
onSuccess: ({ image }) => {
74
this.myImageView.image = image;
75
},
76
page: this
77
});
78
}
79
});
80
81
this.myImageView = new ImageView();
82
83
this.layout.addChild(this.myImageView, "myImageView", ".sf-imageView", {
84
left: 0,
85
width: 200,
86
height: 200,
87
backgrounColor: "#eaedf2",
88
imageFillType: "ASPECTFIT"
89
});
90
91
this.layout.addChild(this.btnTakePhoto, "btnTakePhoto", ".sf-button", {
92
height: 70,
93
width: 150,
94
margin: 10
95
});
96
97
this.layout.addChild(this.btnPickPhoto, "btnPickPhoto", ".sf-button", {
98
height: 70,
99
width: 150
100
});
101
}
102
Copied!

Capture a Photo from Camera

Capturing a photo is possible by using existing camera applications. Fortunately, most mobile devices already have a camera application that records video.
This example shows capturing a photo with default configurations.
1
Multimedia.capturePhoto({
2
onSuccess: ({ image }) => {
3
console.info("Capture Photo Succeed");
4
},
5
page: this
6
});
Copied!
For more parameters about capturePhoto, you can refer to the API Documentation.

Record a Video from Camera

Recording a video is possible by using existing camera applications. Fortunately, most mobile devices already have a camera application that records video.
The example below shows recording a video with passed quality and maximum video time.
For more parameters about recordVideo, you can refer to the API Documentation.
1
Multimedia.recordVideo({
2
page: this,
3
videoQuality: Multimedia.VideoQuality.HIGH,
4
maximumDuration: 10,
5
onSuccess: ({ video: File }) => {
6
console.info("Record Video Succeed");
7
}
8
})
Copied!
To write/read recorded video file, developer should obtain read/write external storage permission for Android.
To tweak the video quality, refer to the documentation below:

Picking Media from Gallery

If needed, you can access to the native Gallery application to get desired image or video.
In the current state, picking multiple photos on gallery is under development.
1
Multimedia.pickFromGallery({
2
type: Multimedia.Action.IMAGE,
3
onSuccess: ({ image }) => {
4
// Do other stuff with image. Example:
5
this.imageView1.image = image;
6
},
7
page: this
8
});
Copied!
1
import Multimedia from '@smartface/native/device/multimedia';
2
import VideoView from '@smartface/native/ui/videoview';
3
4
Multimedia.pickFromGallery({
5
type: Multimedia.Type.VIDEO,
6
onSuccess: ({ video }) => {
7
// Do other stuff with video. Example to show on videoView:
8
this.videoView1.loadFile(video);
9
},
10
page: this
11
});
Copied!

Limiting Duration on a Video

If you wish to have a limit on your picked videos like duration, you should create a dummy videoView and get the duration there. This method should be handled in async.
1
import Multimedia from '@smartface/native/device/multimedia';
2
import VideoView from '@smartface/native/ui/videoview';
3
4
async function getDurationOfGalleryVideoInSeconds(): Promise<number> {
5
return new Promise((resolve, reject) => {
6
Multimedia.pickFromGallery({
7
type: Multimedia.Type.VIDEO,
8
onSuccess: ({ video }) => {
9
try {
10
const dummyVideoView = new VideoView();
11
dummyVideoView.onReady = () => {
12
// totalDuration returns the duration in miliseconds. Converting to seconds
13
const duration = Math.floor(dummyVideoView.totalDuration / 1000);
14
resolve(duration);
15
};
16
dummyVideoView.loadFile(video);
17
}
18
catch (e) {
19
reject(`Video couldn't be loaded`);
20
}
21
},
22
onCancel: () => {
23
// Optional event for promise
24
reject(`user didn't select a video`);
25
},
26
onFailure: () => {
27
// Optional event for promise
28
reject(`video couldn't be selected`);
29
},
30
page: this
31
});
32
});
33
}
Copied!
allowsEditing property shows a screen to the user that can crop the image. For more parameters, you can refer to the API Documentation
Untitled
1
Multimedia.pickFromGallery({
2
allowsEditing : true,
3
type: Multimedia.Action.IMAGE,
4
onSuccess: function ({ image }) {
5
// Do s
6
},
7
page : this
8
});
Copied!

Crop Window Aspect Ratio

You can set the aspect ratio of the cropping window for android. Default behavior is free aspect ratio mode.
Untitled
1
Multimedia.pickFromGallery({
2
allowsEditing : true,
3
aspectRatio : {
4
x: 1,
5
y: 1
6
},
7
type: Multimedia.Type.IMAGE,
8
onSuccess: function (picked) {
9
var image = picked.image;
10
},
11
page : this
12
});
Copied!

Cropping on Android

In Android, cropping is an activity itself. So it is necessary to define cropping activity to your AndroidManifest.xml before publishing. Activities are always defined under the tag.
1
<activity android:name="io.smartface.android.sfcore.device.multimedia.crop.SFCropActivity" android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
Copied!

Android Circular Crop

The Circular shape is available for both camera and gallery image.

Note:

Cropped images with circular shapes will not produce a circular radius image. the rounded radius should be added to the image.
TypeScript
1
import PageSampleDesign from 'generated/pages/pageSample';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import ImageView from '@smartface/native/ui/imageview';
5
import Multimedia from '@smartface/native/device/multimedia';
6
import Button from '@smartface/native/ui/button';
7
8
//You should create new Page from UI-Editor and extend with it.
9
export default class Sample extends PageSampleDesign {
10
11
btnTakePhoto: Button;
12
btnPickPhoto: Button;
13
myImageView: ImageView;
14
15
constructor() {
16
super();
17
// Overrides super.onShow method
18
this.onShow = onShow.bind(this, this.onShow.bind(this));
19
// Overrides super.onLoad method
20
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
21
22
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
23
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
24
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
25
}
26
}
27
28
/**
29
* @event onShow
30
* This event is called when a page appears on the screen (everytime).
31
* @param {function} superOnShow super onShow function
32
* @param {Object} parameters passed from Router.go function
33
*/
34
function onShow(superOnShow: () => void) {
35
const { headerBar } = this;
36
superOnShow();
37
Application.statusBar.visible = false;
38
headerBar.visible = false;
39
}
40
41
/**
42
* @event onLoad
43
* This event is called once when page is created.
44
* @param {function} superOnLoad super onLoad function
45
*/
46
function onLoad(superOnLoad: () => void) {
47
superOnLoad();
48
49
50
this.btnTakePhoto = new Button({
51
text: "Take A Photo",
52
onPress: () => {
53
Multimedia.capturePhoto({
54
onSuccess: ({ image }) => {
55
this.myImageView.image = image.android.round(100);
56
},
57
aspectRatio: {
58
x: 1,
59
y: 1
60
},
61
allowsEditing: true,
62
page: this,
63
android: {
64
cropShape: Multimedia.Android.CropShape.OVAL
65
}
66
});
67
}
68
});
69
70
this.btnPickPhoto = new Button({
71
text: "Pick from Gallery",
72
onPress: () => {
73
Multimedia.pickFromGallery({
74
type: Multimedia.Type.IMAGE,
75
allowsEditing: true,
76
onSuccess: ({ image }) => {
77
this.myImageView.image = image.android.round(100);
78
},
79
android: {
80
cropShape: Multimedia.Android.CropShape.OVAL
81
},
82
page: this
83
});
84
}
85
});
86
87
this.myImageView = new ImageView();
88
89
this.layout.addChild(this.myImageView, "myImageView", ".sf-imageView", {
90
left: 0,
91
width: 200,
92
height: 200,
93
backgrounColor: "#eaedf2",
94
imageFillType: "ASPECTFIT"
95
});
96
97
this.layout.addChild(this.btnTakePhoto, "btnTakePhoto", ".sf-button", {
98
height: 70,
99
width: 150,
100
margin: 10
101
});
102
103
this.layout.addChild(this.btnPickPhoto, "btnPickPhoto", ".sf-button", {
104
height: 70,
105
width: 150
106
});
107
}
108
Copied!
Last modified 2mo ago