Stream and record footage from (usb) webcam in a react app to S3 bucket

Question

Given a react app (client side), I'd like to record the footage from the webcam to S3 bucket,
The video footage might reach 30 minutes (slowing down the react app) therefore I'd like to avoid taking the path of recording and in the end trigger an upload to S3 bucket (it causes the frontend to become sluggish).

I have been told:
"Use webrtc", I have read that  WebRTC clients (such as browsers) don’t directly support streaming to KVS Video Streams, so I need a middle layer.

According to documentation here:
https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/what-is-kinesis-video.html

"After you create a Kinesis Video Streams stream, you can start sending data to it. You can use the SDK to create application code that extracts the video data, known as frames, from the media source and uploads it to Kinesis Video Streams. These applications are also referred to as producer applications."

Therefore correct me if I'm wrong, I can't stream and record directly from browser to KInesis Video Stream? can somebody PLEASE  suggest me a simple architecture for streaming the video live and store it on S3? how do I implement this kind of middle layer? while minimizing the impact on the end user's system performance.

Any reference (link/document/github) from the last 2 years, will be great!

Thank you all

Greg_B · Answer

Hi. WebRTC is for real-time peer to peer streams. Like a video doorbell for instance.

[Amazon Kinesis Video Streams (KVS)](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/what-is-kinesis-video.html) is essentially a service for streaming video to the cloud and storing it there. With [APIs for consuming the video](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_Operations_Amazon_Kinesis_Video_Streams_Archived_Media.html).

[Amazon Kinesis Video Streams (KVS) for WebRTC](https://docs.aws.amazon.com/kinesisvideostreams-webrtc-dg/latest/devguide/what-is-kvswebrtc.html) is an implementation of WebRTC, with the service offering managed STUN and TURN servers.

WebRTC itself doesn't store video. However, the Amazon KVS for WebRTC service and SDKs [support storing video in Amazon KVS](https://docs.aws.amazon.com/kinesisvideostreams-webrtc-dg/latest/devguide/webrtc-ingestion.html).

> Therefore correct me if I'm wrong, I can't stream and record directly from browser to KInesis Video Stream?

Check out the [KVS WebRTC Test Page](https://awslabs.github.io/amazon-kinesis-video-streams-webrtc-sdk-js/examples/index.html). This workshop can take you through it: https://catalog.us-east-1.prod.workshops.aws/kinesis-video-streams/en-US/6-webrtc-sdk/3-ingestion. It grabs your webcam, and stores straight to KVS. You can find source code for the SDK and test page here: https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js/

This will store video in KVS, not S3. Is S3 a hard requirement? KVS storage costs are similar to S3 standard tier, but the advantage of KVS are those APIs to help with consumption. Especially if you want to playback in browser using HLS and DASH. You can also use the APIs to get video out of KVS and store in S3.

chris · Answer

Thank you for the help @Greg_B and @Didler_Durand I saw the stream and replayed it on "Media playback", 
I tried to trigger a lambda function when a video is being stored in KVS using Amazon EventBridge, I have configured a rule.

> {
  "source": ["aws.kinesisvideo"],
  "detail-type": ["Kinesis Video Stream Media Source Ready"],
  "detail": {
    "streamName": ["my_stream_name"]
  }
}

but it failed since I can't see the logs written in the lambda function which should be triggered.
Any resource/material on how to configure correctly the EventBridge for triggering the lambda function when a stream is detected?

chris · Answer

I have used the "KVS WebRTC Test Page"  between my PC and laptop, and the stream runs well (can see the footage from both ends), but I can't see the media in the "Media playback"  section on **kinesis video stream** webpage.

I can't see the video stored. is there any configuration needed for storing it on KVS storage?

I need to store the footage for long periods (months), therefore I'm planning to move it immediately  from KVS storage to S3 bucket.

That said I understand I need to make use of Amazon Kinesis Video Streams (KVS) 
because I'd like to ingest the stored video, playback and analyze the videos offline. I understand I need to convert the webcam frames into streamable fragments for feeding Kinesis Video Streams, is there any example of this on the web? I couldn't find repo from the past 2 years

Stream and record footage from (usb) webcam in a react app to S3 bucket

Relevant content