Multimedia

API Reference: Device.Multimedia

Multimedia manages camera, video and image.

JavaScript
JavaScript
const Color = require("sf-core/ui/color");
const ImageView = require("sf-core/ui/imageview");
const FlexLayout = require("sf-core/ui/flexlayout");
const Multimedia = require("sf-core/device/multimedia");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Button = require('sf-core/ui/button');
module.exports = extend(Page)(
function(_super) {
const page = this;
_super(this, {
onLoad: () => {
let btnTakePhoto = new Button({
height: 70,
width: 150,
margin: 10,
text: "Take A Photo",
onPress: () => {
Multimedia.startCamera({
onSuccess: ({ image }) => {
myImageView.image = image;
},
aspectRatio: {
x: 1,
y: 1
},
allowsEditing: true,
action: Multimedia.ActionType.IMAGE_CAPTURE,
page
});
}
});
let btnPickPhoto = new Button({
height: 70,
width: 150,
text: "Pick from Gallery",
onPress: () => {
Multimedia.pickFromGallery({
type: Multimedia.Type.IMAGE,
allowsEditing: true,
onSuccess: ({ image }) => {
myImageView.image = image;
},
page
});
}
});
var myImageView = new ImageView({
left: 0,
width: 200,
height: 200,
backgrounColor: Color.create("#eaedf2"),
imageFillType: ImageView.FillType.ASPECTFIT,
});
page.layout.addChild(myImageView);
page.layout.addChild(btnTakePhoto);
page.layout.addChild(btnPickPhoto);
}
});
page.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
page.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
);

Image Cropping

"allowsEditing" property shows a screen to the user that can crop the image. The example below shows cropping an image picked from the gallery;

JavaScript
JavaScript
Multimedia.pickFromGallery({
allowsEditing : true,
type: Multimedia.Type.IMAGE,
onSuccess: function (picked) {
var image = picked.image;
},
page : this
});

Crop Window Aspect Ratio

You can set the aspect ratio of the cropping window for android. Default behavior is free aspect ratio mode.

JavaScript
JavaScript
Multimedia.pickFromGallery({
allowsEditing : true,
aspectRatio : {
x: 1,
y: 1
},
type: Multimedia.Type.IMAGE,
onSuccess: function (picked) {
var image = picked.image;
},
page : this
});

Android Cropping Activity

In Android, cropping is an activity itself. So it is necessary to define cropping activity to your AndroidManifest.xml before publishing. Activities are always defining under the tag.

<activity android:name="io.smartface.android.sfcore.device.multimedia.crop.SFCropActivity" android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

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.

JavaScript
JavaScript
const Color = require("sf-core/ui/color");
const ImageView = require("sf-core/ui/imageview");
const FlexLayout = require("sf-core/ui/flexlayout");
const Multimedia = require("sf-core/device/multimedia");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Button = require('sf-core/ui/button');
module.exports = extend(Page)(
function(_super) {
const page = this;
_super(this, {
onLoad: () => {
let btnTakePhoto = new Button({
height: 70,
width: 150,
margin: 10,
text: "Take A Photo",
onPress: () => {
Multimedia.startCamera({
onSuccess: ({ image }) => {
myImageView.image = image;
myImageView.image = myImageView.image.android.round(100);
},
aspectRatio: {
x: 1,
y: 1
},
allowsEditing: true,
action: Multimedia.ActionType.IMAGE_CAPTURE,
android: {
cropShape: Multimedia.Android.CropShape.OVAL
},
page
});
}
});
let btnPickPhoto = new Button({
height: 70,
width: 150,
text: "Pick from Gallery",
onPress: () => {
Multimedia.pickFromGallery({
type: Multimedia.Type.IMAGE,
allowsEditing: true,
onSuccess: ({ image }) => {
myImageView.image = image;
myImageView.image = myImageView.image.android.round(100);
},
android: {
cropShape: Multimedia.Android.CropShape.OVAL
},
page
});
}
});
var myImageView = new ImageView({
left: 0,
width: 200,
height: 200,
backgrounColor: Color.create("#eaedf2"),
imageFillType: ImageView.FillType.ASPECTFIT,
});
page.layout.addChild(myImageView);
page.layout.addChild(btnTakePhoto);
page.layout.addChild(btnPickPhoto);
}
});
page.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
page.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
);