search

triniwiz / nativescript-videorecorder

:video_camera: NativeScript plugin for Video Recording . :video_camera:
Apache License 2.0
43 stars 29 forks source link

Suggest code for retaking video #60

Open mrwrighty opened 5 years ago

mrwrighty commented 5 years ago

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

Please, tell us how to recreate the issue in as much detail as possible.

Re-record video after stop.

I'm trying to record a new video after stopping the first. occasionally I will get a new video tmp file alert(args.object.get('file')). But after a few attempts the recorder fails to return a new video file. I'm not saving to the gallery, just grabbing the video file to upload after recording.

I have a stop button as per your demo. I then have a retake button which displays a dialog asking if what to retake. After dialog is dismissed I call recordVideo() again.

Is there any code involved?

`"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var appSettings = require("tns-core-modules/application-settings"); var dialogs = require("tns-core-modules/ui/dialogs"); var main_view_model_1 = require("./video-view-model"); //var nativescript_videorecorder_1 = require("nativescript-videorecorder"); var Advanced_1 = require("nativescript-videorecorder/advanced"); var frame_1 = require("tns-core-modules/ui/frame"); var progress = require("tns-core-modules/ui/progress"); var page; var recorder; var interval; var videoplayer; var stoprecordingbutton; var recordvideobutton; var completesigninbutton; var retakevideobutton; var recorderstack; var completestack; var durationlabel; var vm = new main_view_model_1.HelloWorldModel(); function navigatingTo(args) {

} exports.navigatingTo = navigatingTo;

function loaded(args) { page = args.object; page.bindingContext = vm; vm.set('selectedVideo', ''); appSettings.setString("vidfile",""); appSettings.setNumber("duration", 0); Advanced_1.AdvancedVideoView.requestPermissions(); recorder = args.object.page.getViewById("recorderView"); vm.set('duration', recorder && recorder.duration ? recorder.duration : 0); // vm.set('duration', recorder && recorder.duration ? recorder.duration : appSettings.getNumber("duration")); recorder.on('started', args => { interval = setInterval(() => { vm.set('duration', recorder.duration); if (recorder.duration > 44){ stoprecordingbutton.notify({eventName: "tap", object: stoprecordingbutton});

        }
    }, 1000);
});
recorder.on('finished', args => {
    clearInterval(interval);
    var vidfile = args.object.get('file');
    page.bindingContext.set('selectedVideo', vidfile );
    appSettings.setString("vidfile", vidfile);
    durationlabel.text = "Video Length "+recorder.duration+" Secs";
});
videoplayer = args.object.page.getViewById("videoplayer");
videoplayer.className="hideObject";
recorder.className="showObject";
stoprecordingbutton = args.object.page.getViewById("stoprecordingbutton");
recordvideobutton = args.object.page.getViewById("recordvideobutton");
retakevideobutton = args.object.page.getViewById("retakevideobutton");
durationlabel = args.object.page.getViewById("durationlabel");
durationlabel.class = "showObject";
completestack = args.object.page.getViewById("completestack");
completestack.className="hideObject";
recorderstack = args.object.page.getViewById("recorderstack");
recorderstack.className="showObject";

} exports.loaded = loaded;

function recordVideo(){ // var duration = appSettings.getNumber("duration"); // if (duration >= 0 ){ // dialogs.confirm({ // title: "Warning", // message: "Are you sure you want to retake the video!", // okButtonText: "Yes", // cancelButtonText: "No" // }).then(function (result){; // if (result == false) { // return; // } // else { videoplayer.className="hideObject"; recordvideobutton.isEnabled=false; recordvideobutton.className="fadeObject"; recorder.startRecording(); //} // }); // } } exports.recordVideo = recordVideo;

function retakeVideo(args){ var duration = appSettings.getNumber("duration"); if (duration >= 0 ){ dialogs.confirm({ title: "Warning", message: "Are you sure you want to retake the video?\nIf Yes, the video will start recording after dismissing this messaage.", okButtonText: "Yes", cancelButtonText: "No" }).then(function (result){; if (result == false) { return; } else { vm.set('duration', 0); appSettings.setNumber("duration",0); recorder.className="showObject"; videoplayer.className="hideObject"; recorderstack = args.object.page.getViewById("recorderstack"); completestack = args.object.page.getViewById("completestack"); durationlabel = args.object.page.getViewById("durationlabel"); //durationlabel.class = "showObject"; //durationlabel.class="videotime"; durationlabel.text = "Video Length 0 Secs"; recorderstack.className="showObject"; completestack.className="hideObject"; page.bindingContext.set('selectedVideo', ''); recordVideo(); } }); }
} exports.retakeVideo = retakeVideo;

function stopRecording(args){ if (recorder.duration > 44){ alert("You have reached the 45 second video limit");
} if (recorder.duration > 4){ recorder.stopRecording(); appSettings.setNumber("duration", recorder.duration); recorder = args.object.page.getViewById("recorderView"); recorderstack = args.object.page.getViewById("recorderstack"); completestack = args.object.page.getViewById("completestack"); //durationlabel = args.object.page.getViewById("durationlabel"); //durationlabel.text = "Video Length "+recorder.duration+" Secs"; //durationlabel.class = "hideObject"; recordvideobutton.isEnabled = true; recordvideobutton.className="unfadeObject"; retakevideobutton = args.object.page.getViewById("retakevideobutton"); retakevideobutton.isEnabled = true; recorder.className="hideObject"; videoplayer.className="showObject"; recorderstack.className="hideObject"; completestack.className="showObject";

}

} exports.stopRecording = stopRecording;

function goToVideoRecorder(event){ frame_1.goBack(); } exports.goToVideoRecorder = goToVideoRecorder;

function saveVideo(){ var vidfile = appSettings.getString("vidfile"); if (vidfile == ""){ dialogs.confirm({ title: "Warning", message: "You must take a video to complete the process!", okButtonText: "OK", }); return; } const movetosigninloc = { moduleName: "signinloc/signinloc-page", animated: true, clearHistory: false, transition: { name: "flip", duration: 380, curve: "easeIn" } }; frame_1.topmost().navigate(movetosigninloc); } exports.saveVideo = saveVideo;`

and the video-page.xml file

`

<GridLayout rows="*,100,50,60">
    <recorder:AdvancedVideoView row="0" quality="highest" width="90%" cameraPosition="back" id="recorderView" fill="true" thumbnailCount="1" duration="20" marginTop="10"/>

    <VideoPlayer:Video row="0" width="90%" src="{{selectedVideo}}" loaded="videoplayerLoaded" finished="videoFinished" autoplay="false" id="videoplayer" marginTop="20"/>
    <Label row="1" text="Max video length 45 secs, Min video length 5 secs ." textAlignment="center" width="90%" textWrap="true" class="redLabel" />
<StackLayout row="2">
        <Label id="durationlabel" textAlignment="center" text="{{'Video Length '+duration+' Secs'}}" class="videotime" row="3"/>
    </StackLayout>
    <StackLayout row="3" orientation="horizontal" backgroundColor="#333333" horizontalAlignment="center" width="100%" id="recorderstack">
        <Button textWrap="true" width="50%" textAlignment="center" backgroundColor="#333333" color="#ffffff" tap="stopRecording" id="stoprecordingbutton">
        <FormattedString>
            <Span text="Stop Video"></Span>
        </FormattedString>
    </Button>
        <Button textWrap="true" width="50%" textAlignment="center" backgroundColor="#333333" color="#ffffff" tap="recordVideo" id="recordvideobutton">
        <FormattedString>
            <Span text="Record Video"></Span>
        </FormattedString>
    </Button>
    </StackLayout>
    <StackLayout row="3" orientation="horizontal" backgroundColor="#333333" horizontalAlignment="center" width="100%" id="completestack">
        <Button textWrap="true" width="50%" textAlignment="center" backgroundColor="#333333" color="#ffffff" tap="saveVideo" id="completesigninbutton">
        <FormattedString>
            <Span text="Complete Sign In"></Span>
        </FormattedString>
    </Button>
        <Button textWrap="true" width="50%" textAlignment="center" backgroundColor="#333333" color="#ffffff" tap="retakeVideo" id="retakevideobutton">
        <FormattedString>
            <Span text="Retake Video"></Span>
        </FormattedString>
    </Button>
    </StackLayout>
</GridLayout>

`