UWP WebView WEBRTC肖像模式

Question

我正在WebView中加载HTML5页面，以通过WEBRTC访问我的网络摄像头。相机旋转90度（请参见下面的CSS）。我该如何达到网络浏览量的大小与我的视频相同？

HTML代码看起来像这样：

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

CSS：

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

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

如何实现WebView的大小与我的视频相同？

首先，UWP应用程序具有可访问相机的本机API，您可以使用。实际上，无需使用WebView加载HTML页面即可访问相机。有关如何使用本机API的详细信息，您可以参考本文。

其次，如果您只想将WebView设置为与HTML中video元素相同的大小，则可以在HTML中使用JavaScript函数获得正确的大小，并使用WebView的InvokeScriptAsync访问它。例如：

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);
}

您可以通过JavaScript函数计算大小和角度，例如

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();
}

但是，如果您实际上希望WebView显示自适应大小的video，尽管您将WebView设置为与video元素相同的大小，但由于WebView显示了整个HTML页面，因此它可能行不通，而不仅仅是video元素。您可能还需要调整HTML窗口的大小。