How to use Kinesis Video Stream WebRTC SDK in the browser without providing credentials?

Question

I want to use kinesis video streams webrtc javascript sdk for producing video stream from a web page. The sdk readme says i need to supply accessKeyId and secrectAccessKey

signalingClient = new KVSWebRTC.SignalingClient({
    channelARN,
    channelEndpoint: endpointsByProtocol.WSS,
    clientId,
    role: KVSWebRTC.Role.VIEWER,
    region,
    credentials: {
        accessKeyId,
        secretAccessKey,
    },
    systemClockOffset: kinesisVideoClient.config.systemClockOffset,
});

Is there a way to make this more secure and avoid supplying the secret access key inside the javascript code? Doesn't it mean anyone viewing my web page source can take these credentials from the web page and use them to access the signaling channel? Can I use amplify-js Auth class to use the signaling client with an authenticated user?

Answer 1

Turns out I can use credentials inside the backend, and send a presigned link to the client using the class SigV4RequestSigner. There's no need to supply credentials on the client side.

Found it in the documentation:

This is a useful class to use in a NodeJS backend to sign requests and send them back to a client so that the client does not need to have AWS credentials.

Answer 2

When creating the SignalingClient you can either specify the credentials or a requestSigner that returns a Promise<string>, see:

https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js/blob/master/README.md#class-signalingclient

credentials {object} Must be provided unless a requestSigner is provided.

Be aware that when not using credentials in the browser you will also need to run the KinesisVideoSignalingChannels related code on the server side, because this class does not supports request signer.

Answer 3

For Kinesis, one of the possibilities is to implement in your NodeJS backend a function for signing your URLs.

const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
    endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
    return endpoints;
}, {});
console.log('[VIEWER] Endpoints: ', endpointsByProtocol);

const region = "us-west-2";
const credentials = {
    accessKeyId: "XAXAXAXAXAX",
    secretAccessKey: "SECRETSECRET"
};
const queryParams = {
    'X-Amz-ChannelARN': channelARN,
    'X-Amz-ClientId': formValues.clientId
}
const signer = new SigV4RequestSigner(region, credentials);
const url = await signer.getSignedURL(endpointsByProtocol.WSS, queryParams);
console.log(url);