Monday, April 28, 2008

How I learnt to create a firefox plugin which renders using SDL/OpenGL

I have been hunting for the past 2 days for any howto's to create a plugin. There was no official howto, only the API documentation. It was like “Hey! I shall give thee brick, mortal, paint, etc and you should be able to build a house. Just have a look at the other big houses using the same brick and mortar.” I have managed to get a simple plugin. Here's how I did it.

Objective: Create a simple firefox plugin, which uses SDL/OpenGL for its rendering.
Ingredients: Sample Code for NullPlugin from firefox code tree ( mozilla/modules/plugin/samples/default/unix) .
Procedure:
  1. Get hold of the firefox code from mozilla.org
  2. Run configure so that you have Makefiles created in all folders. ( I don't know how to get a Makefile from Makefile.in. The damn tool(automake) asks for configure.in which isn't there.)
  3. Goto nullplugin.h and change the mime types , to something of your choice. Change the name of the plugin. After all I'd like some fancy name to come up when I check it in about:plugins
  4. Escape all code in makeWidget by adding a return statement in place of all other code in makeWidget function in nullplugin.c
  5. Remove DialogOKClicked ,DialogCancelClicked,DialogEscapePressed as they are not used.
  6. Now add some initalization in NPP_SetWindow and cleanup code in NPP_Destroy functions in npshell.c
  7. Now add some drawing code in xt_event_handler in nullplugin.c
  8. Edit the makefile to add the SDL and OpenGL libraries. Also add headers in nullplugin.h. Also change the library name to somethin other than nullplugin Now use make.
  9. Copy the plugin in the plugin folder of firefox usually /usr/lib/firefox/plugins Now create a HTML file which has the uses the plugin.
  10. You are done.
    Code: SDL_simpleplugin

18 comments:

Unknown said...

I have gone thru ur code.. but i get some compilation error

$make
Makefile:43: ../../../../../config/autoconf.mk: No such file or directory
Makefile:69: ../../../../../config/rules.mk: No such file or directory
make: *** No rule to make target `../../../../../config/rules.mk'. Stop.

al said...

@sonu

Did you succeed compiling the nullplugin without the changes that I have suggested in the post. You either have placed your code in a directory location outside the source code for mozilla that you need, or you have not run configure script.

If this works out please repost, with the diagnosis.

Anonymous said...

lubes@lubes:~/mozilla-central/modules/plugin/default/unix$ make
make export
make[1]: Entering directory `/home/lubes/mozilla-central/modules/plugin/default/unix'
make[1]: Nothing to be done for `export'.
make[1]: Leaving directory `/home/lubes/mozilla-central/modules/plugin/default/unix'
make libs
make[1]: Entering directory `/home/lubes/mozilla-central/modules/plugin/default/unix'
make[1]: *** No rule to make target `/home/lubes/mozilla-central/objdir-ff-release/js/src/config/config.mk', needed by `liblubesplugin.so'. Stop.
make[1]: Leaving directory `/home/lubes/mozilla-central/modules/plugin/default/unix'
make: *** [default] Error 2

al said...

@lubes please explain in detail

Anonymous said...

Hi Abinav,
I have compiled nullplugin with MIME type changes but could you please explain me how to integarate the SDL application part of mozilla .
example I have a SDL application which does it displayes video from webcam but i want to render the video part of the mozilla browser using the SDL application.
Could you please explain me how can i acheive this.

Thanks ,

Venu...

al said...

@Venu

Steps needed
1. initialization
2. render

reference code: SDL_simpleplugin.tar.bz2

initialization npshell.c line 228
render nullplugin.c line 346

Anonymous said...

Hi Abinav,
I have tried to integrate my SDL sample application which renders the video from webcam but the application is gettig crashing.

Could you please send me your mail id so that i can send you the my sample application.

Thanks,
Venu ...

al said...

@Venu plz upload you document to sites.google.com or some public upload facility and update here.

Anonymous said...

Hi Abinav,

I have uploaded my sample application on http://sites.google.com/site/venuvemulapallyproject/have-a-fun please download webcamDisp.c.
This application I am trying to integrate with yours SDL_simpleplugin.tar.bz2.

I am working on Linux to integrate this and to integrate and compile the webcamDisp.c mediastreamer libraries are required to install.

In Makefile of SDL_simpleplugin.tar.bz2 please add EXTRA_DSO_LDOPTS += $(shell pkg-config mediastreamer --libs)
and CFLAGS += $(shell pkg-config mediastreamer --cflags) and CSRCS = webcamDisp.c

I have integrated the webcamDisp.c with your sample SDL plugin application but I am unable to render the video usibg mozilla SDL plugin and it is crashing may be i have done wrong somewhere. Could you please suggest/help me in the integration of SDL sample application.

Thanks,
Venu ...

Anonymous said...

Hi Abinav,

Have you get the time to look at my sample application integration?


Thanks

al said...

@Venu

dude i m a bit caught with office work .. give me some time to look over it

Anonymous said...

Thanks for your help and reply ...

al said...

@Venu have u tried tracing your crash by logging after each function call to exactly pin point your problematic function call

Anonymous said...

Hi Abinav,

I am very new for SDL. So i am not getting understanding of SDL plugin creation over mozilla.
Could you please provide me sample application for playback of video/Image from file using SDL plugin on Mozilla ?

Anonymous said...

Hi Abinav,

I have written a small sample application in C using SDL library which does loads a BMP image and renders. Now i want to integrate this application with your sample SDL_plugin application.

I have been trying to integrate but i have some doubts please clarify me.

1) In Your SDL_Sample plugin you are using SDL_SetVideoMode but not taking/using the SDL_Surface because from my sample application

void ShowBMP(char *file, SDL_Surface *screen, int x, int y)
{
SDL_Surface *image;
SDL_Rect dest;

/* Load the BMP file into a surface */
image = SDL_LoadBMP(file);
if ( image == NULL ) {
fprintf(stderr, "Couldn't load %s: %s\n", file, SDL_GetError());
return;
}

/* Blit onto the screen surface.
The surfaces should not be locked at this point.
*/
dest.x = x;
dest.y = y;
dest.w = image->w;
dest.h = image->h;
SDL_BlitSurface(image, NULL, screen, &dest);

/* Update the changed portion of the screen */
SDL_UpdateRects(screen, 1, &dest);
}

if i want to blit the image to display layer I am using SDL_Surface *screen; if i want to blit at your sample application how to do ?

Could you please suggest me ?


Venu

al said...

@Venu u need to do the same as you would do for any other SDL based application. A lot of examples are available at libsdl.org. Check them out. I am not using SDL Surfaces as I used OpenGL directly.

Anonymous said...

Hi Abinav,
Thanks for reply. I have integrated the sample application and compiled successfully but I am not getting the image on the browser window. I have attached the my modified plugin application in the below mentioned url. Please find the unix_venu.tar.bz2 from http://sites.google.com/site/venuvemulapallyproject/have-a-fun

My main doubt is SDL sample application is creating ( stand alone application ) the Seperate window and rendering the image. How to load/Blit the BMP image on to browser window using this sample application.

Please suggest me.

DebugLog
---------
OA: plugin received window resize.
Window=(71303169)
W=(600) H=(300)
* Done * ** Done **OA: plugin received window resize.
Window=(71303169)
W=(600) H=(300)
OA: plugin received window resize.
Window=(71303169)
W=(600) H=(300)
buttonrelease

Going to create the display Intance

al said...

@Venu

have a look at http://lists.libsdl.org/pipermail/sdl-libsdl.org/2008-December/067552.html