Giter Club home page Giter Club logo

ffmediaelement's Introduction

FFME: WPF MediaElement Alternative

Join the chat at https://gitter.im/ffmediaelement/Lobby Analytics NuGet version NuGet Build status Codacy Badge

โญ Please star this project if you like it and show your appreciation via PayPal.Me

ffmeplay

Current NuGet Release Status

Please note the current NuGet realease might require a different version of the FFmpeg binaries than the ones of the current state of the source code.

Quick Usage Guide for WPF Apps

Here is a quick guide on how to get started.

  1. Open Visual Studio (v2017 recommended), and create a new WPF Application. Target Framework must be 4.6.1 or above.
  2. Install the NuGet Package from your Package Manager Console: PM> Install-Package FFME.Windows
  3. You need FFmpeg binaries now. Build your own or download a compatible build from Zeranoe FFmpeg Builds site.
  4. Your FFmpeg build should have a bin folder with 3 exe files and some dll files. Copy all those files to a folder such as c:\ffmpeg
  5. Within you application's startup code (Main method), set Unosquare.FFME.MediaElement.FFmpegDirectory = @"c:\ffmpeg";.
  6. Use the FFME MediaElement control as any other WPF control. For example: In your MainForm.xaml, add the namespace: xmlns:ffme="clr-namespace:Unosquare.FFME;assembly=ffme.win" and then add the FFME control your window's XAML: <ffme:MediaElement x:Name="Media" Background="Gray" LoadedBehavior="Play" UnloadedBehavior="Manual" />
  7. To play files or streams, simply set the Source property: Media.Source = new Uri(@"c:\your-file-here");

Additional Usage Notes

  • Remember: The Unosquare.FFME.Windows.Sample provides plenty of usage examples
  • The generated API documentation is available here

Features Overview

FFME is a close (and I'd like to think better) drop-in replacement for Microsoft's WPF MediaElement Control. While the standard MediaElement uses DirectX (DirectShow) for media playback, FFME uses FFmpeg to read and decode audio and video. This means that for those of you who want to support stuff like HLS playback, or just don't want to go through the hassle of installing codecs on client machines, using FFME might just be the answer.

FFME provides multiple improvements over the standard MediaElement such as:

  • Fast media seeking and frame-by-frame seeking
  • Properties such as Position, Balance, SpeedRatio, IsMuted, and Volume are all Dependency Properties!
  • Additional and extended media events. Extracting (and modifying) video, audio and subtitle frames is very easy.
  • Ability to easily apply FFmpeg video and audio filtergraphs.
  • Ability to extract media metadata and tech specs of a media stream (title, album, bit rate, codecs, FPS, etc).
  • Ability to apply volume, balance and speed ratio to media playback.
  • MediaState actually works on this control. The standard WPF MediaElement severely lacks in this area.
  • Ability to pick media streams contained in a file or a URL.
  • Ability to pass input and codec parameters.
  • Ability to introduce hardware decoding acceleration via devices or via codecs.

... all in a single MediaElement control

FFME also supports opening capture devices. See example Source URLs below and issue #48

device://dshow/?audio=Microphone (Vengeance 2100)
device://gdigrab?title=Command Prompt
device://gdigrab?desktop

If you'd like audio to not change pitch while changing the SpeedRatio property, you'll need the SoundTouch.dll library available on the same directory as your application. You can get the SoundTouch library here.

About how it works

First off, let's review a few concepts. A packet is a group of bytes read from the input. All packets are of a specific MediaType (Audio, Video, Subtitle, Data), and contain some timing information and most importantly compressed data. Packets are sent to a Codec and in turn, the codec produces Frames. Please note that producing 1 frame does not always take exactly 1 packet. A packet may contain many frames but also a frame may require several packets for the decoder to build it. Frames will contain timing informattion and the raw, uncompressed data. Now, you may think you can use frames and show pixels on the screen or send samples to the sound card. We are close, but we still need to do some additional processing. Turns out different Codecs will produce different uncompressed data formats. For example, some video codecs will output pixel data in ARGB, some others in RGB, and some other in YUV420. Therefore, we will need to Convert these frames into something all hardware can use natively. I call these converted frames, MediaBlocks. These MediaBlocks will contain uncompressed data in standard Audio and Video formats that all hardware is able to receive.

The process described above is implemented in 3 different layers:

  • The MediaContainer wraps an input stream. This layer keeps track of a MediaComponentSet which is nothing more than a collecttion of MediaComponent objects. Each MediaComponent holds packet caching, frame decoding, and block conversion logic. It provides the following important functionality:
    • We call Open to open the input stream and detect the different stream components. This also determines the codecs to use.
    • We call Read to read the next available packet and store it in its corresponding component (audio, video, subtitle, data, etc)
    • We call Decode to read the following packet from the queue that each of the components hold, and return a set of frames.
    • Finally, we call Convert to turn a given frame into a MediaBlock.
  • The MediaEngine wraps a MediaContainer and it is responsible for executing commands to control the input stream (Play, Pause, Stop, Seek, etc.) while keeping keeping 3 background workers.
    • The PacketReadingWroker is designed to continuously read packets from the MediaContainer. It will read packets when it needs them and it will pause if it does not need them. This is determined by how much data is in the cache. It will try to keep approximately 1 second of media packets at all times.
    • The FrameDecodingWroker gets the packets that the PacketReadingWorker writes and decodes them into frames. It then converts those frames into blocks and writes them to a MediaBlockBuffer. This block buffer can then be read by something else (the following worker described here) so its contents can be rendered.
    • Finally, the BlockRenderingWorker reads blocks form the MediaBlockBuffers and sends those blocks to a plat-from specific IMediaRenderer.
  • At the highest level, we have a MediaElement. It wraps a MediaEngine and it contains platform-specific implementation of methods to perform stuff like audio rendering, video rendering, subtitle rendering, and property synchronization between the MediaEngine and itself.

A high-level diagram is provided as additional reference below. arch-michelob-2.0

Some Work In Progress

Your help is welcome!

  • I am planning the next version of this control, Floyd. See the Issues section.

Windows: Compiling, Running and Testing

Please note that I am unable to distribute FFmpeg's binaries because I don't know if I am allowed to do so. Follow the instructions below to compile, run and test FFME.

  1. Clone this repository.
  2. Download the FFmpeg win32-shared binaries from Zeranoe FFmpeg Builds.
  3. Extract the contents of the zip file you just downloaded and go to the bin folder that got extracted. You should see 3 exe files and multiple dll files. Select and copy all of them.
  4. Now paste all 11 files from the prior step onto a well-known folder. Take note of the full path. (I used c:\ffmpeg\)
  5. Open the solution and set the Unosquare.FFME.Windows.Sample project as the startup project. You can do this by right clicking on the project and selecting Set as startup project
  6. Under the Unosquare.FFME.Windows.Sample project, find the file App.xaml.cs and under the constructor, locate the line MediaElement.FFmpegDirectory = @"c:\ffmpeg"; and replace the path so that it points to the folder where you extracted your FFmpeg binaries (dll files).
  7. Click on Start to run the project.
  8. You should see a sample media player. Click on the Open icon located at the bottom right and enter a URL or path to a media file.
  9. The file or URL should play immediately, and all the properties should display to the right of the media display by clicking on the Info icon.
  10. You can use the resulting compiled assemblies in your project without further dependencies. Look for both ffme.common.dll and ffme.win.dll.

Windows: Troubleshooting

If you get the following error when compiling: The current .NET SDK does not support targeting .NET Standard 2.0. Either target .NET Standard 1.6 or lower, or use a version of the .NET SDK that supports .NET Standard 2.0.

Simply download and install .NET Core SDK v2 or later.

MacOS: Sample Player (in preview, WIP)

Compile FFmpeg for Mac (instructions can be found on FFmpeg.AutoGen) and copy the following libraries from /opt/local/lib 's to /Users/{USER}/ffmpeg (equivalent to ~/ffmpeg):

  • libavcodec.57.dylib
  • libavdevice.57.dylib
  • libavfilter.6.dylib
  • libavformat.57.dylib
  • libavutil.55.dylib
  • libswresample.2.dylib
  • libswscale.4.dylib

Note: when building FFmpeg locally, compiled libraries are named differently than in the list above. E.g. libavcodec.57.dylib is actually named libavcodec.57.89.100.dylib. To properly load libraries, copy and rename each library to match the format in the list above.

In the sample MacOS player, the FFmpeg folder is configured to point to ~/ffmpeg in the following line of code:

Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "ffmpeg");

Note that this can be customized to point to any other folder.

When distributing the player and the associated libraries with your application, dll files should be added to the project as BundleResource items. Also, each library should be copied to the output directory on build. Afterwards, change the above configuration to use Environment.CurrentDirectory to search for FFmpeg libraries.

MacOS: Troubleshooting

Make sure you have Xamarin for Visual Studio 2017 installed if you want to open the MacOS projects.

Thanks

In no particular order

  • To the FFmpeg team for making the Swiss Army Knife of media. I encourage you to donate to them.
  • To Kyle Schwarz for creating and making Zeranoe FFmpeg builds available to everyone.
  • To the NAudio team for making the best audio library out there for .NET -- one day I will contribute some improvements I have noticed they need.
  • To Ruslan Balanukhin for his FFmpeg interop bindings generator tool: FFmpeg.AutoGen.
  • To Martin Bohme for his tutorial on creating a video player with FFmpeg.
  • To Barry Mieny for his beautiful FFmpeg logo

Similar Projects

License

  • Please refer to the LICENSE file for more information.

ffmediaelement's People

Contributors

aaronwatsonsubc avatar ajdillhoff avatar cybersinh avatar deltasem avatar fatalex76 avatar geoperez avatar gitter-badger avatar israelramosm avatar jnschulze avatar keboo avatar kuliner avatar mariodivece avatar mrbean2016 avatar n9 avatar saturne1606 avatar tpetrina avatar xj42 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.