Use HTML5 as a video source

Use Medialooks WebCapture when a web page should be the video source itself—for example, an HTML dashboard, presentation or full-frame graphics output. The SDK renders the page locally and exposes its frames through an MLive or MFLive object, so your application can use its normal preview, mixing, recording or output pipeline.

Integrate WebCapture into your pipeline

1. Create one live object and select the Medialooks WebCapture video device.
2. Set its page URL through line-in and configure the required input video format.
3. Start your normal SDK pipeline: pull frames in MFormats, or start the live source and connect receivers in MPlatform.
4. For navigation, scripts and browser events, obtain the internal browser owned by the live source.
5. On shutdown, stop frame processing and disconnect receivers, close the source, then release the COM objects your application owns.

The following integration snippets use an existing live object on the application's SDK-control thread. Keep that object for the source's lifetime rather than creating one per frame. Enumerate devices at runtime; a saved device index is not portable between computers. Setting an arbitrary URL does not require registry changes.

Configure MFormats

MFormats identifies the video device by its current enumerated index. With live declared as an MFORMATSLib.MFLiveClass:

string pageUrl = "https://www.medialooks.com";
int count;
live.DeviceGetCount(eMFDeviceType.eMFDT_Video, out count);

int webCaptureIndex = -1;
for (int i = 0; i < count; i++)
{
    string name;
    int busy;
    live.DeviceGetByIndex(eMFDeviceType.eMFDT_Video, i, out name, out busy);
    if (name == "Medialooks WebCapture")
    {
        webCaptureIndex = i;
        break;
    }
}
if (webCaptureIndex < 0)
    throw new InvalidOperationException("Medialooks WebCapture is not available.");

live.DeviceSet(eMFDeviceType.eMFDT_Video, webCaptureIndex, "");
live.PropsSet("line-in", pageUrl);

Use the MFORMATSLib types in this edition. pageUrl is the page URL selected by your application; the line-in property lets you set it without editing the preconfigured URL list.

After configuration, pull frames from live and send them to your preview, writer or other receiver, as in Tutorial Live Input. Release every acquired frame in finally and stop the frame loop before closing the source.

For example, one iteration of a MFormats worker, with an already configured MFPreviewClass preview, is:

MFFrame frame = null;
try
{
    live.SourceFrameGet(-1, out frame, "");
    if (frame != null)
        preview.ReceiverFramePut(frame, -1, "");
}
finally
{
    if (frame != null)
        System.Runtime.InteropServices.Marshal.ReleaseComObject(frame);
}

Run frame acquisition on a worker, not the UI thread. The -1 wait is unbounded; coordinate worker cancellation and source shutdown so the application does not leave a thread blocked during exit. After the worker has stopped, call DeviceClose and release the live and preview objects.

Configure MPlatform

MPlatform selects the device by name. With live declared as an MPLATFORMLib.MLiveClass, enumerate devices and set the URL:

string pageUrl = "https://www.medialooks.com";
int count;
live.DeviceGetCount(0, "video", out count);
bool found = false;
for (int i = 0; i < count; i++)
{
    string name, description;
    live.DeviceGetByIndex(0, "video", i, out name, out description);
    if (name == "Medialooks WebCapture")
    {
        found = true;
        break;
    }
}
if (!found)
    throw new InvalidOperationException("Medialooks WebCapture is not available.");

live.DeviceSet("video", "Medialooks WebCapture", "");
live.DeviceSet("video::line-in", pageUrl, "");

After configuring the input format, start the live source and connect it to your normal MPlatform receivers. For an existing, configured MPreviewClass, the SDK Live Source sample uses this order:

live.ObjectStart(null);
preview.ObjectStart(live);

Configure the preview window and audio/video monitoring as in the SDK Live Source sample. Stop and close connected receivers before closing and releasing the live source.

Set the source format explicitly

Configure the HTML source's input format with FormatVideoSet(eMFT_Input, ...) before starting the source. This example requests progressive HD1080 at 30 fps with an alpha-capable pixel format:

var format = new M_VID_PROPS
{
    eVideoFormat = eMVideoFormat.eMVF_Custom,
    nWidth = 1920,
    nHeight = 1080,
    nAspectX = 16,
    nAspectY = 9,
    dblRate = 30.0,
    eInterlace = eMInterlace.eMI_Progressive,
    fccType = eMFCC.eMFCC_ARGB32
};
live.FormatVideoSet(eMFormatType.eMFT_Input, ref format);

The method and structure names are shared by the two API families; use the types from the namespace matching your live object. Choose your actual target rate rather than copying 30 fps into every application. Setting a format is not a guarantee that a complex page will paint a new image at that rate; verify the resulting frames and presentation on the deployment system.

Transparency requires the complete path. Use a page with a transparent background, request an alpha-capable format such as ARGB32, and ensure that downstream conversion, mixing and output preserve the alpha channel. An opaque YUV format such as HDYC does not carry that transparency. A standalone preview may display transparent regions against its own background; that is not proof that alpha has been lost.

Control the internal browser

WebCapture creates its own HTML5 browser component. After selecting and initializing the device, obtain that component instead of creating an unrelated overlay object.

MFormats

object internalHtml = null;
try
{
    live.DeviceGetInternal(eMFDeviceType.eMFDT_Video, out internalHtml);
    var browser = (IMFBrowser)internalHtml;
    browser.BrowserPageLoad(nextPageUrl);
}
finally
{
    if (internalHtml != null && System.Runtime.InteropServices.Marshal.IsComObject(internalHtml))
        System.Runtime.InteropServices.Marshal.ReleaseComObject(internalHtml);
}

MPlatform

object internalHtml = null;
try
{
    live.ObjectGetInternal("", out internalHtml);
    var browser = (IMFBrowser)internalHtml;
    browser.BrowserPageLoad(nextPageUrl);
}
finally
{
    if (internalHtml != null && System.Runtime.InteropServices.Marshal.IsComObject(internalHtml))
        System.Runtime.InteropServices.Marshal.ReleaseComObject(internalHtml);
}

From this IMFBrowser interface you can load another page, execute JavaScript, navigate and forward supported mouse or keyboard input. See browser control and events for those operations and the JavaScript bridge.

A successful BrowserPageLoad call starts navigation; it does not prove that fonts, images, application data and the final rendered picture are ready. For your own page, send an application-defined ready event after the required resources have loaded, then validate actual SDK output. Do not replace readiness with an arbitrary fixed sleep.

Keep ownership clear. The live source owns the internal browser's operating lifetime. Treat the returned interface as a reference to that component, not as an independent source. Stop using and release your returned COM reference before tearing down the live source; do not release both internalHtml and its browser alias as if they were two separate objects. Reacquire the internal interface after changing or restarting the device. Let the containing live source close its internal browser during normal shutdown.

SDK samples for exploring WebCapture

These full paths refer to a default x64 installation. The MFormats example is Tutorial Live Input, not a separate “Sample Live Source” application.

Select Medialooks WebCapture in Video (MFormats) or Video Device (MPlatform), choose a preconfigured URL in Line, choose the input Format and click Init Device. Keep Video Preview enabled in MPlatform. Finish with Close Device. The Line control is a selection list, not an editable address box; use the API above for an arbitrary URL. Available list entries depend on the installation.

Optional: a preconfigured URL list

MFormats can expose preconfigured pages as line-in choices. Existing installations may store this device configuration under:

HKEY_CURRENT_USER\Software\Medialooks\MFormats\MFLive\WebCapture
url.list

This is an optional convenience for device-selection UIs, not a requirement for loading a page. Prefer the programmatic line-in setting for an application-selected URL. Avoid changing a user's registry configuration merely to open one page, and do not assume that the same URL choices are installed on every computer.

Troubleshooting

An earlier WebCapture sample interface is available for reference; sample appearance and availability depend on the SDK release.

Next steps

• HTML5 Overlay overview and quick start — place HTML graphics over an existing video source.
• Shared SDK deployment requirements — use the runtime components matching your application architecture.
• MLCG Editor workflow and SDK samples — design graphics in the web editor and use real published outputs.
• MLCG REST Client for C# — update MLCG session data and animation from your application.