将视频从AWS Kinesis流到JS客户端

时间:2019-06-30 21:06:41

标签: javascript reactjs amazon-web-services amazon-kinesis

我正在尝试使用AWS Kinesis流中的视频。该流在AWS控制台中可见,但是我无法在我要创建的JS应用程序中使用它。

我一直在遵循this教程,但是无法获取流URL。

我的代码在这里:

import React, { Component} from 'react'
import ReactPlayer from 'react-player'
import AWS from "aws-sdk";
import { STREAM_NAME, ACCESS_KEY_ID, SECRET_ACCESS_KEY, REGION } from '../secrets'

var streamName = STREAM_NAME;

// Step 1: Configure SDK Clients
var options = {
    accessKeyId: ACCESS_KEY_ID,
    secretAccessKey: SECRET_ACCESS_KEY,
    region: REGION
}
var kinesisVideo = new AWS.KinesisVideo(options);
var kinesisVideoArchivedContent = new AWS.KinesisVideoArchivedMedia(options);

// Step 2: Get a data endpoint for the stream
kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_HLS_STREAMING_SESSION_URL"
}, function(err, response) {
    if (err) { return console.error(err); }
    console.log('Data endpoint: ' + response.DataEndpoint);
    kinesisVideoArchivedContent.endpoint = new AWS.Endpoint(response.DataEndpoint);
});

// Step 3: Get an HLS Streaming Session URL
console.log('Fetching HLS Streaming Session URL');
var playbackMode = 'LIVE'; // 'LIVE' or 'ON_DEMAND'
//var startTimestamp = new Date('START_TIMESTAMP'); // For ON_DEMAND only
//var endTimestamp = new Date('END_TIMESTAMP'); // For ON_DEMAND only
var fragmentSelectorType = 'SERVER_TIMESTAMP'; // 'SERVER_TIMESTAMP' or 'PRODUCER_TIMESTAMP'
const SESSION_EXPIRATION_SECONDS = 60*60
console.log(kinesisVideo)
const hlsUrl = kinesisVideoArchivedContent.getHLSStreamingSessionURL({
    StreamName: streamName,
    //StreamARN: "arn:aws:kinesisvideo:us-east-1:635420739373:stream/mr-pinchers-dot-org/1561848963391",
    PlaybackMode: playbackMode,
    HLSFragmentSelector: {
        FragmentSelectorType: fragmentSelectorType,
        TimestampRange: playbackMode === 'LIVE' ? undefined : {
//            StartTimestamp: startTimestamp,
//            EndTimestamp: endTimestamp
        }
    },
    Expires: parseInt(SESSION_EXPIRATION_SECONDS)
}, function(err, response) {
    if (err) { return console.error("Darn", err); }
    console.log('HLS Streaming Session URL: ' + response.HLSStreamingSessionURL, response);
  }
)

console.log("here", hlsUrl)

class Home extends Component {
  render () {
    return <ReactPlayer url={hlsUrl} playing={true} />
  }
}

export default Home

我在第3步中获得的响应(response.HLSStreamingSessionURL)未定义。

第2步运行正常,我得到了一个端点,因此我确信这不是权限问题。

我的一部分认为我应该使用一些async / await调用,但是我不确定,对于JS和所有异步内容来说还是很新的,所以不知道如何将其合并到其中。

我花了很多时间试图解决这个问题,但是关于Kinesis的文档仍然很少,尽管如果有人对此有很好的资源,请告诉我。

1 个答案:

答案 0 :(得分:0)

这是基本的JavaScript异步行为。您要在步骤2完成之前执行步骤3。您不能在响应发生之前就使用它。

您可以通过在步骤2完成后开始步骤3来解决此问题,如下所示:

kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_HLS_STREAMING_SESSION_URL"
}, function(err, response) {
    if (err) { return console.error(err); }
    console.log('Data endpoint: ' + response.DataEndpoint);
    kinesisVideoArchivedContent.endpoint = new AWS.Endpoint(response.DataEndpoint);

    var playbackMode = 'LIVE';
    var fragmentSelectorType = 'SERVER_TIMESTAMP';
    const SESSION_EXPIRATION_SECONDS = 60*60

    kinesisVideoArchivedContent.getHLSStreamingSessionURL({...});
    // remainder of code here
});

或者您可以使用async/await并承诺AWS SDK方法的变体,如下所示:

(async () => {
    const kv_response = await kv.getDataEndpoint({...}).promise();
    // ...
    const hls_response = await kvac.getHLSStreamingSessionURL({...}).promise();
})();

请注意,await只能在async函数内部使用,因此是匿名异步包装器。