UWP Webview WebRTC纵向模式

Question

我正在 web 视图中加载 HTML5 页面以通过 WebRTC 访问我的网络摄像头。相机旋转了 90 度（参见下面的 CSS）。 如何实现 webview 与我的视频大小相同？

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 的详细使用方法可以参考this article。

其次，如果您只想将 WebView 设置为与 HTML 中的 video 元素相同的大小，您可以使用 HTML 中的 Javascript 函数获得正确的大小，并使用 @987654329 的 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 元素。您可能还需要resize HTML 窗口。