4

I managed to play video with TextureView and MediaPlayer on Android. I did it like this: I created a Surface with SurfaceTexture:

    public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int w, int h)
{
    mSurface = new Surface(surfaceTexture);
    ...
    ...
}

Attatch the Surface to MediaPlayer:

    try
{
    mMediaPlayer.setDataSource(mPlayUrl);
    mMediaPlayer.setSurface(mSurface);
    ...
    ...
}

That is OK, but not enough for me. I expect that the TextureView to be with round corners and look like a bubble(with an angle), look at the picture below: effect I expect

I found an article(Round video corners on Android) which is very helpful, but the author chose GLSurfaceView and only implemented round corners. I believe that TextureView is also suitable for implementing my effect, SurfaceTexure processing is the key.But I am not familiar with opengl, Who can give me some advices?

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
dragonfly
  • 1,151
  • 14
  • 35
  • That's a really nice article. You can use the same approach by rendering with OpenGL ES to the TextureView's SurfaceTexture. Creating the side-bulge will either require shaving off the right edge of the video, or stretching the content to the side. Either way, you'll need to figure out how OpenGL's texture mapping works. – fadden Aug 26 '15 at 05:49
  • Actually, for what you're doing, his approach #1 might work just fine. Create a View that sits on top of the TextureView that is mostly transparent, and just masks off the corners and right edge by using the same color as the background. – fadden Aug 26 '15 at 06:07
  • @fadden The author of that nice article gave 3 approachs, but he said TextureView is not suitable for doing this. His words are: "The first two are of course the most convenient, but we don’t really get any control over how the video is mapped to the screen (would be great if the TextureView would allow you to define your own geometry + shaders) nor do we get access to where the frames are stored so we can modify them." Do you mean that he was wrong? – dragonfly Aug 26 '15 at 06:55
  • @fadden I found your grafika needs api level 18, and the opengl api you used is not available below api 18. – dragonfly Aug 26 '15 at 14:42
  • I believe what he was saying is that you can't manipulate the TextureView itself in arbitrary ways. You can render to a TextureView or SurfaceView with OpenGL ES, just like you can to a GLSurfaceView. I'm not sure what API you're referring to that is unavailable before API 18; all you need is to construct a Surface from the TextureView's SurfaceTexture and draw on it. Grafika uses EGL 1.4, which requires API 17, but you can use the EGL 1.0 equivalents (see http://bigflake.com/mediacodec/#ExtractMpegFramesTest for an example of a program written both ways). – fadden Aug 26 '15 at 15:41
  • @fadden Please have a look at this, Thanks! http://stackoverflow.com/questions/32285253/weird-frames-appear-when-using-textureview-to-play-video-in-listview – dragonfly Aug 29 '15 at 11:12
  • @fadden I have refered to your ExtractMpegFramesTest using GL10, but I find that it requires api level 15 for some APIs, such as "GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, mTextureID);" Can I use some other APIs to replace this code? – dragonfly Sep 03 '15 at 08:21
  • @fadden I modified the EglCore.java of grafika to egl 1.0, and managed to play a video with gles. I created a surfacetexture as external texture and attach it to IjkMediaplayer, then draw frame to TextureView on onFrameAvailable. It worked fine on my android 4.4 phone, but failed on my 4.1 phone with some log:E/IJKMEDIA(10605): SDL_Android_NativeWindow_display_l: ANativeWindow_lock: failed -22 E/BufferQueue(10605): [unnamed-10605-1] connect: already connected (cur=2, req=2). I am so disappointed. Why did this happen? I did not connect other producers to surfacetexture at all. – dragonfly Sep 03 '15 at 10:13
  • From the error message, it sounds like SDL is attempting to lock a Surface for software rendering, and failing. I haven't used ijkMediaplayer so I can't guess at why that would be. I don't know offhand why there would be a difference in behavior between 4.1 and 4.4. – fadden Sep 03 '15 at 15:49
  • @fadden I am sorry that I didn't describe correctly, I did not encounter canvas lock error at the beginning. In fact, at first I got a opengl error:E/AndroidRuntime(27269): java.lang.RuntimeException: glDrawArrays: glError 0x505 E/AndroidRuntime(27269): at tv.danmaku.ijk.media.gles.GlUtil.checkGlError(GlUtil.java:111) 0x505 means out of memory. So I commented the error code of class Texture2dProgram: GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, firstVertex, vertexCount); Then lock failure occured. Why oom happened? – dragonfly Sep 07 '15 at 08:37
  • @fadden I have fix the oom, it is a multi thread error. – dragonfly Sep 09 '15 at 07:50
  • @dragonfly did you find a solution? – Abdennacer Lachiheb Nov 03 '16 at 14:50
  • @AbdenaceurLichiheb Yes, I have adopt it to an app which is being used by millions of people. – dragonfly Nov 07 '16 at 02:07
  • @dragonfly Can you share it ? – Abdennacer Lachiheb Nov 07 '16 at 07:05
  • @AbdenaceurLichiheb I would like to. But I will be fired if I did. – dragonfly Nov 09 '16 at 06:42
  • @dragonfly hhhh, I was finally able to do it, good luck with your career. – Abdennacer Lachiheb Nov 09 '16 at 10:38
  • @dragonfly how did you manage to solve this issue? – Edmund Rojas Apr 05 '17 at 02:12
  • @EdmundRojas yes. – dragonfly Apr 05 '17 at 02:22
  • @dragonfly Any chance you could explain a bit how it works? – Edmund Rojas Apr 07 '17 at 21:07
  • @EdmundRojas modify the texture coordinate, make opengl not draw on some areas. – dragonfly Apr 10 '17 at 04:51
  • I was able to find a more simplistic way of doing this, simple put the textureview inside of a cardview and set app:cardCornerRadius="4dp" app:cardUseCompatPadding="true", this fixes the problem – Edmund Rojas Apr 10 '17 at 19:15
  • @EdmundRojas But what about the triangle on the right or left? – dragonfly Apr 11 '17 at 06:15
  • @Edmund Rojas Read this article, you will get it! https://medium.com/@fabrantes/rounded-video-corners-on-android-3467841cc1b – dragonfly May 26 '17 at 04:55
  • If all you want is a view with rounded corner on all four corners you can put it in a cardview for Android 5.x+ and you get really smooth rounding. I did not find a way only performing the rounding on certain corners. If you only want the view on certain corners you could "fake" it with minus margin and a transparent background. The cardview for 4.x- does not cut the corners! I found no way of adding that additional triangle you have in the chat bubble. Btw, can you put any views above your texture view or will they be cropped as in the article you linked? – Henrik Gyllensvärd Oct 19 '17 at 11:56

2 Answers2

1

I know it's late reply, but if anyone still struggle to finds solution below sample may help. https://github.com/developer-anees/android-round-camera2video-preview

Try this sample. It display camera preview in circle. Basically it use FrameLayout as parent to display Textureview in circle.

Saku
  • 180
  • 1
  • 3
  • 14
-1

Given that your background is a solid color, you can easily achieve this effect with a mask. If you have any sort of background it wouldn't work though.

Zong
  • 6,160
  • 5
  • 32
  • 46
Alvin Fong
  • 109
  • 6