# How can I convert YUV\_420\_888 to JPG in C#

**URL:** <https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740>\
**Category:** Unity Development\
**Tags:** development, unity, camera\
**Created:** [July 4, 2024, 1:38pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740 "2024-07-04T13:38:37Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![uros.mitrovic](https://avatars.discourse-cdn.com/v4/letter/u/b2d939/32.png) [@uros.mitrovic](https://forum.magicleap.cloud/u/uros.mitrovic)\
**Post date:** [July 4, 2024, 1:38pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/1 "2024-07-04T13:38:37Z")

</div>

I want to capture images using Magic Leap while watching the device stream. To achieve this, I've implemented a CV camera, which I've learned captures in YUV format. Could someone assist me with converting these images to JPG? Is there a package or a Stack Overflow solution I might have overlooked? All the solutions I've come across so far are written in Java.

---

<div class="post-metadata">

**Author:** ![kbabilinski](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.magicleap.cloud/kbabilinski/32/19_2.png) [@kbabilinski](https://forum.magicleap.cloud/u/kbabilinski)\
**Post date:** [July 5, 2024, 4:08pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/2 "2024-07-05T16:08:28Z")

</div>

Note, the Magic Leap 2 can provide both RGB and YUV images from the camera. However, if you need to use YUV format, you will first need to convert the image into RGB before saving it as a JPG. At a high level the steps would be:

1. Obtain the camera Frame in YUV format
2. Convert YUV into RGB (simple example : [Visualize Camera Output | MagicLeap Developer Documentation](https://developer-docs.magicleap.cloud/docs/guides/unity/camera/render-camera-output/#render-yuv-output))
3. Use a 3rd party library or unity's built in function to save the texture as a jpeg ([Unity - Scripting API: ImageConversion.EncodeToJPG](https://docs.unity3d.com/ScriptReference/ImageConversion.EncodeToJPG.html))

---

<div class="post-metadata">

**Author:** ![uros.mitrovic](https://avatars.discourse-cdn.com/v4/letter/u/b2d939/32.png) [@uros.mitrovic](https://forum.magicleap.cloud/u/uros.mitrovic)\
**Post date:** [July 8, 2024, 9:30am UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/3 "2024-07-08T09:30:01Z")

</div>

I tried to capture in RGB image but then I can't use device stream while capturing. For my project it is important to be able to constantly follow the application flow on the device stream

---

<div class="post-metadata">

**Author:** ![kbabilinski](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.magicleap.cloud/kbabilinski/32/19_2.png) [@kbabilinski](https://forum.magicleap.cloud/u/kbabilinski)\
**Post date:** [July 8, 2024, 2:22pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/4 "2024-07-08T14:22:30Z")

</div>

Both the CV and Main camera suppot RGB format when using the MLCamera API. [MLCamera (Deprecated) | MagicLeap Developer Documentation](https://developer-docs.magicleap.cloud/docs/guides/features/ml-camera/#stream-capabilities)

The device stream should work properly as long as you do not block the Main Camera stream, and only use the CV Camera stream.

---

<div class="post-metadata">

**Author:** ![uros.mitrovic](https://avatars.discourse-cdn.com/v4/letter/u/b2d939/32.png) [@uros.mitrovic](https://forum.magicleap.cloud/u/uros.mitrovic)\
**Post date:** [July 10, 2024, 12:00pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/5 "2024-07-10T12:00:33Z")

</div>

As I said I tried with RGB but it doesn't allow me to capture with CV while streaming, but when I use YUV it does. I found this answer and that's why I'm trying with this approach:

> [@MLCamera.CaptureType.Image and MLCamera.Identifier.CV compatibility](https://forum.magicleap.cloud/t/mlcamera-capturetype-image-and-mlcamera-identifier-cv-compatibility/3005/3):
>
> Hi @rscanlo2, The Magic Leap 2's CV Camera stream does not support JPG image capture at this time. You will need to either use the Main Camera or capture the image in YUV format and convert the image to RGB in a separate step. Here is a previous post that includes a sample of async JPG image capture in Unity using the Main Camera : [Camera capture in Unity - #14 by kbabilinski](https://forum.magicleap.cloud/t/camera-capture-in-unity/2718/14)

In meantime I managed to get black and white jpeg image using following code:

```auto
public static byte[] ConvertYUVToJPEG(byte[] yPlane, byte[] uPlane, byte[] vPlane, int width, int height)
{
    Color32[] rgbData = new Color32[width * height];
    for (int y = 0; y < height; y++)
    {
        for (int x = 0; x < width; x++)
        {
            int yIndex = y * width + x;
            byte Y = yPlane[yIndex];
            // Convert Y to RGB (black and white)
            byte R = Y;
            byte G = Y;
            byte B = Y;
            rgbData[yIndex] = new Color32(R, G, B, 255);
        }
    }

    Texture2D texture = new Texture2D(width, height, TextureFormat.RGBA32, false);
    texture.SetPixels32(rgbData);
    texture.Apply();

    //FlipTextureVertically(texture);

    byte[] jpegData = texture.EncodeToJPG();

    Debug.Log("JPEG image saved at output.jpg");

    return jpegData;
}

```

Can you assist me with adapting this code for getting the colored image?

---

<div class="post-metadata">

**Author:** ![kbabilinski](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.magicleap.cloud/kbabilinski/32/19_2.png) [@kbabilinski](https://forum.magicleap.cloud/u/kbabilinski)\
**Post date:** [July 10, 2024, 3:01pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/6 "2024-07-10T15:01:21Z")

</div>

Here is a link on how to do this: [Visualize Camera Output | MagicLeap Developer Documentation](https://developer-docs.magicleap.cloud/docs/guides/unity/camera/render-camera-output/#render-yuv-output)

It includes information on how to convert yuv into rgb.

The YUV image is provided and separate planes Y,U, and V. The example that I sent uses a shader to combine them into RGB and then writes it to a texture.

That said we will try to reproduce the issue that you’re mentioning: not being able to capture an RGB image when device stream is active.

—-

To capture the image, are you using the script on the developer portal or have you created a custom script?

---

<div class="post-metadata">

**Author:** ![uros.mitrovic](https://avatars.discourse-cdn.com/v4/letter/u/b2d939/32.png) [@uros.mitrovic](https://forum.magicleap.cloud/u/uros.mitrovic)\
**Post date:** [July 25, 2024, 8:12am UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/7 "2024-07-25T08:12:20Z")

</div>

I tried with using the provided solution, but it's seems like I'm missing something since the output is just black. Should I just generate new Unlit shader and assign it a proper name or is there a shader script somewhere in the documentation? By the way, I'm using Simple camera script from the developer portal, for the capturing. I adapted the script to capture images instead of videos, using the example code as a guide. It's working well with both CV and Main camera.

---

<div class="post-metadata">

**Author:** ![kbabilinski](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.magicleap.cloud/kbabilinski/32/19_2.png) [@kbabilinski](https://forum.magicleap.cloud/u/kbabilinski)\
**Post date:** [July 25, 2024, 1:43pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/8 "2024-07-25T13:43:17Z")

</div>

Were you able to find the `YUV_Camera_Shader ` in your project?

> Make sure that the `YUV_Camera_Shader` is not stripped from your project on build. This can be done by making sure that an object in your scene has a material that uses the `YUV_Camera_Shader` shader or by adding it to the `Project Settings / Player / Preloaded Assets`

---

<div class="post-metadata">

**Author:** ![uros.mitrovic](https://avatars.discourse-cdn.com/v4/letter/u/b2d939/32.png) [@uros.mitrovic](https://forum.magicleap.cloud/u/uros.mitrovic)\
**Post date:** [July 26, 2024, 12:26pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/9 "2024-07-26T12:26:56Z")

</div>

I didn't. I created the shader as a new Unlit shader and then I added it to preloaded assets. I added required dependencies on the script via serialized fields  
 ![image](https://us1.discourse-cdn.com/flex019/uploads/magicleap1/original/2X/5/5ae18313a99a22f7ecf70533dcd88ba5465d3023.png)  
And I subscribed OnCaptureDataReceived method to the OnRawImageAvailable. Is there anything else I should do?

---

<div class="post-metadata">

**Author:** ![kbabilinski](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.magicleap.cloud/kbabilinski/32/19_2.png) [@kbabilinski](https://forum.magicleap.cloud/u/kbabilinski)\
**Post date:** [July 30, 2024, 2:40pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/10 "2024-07-30T14:40:54Z")

</div>

You may want to add logs or break points to your app to see if the OnCaptureDataReceived gets the correct data and if the Render Texture displays correctly.

---

<div class="post-metadata">

**Author:** ![uros.mitrovic](https://avatars.discourse-cdn.com/v4/letter/u/b2d939/32.png) [@uros.mitrovic](https://forum.magicleap.cloud/u/uros.mitrovic)\
**Post date:** [July 31, 2024, 2:26pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/11 "2024-07-31T14:26:35Z")

</div>

So the shader that should be used is the one generated by creating a new unlit shader? Thanks, I will add additional logs to check the data.

---

<div class="post-metadata">

**Author:** ![kbabilinski](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.magicleap.cloud/kbabilinski/32/19_2.png) [@kbabilinski](https://forum.magicleap.cloud/u/kbabilinski)\
**Post date:** [August 6, 2024, 3:30pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/12 "2024-08-06T15:30:10Z")

</div>

The shader is located under `Packages/ Magic Leap SDK/ Runtime/Deprecated/ Camera/ Shaders/`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/magicleap1/original/1X/bd9b737a4d45ea243aa7eb177d60a773b806899a.svg) [@system](https://forum.magicleap.cloud/u/system)\
**Post date:** [August 20, 2024, 3:30pm UTC](https://forum.magicleap.cloud/t/how-can-i-convert-yuv-420-888-to-jpg-in-c/3740/13 "2024-08-20T15:30:45Z")

</div>

Closed on August 20, 2024, 3:30pm UTC

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.