1

I am using the below code, in order to download the clip. I have successfully received the response and I am trying to download the video but I cannot be able.

const completeUrl = url + "/getClip";

const res = await client.post(completeUrl, params, {
          headers: {
            "Content-Type": "video/mp4",
            "X-Amz-Target": "CodeBuild_20161006.StartBuild",
          },
        });
    
console.log("axios signedRquest is ", res);


   var binaryData: any = [];
        binaryData.push(res.data);

        const downloadElement = document.createElement("a");
        const href = window.URL.createObjectURL(
          new Blob(binaryData, { type: contentType })
        );
        downloadElement.href = href;
        downloadElement.download = "test.mp4";
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
M Ahmed Mushtaq
  • 81
  • 2
  • 4

2 Answers2

0

I have found the solution by just adding the responseType: "blob" in the request

const res = await client.post(completeUrl, params, {
          headers: {
            "Content-Type": "video/mp4",
            "X-Amz-Target": "CodeBuild_20161006.StartBuild",
          },
          responseType: "blob", // added this line
        });
M Ahmed Mushtaq
  • 81
  • 2
  • 4
0

In case someone get here...

This works!

export const downloadStream = async function (stream, timeStampStart, length) {


var streamName = stream.id;
const credentials = await Auth.currentCredentials();
var params = {
    credentials: credentials,
    region: "us-east-1"
}

const timeStampEnd = timeStampStart + (length * 60 * 1000);


//get endpoint first
const kinesisVideo = new KinesisVideoClient(params);

params["APIName"] = "GET_CLIP";
params["StreamName"] = streamName;

const endPCommand = new GetDataEndpointCommand(params);


await kinesisVideo
    .send(endPCommand)
    .then((data) => {
        // console.log(JSON.stringify(data))
        params["endpoint"] = data.DataEndpoint;
    })
    .catch((error) => {
        console.log(error)
    })
    .finally(() => {
        // finally.
    });



const kinesisVideoArchived = new KinesisVideoArchivedMedia(params);

const dnlparams = {


    StreamName: streamName,

    ClipFragmentSelector: {
        FragmentSelectorType: ClipFragmentSelectorType.PRODUCER_TIMESTAMP,
        TimestampRange: {

            StartTimestamp: new Date(timeStampStart),
            EndTimestamp: new Date(timeStampEnd)
        }
    },
};

const dnlCommand = new GetClipCommand(dnlparams);

//getClip

await kinesisVideoArchived
    .send(dnlCommand)
    .then(async (data) => {
        console.log(data)
        const link = document.createElement("a");

        const byt = await data.Payload.transformToByteArray();

        const file = new Blob([byt], { type: 'video/mp4' });

        link.href = URL.createObjectURL(file);
        link.download = "clip.mp4";
        link.click();
        URL.revokeObjectURL(link.href);
  
    })
    .catch((error) => {
        console.log(error)
    })
    .finally(() => {
        // finally.
    });

}

Nomadev21
  • 41
  • 1