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

Question

我正在尝试使用来自 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 的文档仍然很简单，尽管如果有人有很好的资源，请告诉我。

Answer 1

这是基本的 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 开发工具包方法的变体，如下所示：

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

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