Search code examples
javascriptwindowswindows-runtimewindows-store-appshtml5-video

How to save capture video file in window 8 metro app?


These are code for capture video and save video. But it does not save the video content. It gives the error message

JavaScript runtime error: Type mismatch

It comes in saveVideo function copyAsync method.

function captureVideo() {      
        var cam = Windows.Media.Capture.CameraCaptureUI();
        cam.videoSettings.allowTrimming = true;
        cam.videoSettings.format = Windows.Media.Capture.CameraCaptureUIVideoFormat.mp4;
        cam.videoSettings.maxResolution = Windows.Media.Capture.CameraCaptureUIMaxVideoResolution.standardDefinition;
               cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.video).then(function (file) {
            if (file) {
                photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true });
                var myVideo = document.getElementById("videoId");                  
                myVideo.src = photoBlobUrl;
                myVideo.play();
            }
            else {
            }
        });
    }
function saveVideo() {
        var output;
        var input;
        var outputStream;           
        var picturesLib = Windows.Storage.KnownFolders.picturesLibrary;

         picturesLib.createFileAsync("v1.mp4",
                                        Windows.Storage.CreationCollisionOption.replaceExisting).
                                    then(function(file) {
                                        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
                                    }).then(function (stream) {

                                        outputStream = stream;
                                        output = stream.getOutputStreamAt(0);
                                        input = photoBlobUrl;
                                        return Windows.Storage.Streams.RandomAccessStream.copyAsync(input, output);
                                    }).then(function() {
                                        return output.flushAsync();
                                    }).done(function() {
                                        input.close();
                                        output.close();
                                        outputStream.close();

                                    });

    }

Solution

  • A StorageFile typically represents a file that has already been saved. If you look at StorageFile.Path after taking the photo it should be something like this:

    C:\Users\[username]\AppData\Local\Packages\[appname]\TempState\picture003.jpg
    

    Since the file is already saved you can move or copy it to a different location like this:

    storageFile.moveAsync(Windows.Storage.KnownFolders.picturesLibrary)
    

    I hope this helps.