how to add timestamp like a camcorder while recording video using GLES20

Question

I want to display date/time while recording the video and it should be displayed when we replay the videos like we do it in CCTV video recordings. i can display shapes using GLES20 i want to use text inside video to display Timestamp i am using textureview along with Mediarecorder andorid when i run GLText() it displays nothing instead of text "hellooo" on the video. here is an example :

 private void drawBox() {
        GLES20.glEnable(GLES20.GL_SCISSOR_TEST);
        GLES20.glScissor(0, 0, 100, 100);
        GLES20.glClearColor(1.0f, 0.0f, 0.0f, 1.0f);
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        GLES20.glDisable(GLES20.GL_SCISSOR_TEST);
    } 

this code displays a box but i want to replace this with text and i am unable to find any solution ..

I tried this method but it didn't work 


  public void GLText() {

//        Bitmap bitmap = Bitmap.createBitmap(64, 64, Bitmap.Config.ARGB_4444);
//        Canvas canvas = new Canvas(bitmap);
//        bitmap.eraseColor(0);
//
//        Paint paint = new Paint();
//        paint.setTextSize(18);
//        paint.setAntiAlias(true);
//        paint.setARGB(0xff, 0xff, 0xff, 0xff);
//        paint.setTextAlign(Paint.Align.LEFT);
//        paint.setTextScaleX(0.5f);
//        canvas.drawText("testGLText", 0.f, 15.f, paint);

        Bitmap bitmap = fromText("hellooo",50);
        GLES20.glEnable(GLES20.GL_SCISSOR_TEST);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glEnable(GLES20.GL_BLEND); // this, and the next line
        GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA); // and this were key! I'm still not completely sure as to what this is doing, but it works!
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, bitmap, 0);


    }

 public Bitmap fromText(String text, int textSize) {
        Paint paint = new Paint();
        paint.setTextSize(textSize);
        paint.setColor(Color.WHITE);
        float baseline = -paint.ascent(); // ascent() is negative
        int width = (int) (paint.measureText(text) + 1.0f);
        int height = (int) (baseline + paint.descent() + 1.0f);
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        bitmap.setHasAlpha(true);
        Canvas canvas = new Canvas(bitmap);
        // canvas.drawColor(Color.argb(0, 255, 255, 255));
        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        canvas.drawText(text, 0, baseline, paint);
        return bitmap;
    }

My entire code is :

 if (showBox && (++mFrameCount & 0x04) == 0) {
            drawBox(); // here drawBox draws a box but i when i call GLText() it draws nothing
        }
    }

    /**
     * Draws a red box in the corner.
     */
    private void drawBox() {
        GLES20.glEnable(GLES20.GL_SCISSOR_TEST);
        GLES20.glScissor(0, 0, 100, 100);
        GLES20.glClearColor(1.0f, 0.0f, 0.0f, 1.0f);
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        GLES20.glDisable(GLES20.GL_SCISSOR_TEST);
    }

    private void drawSquare() {
        GLES20.glEnable(GLES20.GL_SCISSOR_TEST);
        GLES20.glScissor(200, 300, 900, 100);
        GLES20.glClearColor(1.0f, 0.0f, 0.0f, 1.0f);
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        GLES20.glDisable(GLES20.GL_SCISSOR_TEST);
    }

    public void GLText() {

//        Bitmap bitmap = Bitmap.createBitmap(64, 64, Bitmap.Config.ARGB_4444);
//        Canvas canvas = new Canvas(bitmap);
//        bitmap.eraseColor(0);
//
//        Paint paint = new Paint();
//        paint.setTextSize(18);
//        paint.setAntiAlias(true);
//        paint.setARGB(0xff, 0xff, 0xff, 0xff);
//        paint.setTextAlign(Paint.Align.LEFT);
//        paint.setTextScaleX(0.5f);
//        canvas.drawText("testGLText", 0.f, 15.f, paint);

        Bitmap bitmap = fromText("hellooo",50);
        GLES20.glEnable(GLES20.GL_SCISSOR_TEST);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glEnable(GLES20.GL_BLEND); // this, and the next line
        GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA); // and this were key! I'm still not completely sure as to what this is doing, but it works!
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, bitmap, 0);


    }


    public Bitmap fromText(String text, int textSize) {
        Paint paint = new Paint();
        paint.setTextSize(textSize);
        paint.setColor(Color.WHITE);
        float baseline = -paint.ascent(); // ascent() is negative
        int width = (int) (paint.measureText(text) + 1.0f);
        int height = (int) (baseline + paint.descent() + 1.0f);
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        bitmap.setHasAlpha(true);
        Canvas canvas = new Canvas(bitmap);
        // canvas.drawColor(Color.argb(0, 255, 255, 255));
        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        canvas.drawText(text, 0, baseline, paint);
        return bitmap;
    }

@suvartheec when i run GLText() it displays nothing instead of text "hellooo" on the video — bipin, Dec 02 '17 at 06:56

score 1 · Answer 1 · answered Dec 07 '17 at 08:11

1

Here I got an opensource library which works the similar way .. i can insert text inside a video and can do many other things.

https://github.com/INDExOS/media-for-mobile

answered Dec 07 '17 at 08:11

bipin

1,091
4
12
30

score 0 · Answer 2 · answered Dec 22 '17 at 06:56

I've faced the same issue of not being able to draw a transparent text texture on top of the video texture, using Grafika. I created a transparent text bitmap using the following :

public Bitmap fromText(String text, int textSize, @ColorInt int textColor) {
Paint paint = new Paint();
paint.setTextSize(textSize);
paint.setColor(Color.WHITE);
float baseline = -paint.ascent(); // ascent() is negative
int width = (int) (paint.measureText(text) + 1.0f);
int height = (int) (baseline + paint.descent() + 1.0f);
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
bitmap.setHasAlpha(true);
Canvas canvas = new Canvas(bitmap);
// canvas.drawColor(Color.argb(0, 255, 255, 255));
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
canvas.drawText(text, 0, baseline, paint);
return bitmap;
}

When I save the above Bitmap as a PNG file, it's transparent with only white text, however it shows up with a black background when rendered with Grafika.

To set a bitmap to a texture handle use the following :

public void setBitmap(Bitmap bitmap, int textureId) {
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(mTextureTarget, textureId);
GLES20.glEnable(GLES20.GL_BLEND); // this, and the next line
GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA); // and this were key! I'm still not completely sure as to what this is doing, but it works!
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, bitmap, 0);
}

And lastly, there is a bug in Grafika where they have used GLES11Ext.GL_TEXTURE_EXTERNAL_OES in the createTextureObject() in Texture2dProgram, instead of mTargetTexture.

how to add timestamp like a camcorder while recording video using GLES20

2 Answers2