How to measure the performance of my site's video streaming and playback? - amazon-s3

I have developed a site that hosts user videos. I store the video files in AWS S3, I deliver them through AWS Cloudfront and I use video.js as the site's player with HTML5 as default and flash as fallback.
Generally the video streaming seems to work fine but in some cases I receive complaints from users for slow or choppy video playback. I want to create some tests to measure the performance of streaming in order to be able to distinguish user problems (e.g. slow connection at the user side) or with my service.
Are there any best practices or tools to collect video delivery metrics? I'm interested in open source solutions or something that I can implement myself because it's just a personal project, but I don't want to rediscover the wheel.

Testing progressive download implies checking the transmission bandwidth and its continuity. For example for a high transmission rate the initial client buffer will be filled faster and the playback will start sooner. However, losing that transmission capacity at some later time can cause re-buffering. The total transmission time of your file must be lower than the video duration.
To identify potential issues you can start with the S3 bucket logs and the CloudFront cache statistics and access logs.
There's a load testing tool written in Java called Apache JMeter. It cannot use JavaScript so it must be configured to request the files directly.
The disadvantage of using a load test tool in a single location is pretty evident. Different geographical areas and carriers have different characteristics and test results will be different.
There are online, non open-source tools that can load test from multiple locations but they are generally paid though some offer free trials.

Here's another way to look at this.
but in some cases I receive complaints from users for slow or choppy video playback.
If you're using an Adaptive HLS stream, and you're CloudFront, and the video is still choppy to some users, that's probably because of their own internet connection speeds.
In that case, you can encode your video in multiple resolutions (using just one AWS MediaConvert job, btw) - like 1080p, 720p, 360p, 240p, 144p etc.
And then Videojs has a stream switcher plugin that will 1) automatically start playing the highest possible resolution - and no higher - that's right for the viewer's connection and 2) give the user the option via a "Settings" (gear) icon in the control bar that they can use to switch resolutions manually.
That way, even those with really poor internet connections should be able to watch your video.
Of course, the other alternative is to use progressive download videos that the viewer can simply click play, then immediately click pause, and wait for the video to buffer, and then play it after it's fully downloaded.
Check out the Videojs Resolution Switcher demo here.
-- Ravi Jayagopal

Related

WebRTC - P2P - Server Side Video Recording

I’m planning to build a video conference app. (NodeJS + React Native)
Requirements
One to One Video Conference ( 2 Speakers )
Video / Audio Recording of both the participants.
Store the recorded stream in an S3 bucket and watch the videos directly from it.
Live Streaming (Future Goals, but not at the moment)
Strategies tried so far:
Tried Twilio and Agora, but it wasn’t feasible due to pricing.
Mediasoup (SFU - inspired from dogehouse) was another option, but it’s relatively new and the development time takes much longer.
So I have come to a conclusion to start with Peer to Peer using WebRTC with React Native and record videos on a virtual server by connecting as a ghost participant. ( 2 Speakers + 1 Ghost Participant)
Need some strategies to implement WebRTC recording at the server. (Recordings are a bit crucial, so I don’t want to depend on the client)
Should I go with Puppeteer on server, join as ghost participant and record whenever a room is created, If yes - Is it possible to run multiple instances of puppeteer? Because at times, multiple room recordings might happen, so it needs to record concurrently. Need to confirm the scalability.
Look into Kurento / Jitsi
Any other options?
Great, if you could help me out! Cheers!!
As a developer evangelist for Agora, I want to say thanks for considering Agora. With regard to the pricing, while Agora offers a generous free-tier (10k min/ month) this is meant for development usage and once your project is deployed into production, costs will scale similar to hosting infrastructure (like AWS/GCP).
As with any project, to cover costs you will need to have some monetization strategy or have some free credits to grow the business. Similar to other platforms Agora has a start-ups program for qualified startups.
All that being said to answer your question about approach, I can tell you that the ghost client approach should work, Agora's cloud recording uses similar logic. With regard to scalability you could run multiple puppeteer instances.
You can take a look at html5 videocall web application on GitHub for inspiration.
As it uses Wowza SE as relay for scaling and reliability, streams can be recorded server side with FFmpeg. FFmpeg can input one or multiple streams, mix/transcoded and output to a local or external destination.
More advanced setups like PaidVideochat - Turnkey Videochat Site on WordPress support mixing multiple streams from conferencing/calls in same video file.
Using a relay streaming server is also great for scaling to multiple viewers.
The Galene SFU has native support for server-side recording (disclosure, I'm the main author). However, it is a fairly young project, which might be a problem for you.

Best practice for bulk uploading to Street View Publish API?

We're currently in the process of recording 1fps time-lapsed 4k 360 photos of every island in the Bahamas, with embedded GPS EXIF data. An average hour of filming tends to produce around 600 image frames, which can easily expand to 2000-10,000 images per day on bigger routes. 2000 or so are approved on Google Maps already, but we're hitting a larger brick wall.
The Street View app is obviously the best way to upload when you have 50-100 image files, but it obviously struggles when it starts to hit over 500+ uploads in a batch (publishing doesn't start, or the app crashes), so we're left manually submitting collections. Add that to the standard 4000/day quota, and it's quite a challenge.
Having looked at the Publish API, it's rather tricky to leave a CLI tool running as it's designed with OAuth flow in mind with 1hr access tokens. The service account route seems to the way to go, but the PHP API client seems to have scant documentation for SV Publishing. Connecting photos is also tricky with that many images.
We ideally need a desktop uploader (like the backup tool), or a way to directly import from folders in Google Drive. The first seems discontinued, and there's no data on the second.
Can anyone explain or elucidate on the best practice for this kind of volume upload with the Street View publishing service?
Since you are only capturing 4K images, it will be much simpler to use video mode, depending on if your camera supports it at the desired framerate. You may check this documentation for more information.
Additional information:
You may also check out some of the desktop utilities at the bottom of the Street View website which may be able to help.
You may want to consider one of the Street View ready cameras (also listed on the above webpage) that is capable of recording and uploading 360 videos to Street View. Upon publication, the 360 photo frames are extracted from the video and used to create an automatically connected Street View experience on Google Maps.
Check these pages to learn more about this option:
Set up and connect 360 cameras
Capture and publish in Video mode with the Street View app
Tips for capturing 360 videos for Street View

Best streaming service for mp4 into webview

For the welcome screen of my app, we are trying to serve up a webpage in a webview that consists of a video and some text. (We want to go this route so that we could quickly update the welcome screen and test changes on the fly, versus having to submit and get approval each time.)
The video is only 8.6mB and is currently being played via HTML5 , hosted on an S3 and served via CloudFront. However, the playback still tends to be a bit choppy at times. Does anyone have any recommendations as to an optimal way to host and serve up the video to make it play smoothly? Are there any specific settings for the S3 or CloudFront anyone would recommend that could help?
Thanks in advance for any help anyone can provide.
The most common technique currently is to use ABR in parallel with a CDN to provide smooth playback.
ABR, Adaptive Bit Rate, involves making multiple copies of the video at different bit rates, from low to high and hosting these on the server.
The client receives an index file for the videos, e.g. an m3u8 manifest file, and then chooses the best bit rate for the current conditions to allow smooth playback without buffering.
If network conditions improve the client will 'step up' bit rates and if it gets worse it will 'step down' bit rates.
Typically a low or medium bit rate is chosen as the first one to allow quick and smooth start up.
You can see this effect on services like Netflix as they start up, and you can also see it on YouTube if you right click the video and select 'Stats for Nerds'.
Some links for ABR in AWS Elastic transcoding - you can set the bit rates you want, for e.g. see the note below from their FAQ re HLS jobs:
Specify that the transcoding job create a playlist that references the outputs. You should order your bit rates from lowest to highest, with the audio only stream last, since this order will be maintained in the generated playlist file. Once your transcoding job has completed, the output bucket will contain a proper arrangement of your master and individual M3U8 playlists, and MPEG-2 TS media stream fragments.
Take a look at the sample request on this page here which includes two different bit rates (video service providers will generally have more than 2 but this gives you a feel for the approach):
http://docs.aws.amazon.com/elastictranscoder/latest/developerguide/create-job.html
Azure Media Services has a built in "Adaptive Streaming" preset that is content-adaptive and can adjust the encoding settings to meet your content that is coming in.
See the following - https://learn.microsoft.com/en-us/azure/media-services/media-services-autogen-bitrate-ladder-with-mes

How can I limit HTML5 video bandwidth usage in Video.js?

Trying to roll out a video to a client with limited bandwidth. The client is concerned that the video will eat up all the bandwidth at their field office. In testing, I've discovered that even though my video is encoded at 420kbps, when downloading the client it still utilizes about 1.5mbps. Is there a way to control the maximum bandwidth used by video.js or the video tag?
Unfortunately no. The html5 video element doesn't have any throttling options. It's completely up to the browser to decide how to fetch the video data. Some will download the whole thing at once, others will download pieces as you need them. All I think will use as much of the pipe as you give them.
The media source extensions proposal hopes to add some ability here, but that won't be available for a while.
I would find somewhere else besides the office to host the video, like Amazon S3.

How does Http live streaming works?

I have created one sample application for demonstrating a working of HTTP live streaming.
What I have done is, I have one library that takes input as video file (avi, mpeg, mov, .ts) and generating segments (.ts) and playlist (.m3u8) files for the given video file. I am storing playlist (as string) in a linked list, as an when i am getting playlist data from the library.
I have written one basic web server which will server the user requested segment and playlist files. I am requesting playlist.m3u8 file from the iPhone safari browser and it is launching the QuickTime player where it is requesting the segment.ts files listed in the received playlist files. after playing every segments (listed in current playlist) it again requests for the playlist, where i am responding with the next playlist file which contains the next set of segment.ts files listed in it.
Is this what we call HTTP live streaming?
Is there anything else, other that this i need to do for implementing HTTP live streaming?
Thanks.
Not much more. If you are taking input streams of media, encoding them, encapsulating in a format suitable for delivery and preparing the encapsulated media for distribution by placing it in such a way that they can be requested from the HTTP server, you are done. The idea behind the live streaming is that it leverages existing Internet architecture that is already optimized for serving HTTP requests for reasonably sized resources.
HTTP streaming renders many existing CDN solutions obsolete with their custom streaming protocols, custom routing and custom content caching.
You can also use media stream validator command line application for mac os x for validating streams generated by the HTTP Web server.
More or less but there's also adaptive bit-rate streaming to take care of if you want your server to push files to iOS devices. Which means your scope expands from having a single "index.m3u8" file that tracks all the TS files to a master index that then tracks the index files for each bitrate you'd want to support in your application which then individually track the TS files encoded at the respective bit-rates.
It's a good amount of work, but mostly routine/repetitive once you've got the hang of the basics.
For more on streaming, your bible, from the iOS standpoint, should ALWAYS be TN2224. Adhering closely to the specs in the Technote, is your best chance of getting through the App Store approval process vis-a-vis streaming.
Some people don't bother (building a streaming app over the past couple of months and looked at the HTTP logs of a whole bunch of video apps that don't quite seem to stick by the rules) - sometimes Apple notices, sometimes they don't, and sometimes the player is just too big for Apple to interfere.
So it's not very different there from every other aspect of the functionality of your app that undergoes Apple's scrutiny. It's just that there are ways you can be sure you're on the right track.
And of course, from a purely technical standpoint, as #psp1 mentioned the mediastreamvalidator tool can help you figure out if your streams are - at their very core, even if not in terms of their overall abilities - compatible with what's expected of HLS implementations.
Note: You can either roll with your own encoding solution (with ffmpeg, the plus being you have more control, the minus being it takes time to configure and get working just RIGHT. Plus once you start talking even the least amount of scale, you run into a whole host of other problems. And once you're done with all the technical hard-work, you'd find that was easy. Now you'd have to actually figure out which license you need to get for having a fancy H.264 encoder with you and jump through all the legal/procedural hoops to get one).
The easier solution for a developer without a legal/accounting team that could fill a football field, IMO, it's easier to go third-party with sites like Encoding.com, Zencoder etc who provide their encoding services a-la-carte or with a monthly fee. The plus is that they've taken care of all the licensing BS and are just providing you a simple "pay to use" service, which could also be extremely useful when you're building a project for a client. The minus is that you're now DEPENDENT on Zencoder/Encoding, the flip-side of which you'd know when your encoding jobs fail for a whole day because their servers are down, or even otherwise, when the API doesn't quite act as you expect or has been documented!
But anyhow that's about all the factors you got to Grok before pushing a HLS server into production!