Feature: Media Picker

[ichan-mb]

Allows for picking images or video from the image library, and taking new pictures or record video with the camera.

To use these features, you can invoke the provided pickImage or pickVideo methods. You have to pass an object javascript as a method's argument to set up how you want to get the media from the device. Take a look at the example to see the detail.

You can also pick multiple images, but only works with iOS 14 later, and Android starts from 4.4 later. You need to add a reference to "Fuse.MediaPicker" in your project file to use this feature.

Example:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable")
        var picker = require('FuseJS/MediaPicker')
        var image = Observable();
        var images = Observable();
        var video = Observable();

        var options = {
                source: picker.SOURCE_GALLERY, // pick image from gallery, use mediaPicker.SOURCE_CAMERA for taking picture or record video from the device camera
                maxWidth: 1024, // resize image width
                maxHeight: 1024, // resize image height
                quality: 70, // the image quality: 0 - 100
                maxDuration: 20, // filter the duration of the video file to pick or record (in seconds) note: on Android it might not be work 100%. it depends on the device manufacturer
                maxImages: 5 // allow for maximum 5 image to pick
            }
        module.exports = {
            image,
            images,
            video,
            pickSingleImages : function(args) {
                picker.pickImage({}).then(function(data) {
                    image.value = data[0];
                })
            },
            pickImageFromCamera : function(args) {
                picker.pickImage({ quality: 70, source: picker.SOURCE_CAMERA }).then(function(data) {
                    image.value = data[0];
                })
            },
            pickMultiImages : function(args) {
                picker.pickImage(options).then(function(data) {
                    images.addAll(data);
                })
            },
            pickVideoFromCamera : function(args) {
                picker.pickVideo({ maxDuration: 20, source: picker.SOURCE_CAMERA }).then(function(data) {
                    video.value = data;
                })
            },
            pickVideo : function(args) {
                picker.pickVideo({ maxDuration: 20 }).then(function (data) {
                    video.value = data
                })
            }
        }
    </JavaScript>
    <ClientPanel Color="White">
        <ScrollView ux:Name="scroll" AllowedScrollDirections="Vertical" LayoutMode="PreserveVisual">
            <StackPanel ItemSpacing="10" Orientation="Vertical">

                <Button Clicked="{pickImageFromCamera}" Text="Capture Image" />
                <Button Clicked="{pickSingleImages}" Text="Pick Single Images" />
                <Button Clicked="{pickMultiImages}" Text="Pick Multi Images" />
                <Button Clicked="{pickVideo}" Text="Pick Video" />
                <Button Clicked="{pickVideoFromCamera}" Text="Record Video" />

                <Image File="{image}" Size="200" />
                <Each Items="{images}">
                    <Image File="{data()}" Size="200" />
                </Each>
                <Video File="{video}" Size="200" AutoPlay="true" />
            </StackPanel>
        </ScrollView>

    </ClientPanel>
</App>

Note: This package is considered as the advanced version of the Fuse.CameraRoll getImage method, wherein this package we can select multiple images and have options to pick media (images & video) from the gallery or by taking from the device camera.

This PR contains:

• [ ] Changelog
• [x] Documentation
• [ ] Tests

[ichan-mb]

At first glance I can see several whitespace issues that I think should be addressed before we can merge

Ops sorry 🙏 It is fixed now

if you want, you can turn on "Show whitespace characters" in your editor to make such issues easier to spot.

Yeah will do, thanks