How to enable WebRTC (access camera and microphone) for CefSharp in WinForms

By default, if you try to access the navigator.getUserMedia object in the window from a document loaded in CefSharp without the proper configuration, the browser won't allow the access to the microphone or the camera. Not even if you are accesing a secured website (using the https protocol) or with local files, the API won't simply work.

The solution however is very simple, you only need to add the --enable-media-stream flag at the initialization of CefSharp and you're ready to work with the microphone and the camera.

Add enable media stream flag

The solution sounds easy right ? Its implementation is easy too. You just need to find where the CefSettings are being loaded to Cefsharp in your project and use the Add method of the CefCommandLineArgs dictionary to add the flag that we need:

CefSettings settings = new CefSettings();

// Add the --enable-media-stream flag
settings.CefCommandLineArgs.Add("enable-media-stream", "1");

Cef.Initialize(settings);

The CefSettings.CefCommandLineArgs property allows you to add a custom command line arguments to the collection of flags that should be added at the initialization of Chromium and in the OnBeforeCommandLineProcessing event. The first argument of the Add function indicates the name of the flag that should be added and as second argument its value (in this case the 1 indicated that it should be included).

Example

The following example initializes a simple instance of CefSharp within a form. It will load a website that allows you to take pictures in the browser (or a volume meter according to the web URL that you set) 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// Load cefsharp
using CefSharp;
using CefSharp.WinForms;

namespace CefsharpExample
{
    public partial class Form1 : Form
    {
        public ChromiumWebBrowser chromeBrowser;

        public void InitializeChromium()
        {
            CefSettings settings = new CefSettings();

            // Initialize cef with a command line argument
            // In this case the enable-media-stream flag that allows you to access the camera and the microphone
            settings.CefCommandLineArgs.Add("enable-media-stream", "1");

            Cef.Initialize(settings);

            // Create a browser component
            // In this example we are opening a website that allows you to take pictures with the camera online
            chromeBrowser = new ChromiumWebBrowser("https://webcamtoy.com");
            // Or if you want to test the microphone level instead
            // chromeBrowser = new ChromiumWebBrowser("https://webaudiodemos.appspot.com/volume-meter/");

            // Add the cef control to the form and fill it to the form window.
            this.Controls.Add(chromeBrowser);
            chromeBrowser.Dock = DockStyle.Fill;
        }

        public Form1()
        {
            InitializeComponent();

            // Start cefsharp
            InitializeChromium();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            Cef.Shutdown();
        }
    }
}

The interesting with CefSharp is, that unlike Google Chrome, you won't be prompted to grant the access to the Microphone or camera, it will just simply grant the access to the devices.

Happy coding !