Create GStreamer XUL element?

Question

I would like to create a custom XUL element named 'video' for a video editing application based on XULRunner. In the XPCOM documentation it is explained how to access your component from Javascript, but I can't seem to find any documentation on how to declare a new XUL element. Where can I find this? Can anyone point me in the right direction?

Clarification
I want to be able to connect a GStreamer pipeline to a XUL widget. This needs to be done from the C++ part of my application. In essence it boils down to the call:

gst_x_overlay_set_xwindow_id(GST_X_OVERLAY(mOverlay), (gulong)windowId);

So what I need to achieve is a way to access a windowId (HWND on Windows) from a XUL widget. Does such a minimal requirement (accessing the window id for a XUL component) truly require me to create NPAPI plugin? Creating an NPAPI plugin seems somewhat daunting (but probably doable thanks to this project). I would like to avoid overkill, so if a XPCOM component would suffice then that would be great.

Solved!
I found a way to do it in an XPCOM plugin. I discovered that it's possible to obtain the native handle of the top-level XUL window. This requires some hackery because you need to inluclude some of the private XUL headers in order to crack open de XUL element and obtain the window handle. But once you have it, you can create a child window.

The next challenge is to make the child window obey the layout manager of XUL. Since this window does not exists as a XUL element it won't be affected by the layout manager at all. The workaround is to create a XUL element that will serve as a placeholder to overlay the native window on. For this element you then need to register a callback for the "resize" event. In the event handler you can make the size and position of your custom window to be the same as the XUL element.

I use XBL to define an element type with the name "video". It contains a XUL label as only sub-element. This element is used in my XPCOM plugin as for the layouting described above.

This solution works pretty well.

Credit goes to Michael Smith of the Songbird team. He answered my question on the GStreamer mailing list. If you are interested you can look at this code.

Answer 1

You can't implement a new XUL element using XPCOM. Your options are:

• Use an existing element like HTML5 <video> or <canvas>. Here's a demo of the two playing together. With the improved speed of JS engine it might be fast enough for your needs.
• implement a new element using XBL (its content can only be a combination of other elements, plus custom APIs and style)
• implement an NPAPI plugin and embed it via <object>. This allows you to handle painting and events in your C code. Examples of such plugins include Flash and the editing component (scintilla) in Komodo Edit and IDE.

Answer 2

This easiest way, I think, is to create a new XPCom (C++) Canvas context ("webcam") and via the Thebes API inject the frame in this context. And to have something more "beautiful", I would suggest to embed everything in a XBL.