VidTech

Introducing the Bitmovin MP4Inspector

MP4Inspector, MP4 - Bitmovin

Video developers and streaming engineers (including those at Bitmovin) are often using multiple tools to troubleshoot everything that can go wrong at different points in their end-to-end workflow. This usually means a mix of commercial and open-source solutions combined with some in-house tools that are only available within your company. For the past couple of years, one of Bitmovin’s most useful internally built tools has been our MP4Inspector, a Chrome extension that enables quick inspection of streaming irregularities directly in the browser. With this post, we are happy to announce that MP4Inspector has been published with the open-source MIT license and is now free and available for everyone!

Troubleshooting before MP4Inspector 

When investigating any web-based issues that are reproducible on your own machine, the built-in browser dev tools are a good place to start, especially for diagnosing network-related problems. But, when it comes to digging deeper into video encoding and packaging issues, the built-in tools fall a little short. As you can see in the screenshot below, if you select one of the .m4s video segments from a DASH stream, the Network tab is unable to interpret the raw data and shows a bunch of unintelligible text in the Preview.

MP4Inspector_Network Inspection of m4s Video Segments_Screenshot
Network Inspection of m4s Video Segments

So in order to dig any further, you would have to download the problem segment(s) and open them in some other tool (like ISOViewer) to visualize the mp4 box structure and contents. That might not reveal anything on its own, so then you might do the same with the segment(s) from a working stream, and compare them to see what might be different or missing to reveal the source of the issue.  
That’s a tedious, boring process, especially if you’re doing it several times a day, so two of Bitmovin’s Software Developers, Stefan Krainer and Wolfram Hofmeister decided to make their own lives easier with a hackathon project…a Chrome extension that can render mp4 boxes in the Network tab. They quickly learned the Network tab itself is not available for modification but pivoted to build their own enhanced Network tab capable of rendering mp4 boxes and more. It has been valuable internally ever since and has further evolved into the version that we have now open-sourced for you to use.

What can MP4Inspector do?

Filter by file name and/or mp4 box

As with the default Network tab, you can filter the entries by file name or URL. A big improvement over the Network tab, is that you can also filter by mp4 box name (like moov or traf) to show only entries that contain a box with that value. The filters can also be combined to only show entries that match both. 

MP4 Box Name Filters_MP4Inspector_gif preview
MP4 Box Name Filters

Side-by-side mp4 box comparisons

Compare the boxes of any two segments by selecting them and clicking the compare button. The boxes will then be shown next to each other, with color-coded results showing what is the same/different/missing between them.

Side-by-side MP4 Box Comparison_MP4Inspector_gif preview
Side-by-side MP4 Box Comparison

Download and concatenate segments

For more detailed inspection (with ffprobe for example) or to create a standalone test asset, MP4Inspector offers the ability to download and concatenate segments into a single, playable file by combining the init segment with any number of data segments you select. Note that currently, the concatenation does not support audio + video muxing, meaning you’ll need to choose only video or only audio segments. 

Download and Concatenate_MP4 Segments_MP4Inspector_gif preview
Download and Concatenate MP4 Segments

Installing and using MP4Inspector

To install the MP4Inspector, either clone the github repo, download the zipped version to your local machine, or download the extension in Chrome Web Store. Next, in Chrome, navigate to chrome://extensions/ (or edge://extensions/ for chromium edge), enable Developer mode and then click Load unpacked extension. Select the folder where you cloned the repo or unzipped the download and MP4Inspector will appear among your other installed extensions. Restart your browser to complete installation and MP4Inspector will now show up as the far-right tab when you open the Chrome Developer Tools. You may need to click the arrows to expand the view depending on your monitor size (if that’s the case you can drag to rearrange the tabs to make it more convenient).
That’s it! Now you can play videos, choose segments, and inspect and compare their mp4 boxes all in the same browser tab! It’s made our daily troubleshooting much more efficient, getting us to the root cause of problems faster and in fewer steps. We hope that you’ll see those same benefits yourself and maybe even expand the capabilities further. If you have any feedback, questions, or suggestions for improvements please share them here
Test out our other player functions with our free trial today!

Andy Francis is a Technical Product Marketing Manager at Bitmovin, mainly focused on the Live and VOD Encoding products. He has extensive experience working with live streaming and encoding workflows, from premium OTT services to user-generated content, and is passionate about spreading knowledge and access to streaming technologies.

Read more by Andy

Related Posts

Join the conversation