How to Display WebcamTexture as Full Screen on Android Portrait Mode?

Question

I am trying to display full screen Webcamtexture on android Portrait mode. but when i am building and testing it on my device its rotated and videoRotationAngle is 90

I am using RawImage as a texture. I have seen on some post that you have to rotate the transform and get the right angle. But the problem is that if I rotate RawImage UI it will no longer full screen view.

  var camImage:UnityEngine.UI.RawImage;
  var baseRotation:Quaternion;
  var webcamTexture:WebCamTexture;
  var rotation:UnityEngine.UI.Text;


function Start () {

         webcamTexture = new WebCamTexture(Screen.width,Screen.height);
         camImage.texture=webcamTexture;
         camImage.material.mainTexture = webcamTexture;
         webcamTexture.Play();
         rotation.text= webcamTexture.videoRotationAngle.ToString(); // to check the angle


}

Answer 1

I know this is late reply but may help someone facing similar issues.

If you are using RawImage as a Texture, below code should help you achieve the rendering both in Potrait and Landscape mode.

Just ensure that you set "Aspect Mode" in "Aspect Ratio Fitter" of Raw Image to "Width Controls Height" or "Height Controls Width" (whichever is larger based on orientation)

Code Snippet

using UnityEngine;
using UnityEngine.UI;
using System.Linq;
using System.Collections;

public class DeviceCameraController : MonoBehaviour
{
    public RawImage image;
    public AspectRatioFitter imageFitter;

    //set it to either FRONT or BACK
    string myCamera = "BACK";

    // Device cameras
    WebCamDevice frontCameraDevice;
    WebCamDevice backCameraDevice;
    WebCamDevice activeCameraDevice;

    WebCamTexture frontCameraTexture;
    WebCamTexture backCameraTexture;
    WebCamTexture activeCameraTexture;

    // Image rotation
    Vector3 rotationVector = new Vector3(0f, 0f, 0f);

    // Image uvRect
    Rect defaultRect = new Rect(0f, 0f, 1f, 1f);
    Rect fixedRect = new Rect(0f, 1f, 1f, -1f);

    // Image Parent's scale
    Vector3 defaultScale = new Vector3(1f, 1f, 1f);
    Vector3 fixedScale = new Vector3(-1f, 1f, 1f);

    void Start()
    {
        // Check for device cameras
        if (WebCamTexture.devices.Length == 0)
        {
            Debug.Log("No devices cameras found");
            return;
        }

        // Get the device's cameras and create WebCamTextures with them
        frontCameraDevice = WebCamTexture.devices.Last();
        backCameraDevice = WebCamTexture.devices.First();

        frontCameraTexture = new WebCamTexture(frontCameraDevice.name);
        backCameraTexture = new WebCamTexture(backCameraDevice.name);

        // Set camera filter modes for a smoother looking image
        frontCameraTexture.filterMode = FilterMode.Trilinear;
        backCameraTexture.filterMode = FilterMode.Trilinear;

        // Set the camera to use by default
        if (myCamera.Equals("FRONT"))
            SetActiveCamera(frontCameraTexture);
        else if (myCamera.Equals("BACK"))
            SetActiveCamera(backCameraTexture);
        else // default back
            SetActiveCamera(backCameraTexture);
    }

    // Set the device camera to use and start it
    public void SetActiveCamera(WebCamTexture cameraToUse)
    {
        if (activeCameraTexture != null)
        {
            activeCameraTexture.Stop();
        }

        activeCameraTexture = cameraToUse;
        activeCameraDevice = WebCamTexture.devices.FirstOrDefault(device =>
            device.name == cameraToUse.deviceName);

        image.texture = activeCameraTexture;
        image.material.mainTexture = activeCameraTexture;

        activeCameraTexture.Play();
    }

    // Make adjustments to image every frame to be safe, since Unity isn't 
    // guaranteed to report correct data as soon as device camera is started
    void Update()
    {
        // Skip making adjustment for incorrect camera data
        if (activeCameraTexture.width < 100)
        {
            Debug.Log("Still waiting another frame for correct info...");
            return;
        }

        // Rotate image to show correct orientation 
        rotationVector.z = -activeCameraTexture.videoRotationAngle;
        image.rectTransform.localEulerAngles = rotationVector;

        // Set AspectRatioFitter's ratio
        float videoRatio =
            (float)activeCameraTexture.width / (float)activeCameraTexture.height;
        imageFitter.aspectRatio = videoRatio;

        // Unflip if vertically flipped
        image.uvRect =
            activeCameraTexture.videoVerticallyMirrored ? fixedRect : defaultRect;

    }
}

Let me know if you face any issue.

Answer 2

Well you have two options: you could either pick portrait or landscape and block screen rotation, or you could automatically rotate your object and stretch it according to the screen boundaries. See Screen.height and Screen.length for more info.

Answer 3

(mCamera.videoRotationAngle + 90) % 360 will rotate the texture properly, then assign a localScale that swaps the height and width of the texture to fix the size.

Answer 4

You need to flip and rotate it. If you something like CameraCaptureKit (https://www.assetstore.unity3d.com/en/#!/content/56673) you will see there is diffirent ways of achieving what you want. In CameraCaptureKit there is a customized RawImage component that essentailly fiddles with the UV coordinates of the RawImahge instead of roatting it. That way you can rotate the image 90 or 270 and flip it without worring if the phone is running in landscape mode or what ever.