我如何保持HTML5摄像头旋转直立在网站上的平板电脑

我试图将平板电脑用户的网络摄像头显示为垂直的任何平板电脑方向。当用户旋转平板电脑时，网络摄像头也随之旋转，流也随之旋转。

我想如果我能进入窗户，这就很容易了。属性，但是这个在Firefox和Chrome中都是未定义的。

到目前为止，我的代码能够旋转图像，但我所能知道的是基于调整大小事件是在纵向还是横向模式下，我相信我需要知道平板电脑的4面中哪一面是在底部，以便旋转画布上下文的正确数量。

我的测试代码:

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <video id="myVideo" width = "250" height="200"></video>
    <canvas id="myCanvas" width="250" height="200"></canvas>
    <script src="../plugins/jquery/jquery-1.11.1.js"></script>
    <script>
        $(document).ready(function(){
            var video = $('#myVideo');
            var canvas = $('#myCanvas').get(0);
            var context = canvas.getContext('2d');
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate(Math.PI / 2);
            context.translate(canvas.width / -2, canvas.height / -2);
            webcam_setup();
            video.hide();

        });
        // Listen for orientation change
        $(window).resize(function() {
            // Announce new orientation number - Comes back undefined
            // console.log(window.orientation);
        });
        function DrawToCanvas(video, context) {
            //context.rotate(Math.PI/2);
            context.drawImage(video,0,0, 250, 200);
            setTimeout(DrawToCanvas, 35, video, context);
        };
        function webcam_setup() {
            navigator.myGetMedia = ( 
                navigator.getUserMedia || 
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
            navigator.myGetMedia({video: true}, webcam_connect, webcam_error);
        };
        function webcam_connect(stream) {
            var video = $('#myVideo').get(0);
            var canvas = $('#myCanvas').get(0);
            var context = canvas.getContext('2d');
            video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
            video.play();
            waitForStream(video, context);
        };
        function waitForStream(video, context) {
            if (video.readyState < 4) {
                console.log("wait");
                setTimeout(waitForStream, 2000, video, context);
            }
            else {
                console.log("done waiting");
                DrawToCanvas(video, context);
            };
            return false;
        };
        function webcam_error(e) { console.log(e); };

    </script>
  </body>
</html>

任何想法?

也许我不完全理解你想要完成的任务，但是你不能只使用.on('orientationchange',…)来完成你所说的吗?

实际上，你只需要两个方向，而不是四个，纵向一个，横向一个，对吧?平板电脑不应该将屏幕顶部的底部朝向用户。

如果是这种情况，那么您应该做的就是(因为实际上您无法进入屏幕)。取向;它不被广泛支持)，只是比较$(window).height()和$(window).width()来获得方向。

$(window).on('orientationchange resize',function(){
    if ($(window).height() <= $(window).width()) {
        // Landscape
    } else {
        // Portrait
    }
});

这就够你说的了吗?还是我误解了你的问题?

下面是我拼凑的一个快速的小提琴，它应该可以演示这一点:http://jsfiddle.net/vfK2w/2/

相关内容

最新更新

热门标签：