Question

我尝试在任何平板电脑方向上将平板电脑用户的网络摄像头显示为直立。当用户旋转平板电脑时，网络摄像头随之旋转，并且流体会旋转出来。

我认为如果我可以访问window.orientation属性，这很容易，但在Firefox和Chrome中都没有定义。

到目前为止，我的代码能够旋转图像，但我根据调整大小事件可以知道的是，无论是纵向还是横向模式，我相信我需要知道平板电脑的4个侧面中的哪一个是底部为了旋转画布＆＃39;上下文正确的金额。

我的测试代码：

<!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>

有什么想法吗？

Answer 1

也许我并不完全理解你想要完成的事情，但是你不能仅仅使用.on('orientationchange',…)来解决你所谈论的事情吗？

实际上，你应该只需要两个方向，而不是四个方向，一个用于纵向，一个用于景观，对吧？平板电脑不应该定位在底部和顶部的位置。屏幕朝向用户。

如果是这样的话，那么你应该做的就是（因为你现实无法获得screen.orientation;它没有被广泛支持），只是将$(window).height()与$(window).width()进行比较以获得方向。

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

这对你所谈论的内容是否足够？或者我误解了你的问题？

这里是一个快速的小提琴我拼凑在一起，应该证明这一点：http://jsfiddle.net/vfK2w/2/

如何让HTML5网络摄像头在平板电脑的网站上直立旋转

1 个答案: