Question

我正在webview中加载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设置为与video元素在HTML中相同的大小，则可以使用HTML中的Javascript函数获取正确的大小，并使用{{ 3 {} WebView。例如：

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元素，因此无效。您可能还需要InvokeScriptAsync HTML窗口。

UWP Webview WebRTC纵向模式

1 个答案: