Cómo habilitar WebRTC (acceso a cámara web y micrófono) en CefSharp para WinForms

De forma predeterminada, si intentas acceder al objeto navigator.getUserMedia en la ventana desde un documento cargado en CefSharp sin la configuración adecuada, el navegador no permitirá el acceso al micrófono o la cámara. Ni siquiera si estás accediendo a un sitio web seguro (utilizando el protocolo https) o con archivos locales, la API simplemente no funcionará.

Sin embargo, la solución es muy simple, solo necesita agregar la bandera --enable-media-stream en la inicialización de CefSharp y estarás listo para trabajar con el micrófono y la cámara.

Agregar la marca para habilitar Media Stream

La solución suena fácil, ¿verdad? Su implementación también es fácil. Solo necesita encontrar dónde se está  cargando  CefSettings en Cefsharp en su proyecto y usar el método Add del diccionario CefCommandLineArgs para agregar la bandera que necesitamos:

CefSettings settings = new CefSettings();

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

Cef.Initialize(settings);

La propiedad CefSettings.CefCommandLineArgs le permite agregar argumentos de línea de comando personalizados a la colección de indicadores que deben agregarse en la inicialización de Chromium y en el evento OnBeforeCommandLineProcessing. El primer argumento de la función Add indica el nombre de la bandera que se debe agregar y como segundo argumento su valor (en este caso el 1 indicó que se debe incluir).

Ejemplo

El siguiente ejemplo inicializa una instancia simple de CefSharp dentro de un formulario. Cargará un sitio web que le permite tomar fotografías en el navegador (o un medidor de volumen según la URL web que configure) 

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();
        }
    }
}

Lo interesante de CefSharp es que, a diferencia de Google Chrome, no se le pedirá que otorgue acceso al micrófono o la cámara, simplemente otorgará acceso a los dispositivos.

Que te diviertas ❤️!