In this comprehensive guide, we’ll walk you through the essential steps to troubleshoot a live stream from the broadcaster’s perspective, covering everything from pre-stream checks to on-the-fly fixes.

Pre-Stream Preparation

1. Check Your Internet Connection: A stable and fast internet connection is the backbone of any successful live stream. Before going live, test your internet speed to ensure it meets the requirements for streaming. We’ve written a whole post dedicated to what your upload speed should be for live streaming.

2. Use an Ethernet Connection: A wired connection (Ethernet) is typically more reliable than Wi-Fi. However, if you’re forced to use Wi-Fi, we suggest you use at least Wi-Fi 6 or 6E, or the upcoming Wi-Fi 7 which has huge latency and bandwidth improvements.

Wi-Fi Pro tip: Find a Wi-Fi channel that is the least congested, using an app like ‘Wi-Fi Analyzer’ available on Android.

3. Update Your Software and Hardware: Ensure that your streaming software (OBS, XSplit, etc.) and any relevant drivers are up to date. Software updates often include bug fixes and improvements that can enhance your streaming experience. Also, verify that your hardware, such as cameras and microphones, are functioning correctly.

4. Optimize Your Settings: Configure your streaming software settings according to your internet connection and hardware capabilities. This includes setting the correct bitrate, resolution, frame rate, and keyframe interval. A common mistake is setting these too high, which can lead to buffering and dropped frames. If you’re using OBS, we’ve written a guide which takes a deep dive into the best OBS settings for live streaming.

During the Stream

Even with thorough preparation, issues can arise during your live stream. Here’s how to address them in real-time.

1. Dropped Frames or Buffering: If viewers are complaining about buffering or you’re noticing dropped frames in your streaming software, the first step is to check your internet connection. If your connection is unstable, lower the bitrate in your streaming software settings. This reduces the amount of data you’re sending, which can stabilize your stream. 

Additionally it’s worth checking your computer’s performance monitor to see how it’s performing. The higher the bitrate/resolution/frame rate, the more demanding it is on your system.

2. Audio Issues: Common audio problems include echoing, low volume, or sync issues. To troubleshoot, first, check that there aren’t multiple audio sources being captured (e.g., your microphone and desktop audio simultaneously). Adjust the audio mixer settings in your streaming software to ensure levels are balanced and in sync. If there’s an echo, ensure you’re using headphones to prevent audio feedback.

3. Video Quality Problems: Poor video quality can stem from inadequate lighting, incorrect resolution settings, or insufficient encoding power. Make sure your streaming space is well-lit. If the video is blurry or pixelated, adjust the resolution and bitrate settings in your software. Upgrading your hardware (like getting a better webcam or a more powerful CPU) may be necessary for long-term improvements.

4. Software Crashes or Bugs: If your streaming software crashes during a broadcast, reopen it and attempt to reconnect to the stream. To prevent this from happening, close unnecessary applications to free up system resources. Running a trial stream before going live can help identify any software issues in advance.

Post-Stream Analysis

After your live stream, it’s important to review and analyze what went right and what could be improved.

1. Review Viewer Feedback: Look through comments or chat logs for any issues your audience experienced during the stream. This can provide valuable insights into problems you may not have noticed.

2. Analyze Stream Analytics: Most streaming platforms provide analytics that can help you understand the technical performance of your stream. Look for patterns like dips in viewership that may correlate with technical issues.

3. Test and Experiment: Before your next stream, experiment with different settings, software, or hardware if you encountered issues. Conducting test streams to a private audience or another account can help you fine-tune your setup without impacting your viewers.

4. Speak With Your Live Streaming Provider: If you use a platform like StreamShark, then we highly recommend reaching out to your streaming provider with any questions. When a broadcaster encounters a streaming issue, 99.5% of the time there’s a quick fix!

Conclusion

Troubleshooting a live stream effectively requires preparation, real-time monitoring, and post-stream analysis.

By following the steps outlined in this guide, broadcasters can minimize disruptions and provide a high-quality viewing experience.

Remember, live streaming is as much an art as it is a technical endeavor. Continuous learning, experimenting, and adapting are key to mastering this craft and captivating your audience, stream after stream.

If there’s one thing to emphasize about live streaming, it’s to test, test, test! 

The post Troubleshooting a Live Stream: What You Need to Know appeared first on StreamShark.

At StreamShark we provide customers a simple iframe embed code snippet with a fixed width and height. This gives our customers the flexibility to embed our video player how they like.

Although straight up copy-and-pasting of the code works, it becomes a problem when you want to use responsive iframes instead of fixed ones, and maintain the aspect ratio of the video at the same time.

If done wrong you would end up with black bars along the sides of the video that is known as letterboxing. It might not only be top and bottom, it could also be left and right, either way it would not look nice. Below are some examples of letterboxing.

There are 3 ways to solve this problem.

Method 1: Responsive iframe with fixed aspect ratio (the traditional way)

The traditional method is the so-called “padded-box” technique. This introduces an aspect-ratio-maintaining wrapper onto the iframe, and use padding to set the ratio you want. As it is using the simplest and most basic of CSS rules, it is compatible with all browsers, both old and new.

The following is an example on CodePen.

See the Pen Responsive iframe with fixed aspect ratio (the traditional way) by StreamShark (@streamshark) on CodePen.

Method 2: Responsive iframe using aspect-ratio property (the proper way)

Another way is to employ one of the latest and most welcomed additions to the CSS specification that is aspect-ratio. As the name indicates, it lets you set the aspect ratio of an element and maintains it automatically when the element shrinks or grows. This is achieved with a singular CSS property.

Although it is still in Working Draft at the time of this writing (November 2021), it has already been widely adopted by the latest version of most modern browsers.

Needless to say, this is the long-waited, simplest, cleanest, non-hacky, proper native way of setting aspect ratio on elements.

However, should you wish to have legacy support, we could use the @supports feature of CSS and pseudo-element tactic to add the aforementioned padded-box method as fall-back for older versions of browsers.

The following is an example using this new property with fallback on CodePen.

See the Pen Responsive iframe using aspect-ratio property (the proper way) by StreamShark (@streamshark) on CodePen.

Method 3: Responsive iframe with fixed aspect ratio (the JS way)

Last but not least, JavaScript is also a handy tool for achieving this goal. Assuming that you had a lot of videos (or even just one) all embedded on the same page, and you did not want to deal with all the tagging and styling, then the most efficient way would be to use JavaScript to systematically set the aspect ratio of all the videos at once.

There are libraries, like FitVids.js, for doing this kind of work, but they often only support certain video vendors such as YouTube and Vimeo.

The following is an example on CodePen using vanilla JavaScript demonstrating how it is done. The JS part is a self-invoking function that works out of the box, so you could copy and paste it if you wanted to.

See the Pen Responsive iframe with fixed aspect ratio (the JS way) by StreamShark (@streamshark) on CodePen.

Conclusion

Overall we’d recommend Method 2 as it supports the latest method of embedding videos, along with a fall back to the older padded-box method.

If you’re dealing with a large volume of videos that have already been embedded, then the JavaScript method might suit you best.

The post How to Responsively Embed Videos appeared first on StreamShark.

For Live Stream Broadcasters

As a broadcaster it’s easy to blame the viewer for buffering problems, however, in some cases it’s actually a result of an issue on the broadcasters end. The following points provide a few valuable troubleshooting tips for broadcasters.

1. Ensure your internet connection has sufficient upload capacity.

You should always test your internet connection at the venue you will be live streaming from. It is generally recommended you have an upload capacity of at least double the desired bitrate of your live stream. There are a range of websites which let your test your upload speed, the most well-known one is SpeedTest.net.

2. Test the live stream on a different computer and internet connection.

We always recommend testing the playback of your live stream on a different computer and internet connection to the one which is doing the live stream encoding. This will let you rule out computer and network issues.

3. Avoid using WIFI and 4G internet connections.

We recommend live streams are broadcast via ethernet on a dedicated internet connection. If you must use a mobile 4G internet connection, it’s strongly recommended that you use a bonded connection. A bonded connection utilizes multiple 4G connections to increase the stability of your live stream.

4. Is your computer powerful enough?

If you’re live streaming from a computer (not a hardware encoder), make sure it’s powerful enough to broadcast the live stream. If the computer is reaching 100% CPU usage it can result in dropped frames which can cause video stuttering in the live stream.

5. Have you set up your live stream encoder correctly?

A misconfigured live stream video encoder can cause a plethora of issues. This applies to both software and hardware encoders. If you’re not sure what settings to use, we recommend you contact the support team of the live streaming service you’re using.

6. Does your live streaming provider have PoPs (points of presence) in the areas your viewers will be watching from?

If the provider you’re using doesn’t have a decent global coverage of PoPs then users in regions not covered may experience buffering as a result.

7. Live stream in multiple bitrates.

For example two streams qualities, one in HD the other in SD. This will allow viewers who have slower internet connections to view the lower quality stream. Enable adaptive playback if your live stream provider supports it. Adaptive playback automatically switches between video qualities depending on the internet connection of the viewer.

For Live Stream Viewers

As a viewer there can be a range of issues that are causing a live stream to buffer. Below we’ve listed out some common causes.

1. Turn off any downloads that might be occurring in the background.

Background downloads can saturate a users internet connection. Make sure the computer isn’t downloading any updates, and close any open windows with streaming services like Netflix and Youtube loaded.

2. Check to see if anyone else using the same internet connection is downloading.

If someone else on the same network is performing any of the actions listed in the previous point, then it can cause buffering. It’s also worth checking your smart phone/devices to see if they’re downloading any updates.

3. Check your internet connection, it might not be fast enough.

If the bitrate of the live stream exceeds the maximum speed of the internet connection, then it will likely cause buffering issues.

4. If the stream has multiple video qualities, select the lowest one.

By selecting the lowest video quality it will reduce the amount of bandwidth required to view the video.

5. Check to see if the ISP has any network issues.
Some ISPs have issues with congestion during peak video streaming hours, usually in the evenings (thanks Netflix!).

Closing Thoughts

Hopefully the above steps have allowed you to successfully stop your live streams from buffering. Please leave a comment below if you have any other suggestions on how to stop live streams from buffering.

The post How To Stop Your Live Stream From Buffering appeared first on StreamShark.

You can test the playback of one of your own streams by following this tutorial and using the html5 playback URLs of your preferred stream.

Enable the developer console

First, open up a new Chrome browser tab. Once the tab is opened, click on the Chrome settings icon (top right) and navigate to More Tools->Developer tools.

Clicking on the Developer tools option opens a panel at the bottom of the browser window. This panel contains a useful bunch of tools for software developers or anyone else interested in what is going on in the browser).

Load the URL for your live stream preview

Stream Setup: I’ve created a stream with two video qualities, 600kbps and 2000kbps. 64kbps AAC was selected for the sound format. Therefore, the combined audio/video stream bitrates are 664kbps and 2064kbps.

Stream Status: I’ve started my broadcast software and I’m streaming to my StreamShark stream using a pre-recorded video.

Load your html5 stream playback URL. If we click on the ‘network’ menu within the bottom panel, then click on ‘XHR’, we can see the network requests being made by the browser to fetch the data for stream playback. Note the HLS manifest files being loaded (*.m3u8). These manifest files tell the player which video segments should be loaded by the player (*.ts files). Click on the play icon to begin playback. The player will then commence playback, switching quality based on network conditions. My computer has enough bandwidth to play the higher 2064kbit stream, hence you can see the 2064* manifests being loaded below.

Simulate different bandwidth conditions

Simulate insufficient playback bandwidth

We can simulate a low bandwidth network by throttling the network connection (e.g. a mobile phone connection). Click on the ‘No throttling’ dropdown to select some canned connection speeds.

Let’s throttle the bandwidth right down to a terrible 2G connection (250kbps). As this is well below the 664kbps stream bandwidth, we will start to see some buffering as indicated by the loading icon (spinning circle). Note: the restricted bandwidth increases the time taken to load the segments beyond the 10s playback length of the segment. This causes buffering as the browser can’t load the segments fast enough to be able to display them in sequence. Hence, it is very important to have lower quality streams if you need to support clients with limited bandwidth.

Simulate low playback bandwidth

We can simulate situations where a client has a fair connection, but not enough bandwidth to play the highest quality stream. For this, select the ‘regular 3G’ option (750kbps) from the throttle dropdown. The ‘regular 3G’ option should be high enough to play the lower quality 664kbps stream but not enough to play the 204kbps. Note that the manifest and segment files loaded by the player should only be the 664kbit stream files. You’ll observe that in this case, playback no longer buffers.

Verify normal playback bandwidth

Flick the throttle option back to ‘No throttling’. You should see the player start loading the 2064kbit manifests and segments as it adaptively jumps to the higher bitrate stream. If we click on one of the segment files we can view the HTTP headers. The X-Cache: HIT header entry here indicates the CDN is caching our segments and we have been served a segment from the cache.

Summary

You have now gained an insight into the playback process involved when viewing HLS streams. Picking appropriate bitrates to cover the expected bandwidth available to your clients is vital for uninterrupted viewing, especially for mobile devices.

A general rule of thumb when using multiple bitrates is to ensure each additional stream uses a bitrate roughly double that of the lower quality stream. Other video parameters such as resolution, frame rate and the devices used by your audience may also need to be taken into account when choosing your bitrates. Some experimentation may also be required.

We do not recommend having very similar bitrates (such as 664 and 764) as this may result in the player constantly chopping between the two bitrates if the available network bandwidth is unstable.

If you have any questions or would like us to cover more topics, please leave your question/comments in the comments section below.

The post Viewing HLS Adaptive Stream Behaviour appeared first on StreamShark.