UWP Webview WebRTC portrait mode

Question

I'm loading a HTML5-Page in a webview to access my Webcam via WebRTC. The camera is rotated by 90 degrees (see CSS below). How can I achieve that the webview has the same size as my video?

The HTML-Code looks like this:

<video autoplay="true" id="videoElement"></video>

CSS:

        #videoElement {
        margin: 0;
        padding: 0;
        display: block;
        background-color: #ffd800;
        transform: rotate(90deg);
    }

The JS:

    var video = document.querySelector("#videoElement");
var hdConstraints = {
    audio: false,
    video: {
        width: 1280, 
        height: 720 
    }
};

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia(hdConstraints, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, videoError);
}

XAML:

    <Grid Background="#FFED6D6D">
    <WebView DefaultBackgroundColor="AntiqueWhite" x:Name="wv"  />
    <Button x:Name="btn" Content=":)" HorizontalAlignment="Left" Click="ShowPic"/>
    <Image x:Name="img" />
</Grid>

Answer 1

How can I achieve that the webview has the same size as my video?

Firstly, UWP app has native APIs to access camera, you could just use. Actually there is no need to use WebView to load a HTML page to access camera. Details for how to use the native APIs you can reference this article .

Secondly, if you just want to set the WebView to the same size as the video element has in HTML, you could get the correct size with Javascript functions in HTML and access it with InvokeScriptAsync of WebView . For example:

private async void wv_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    var WebViewWidth = await wv.InvokeScriptAsync("eval", new string[] { "GetWebViewWidth()" });
    var WebViewHeight = await wv.InvokeScriptAsync("eval", new string[] { "GetWebViewHeight()" });
    wv.Height = Convert.ToInt64(WebViewWidth);
    wv.Width = Convert.ToInt64(WebViewHeight);
}

And you may calculate the size and the angle with Javascript functions,for example,

function VideoGetAngle() { 
    var element = document.getElementById('videoElement');
    var style = window.getComputedStyle(element);
    var transform = style.getPropertyValue("transform");
    var matrix = transform.split('(')[1].split(')')[0].split(',');
    var a = matrix[0];
    var b = matrix[1];
    var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    return (angle < 0) ? angle + 360 : angle;
}

function GetWebViewWidth() {
    var videowidth = document.getElementById('videoElement').clientWidth;
    var videoheight = document.getElementById('videoElement').clientHeight;
    var webviewwidth;
    var angle = VideoGetAngle();
    if (angle === 0 || angle === 180 || angle === 360) {
        webviewwidth = videowidth;
    }
    else if (angle === 90 || angle === 270) {
        webviewwidth = videoheight;
    }
    return webviewwidth.toString();
}

function GetWebViewHeight() {
    var videowidth = document.getElementById('videoElement').clientWidth;
    var videoheight = document.getElementById('videoElement').clientHeight;
    var webviewheight;
    var angle = VideoGetAngle();
    if (angle === 0 || angle === 180 || angle === 360) {
        webviewheight = videoheight;
    }
    else if (angle === 90 || angle === 270) {
        webviewheight = videowidth;
    }
    return videowidth.toString();
}

But if you actually want the WebView to show the video for an adaptive size, although you set the WebView the same size as the video element, it may not work since the WebView shows whole HTML page, not only the video element. You may also need to resize the HTML window.