如何使平板電腦網站上的HTML5網絡攝像頭保持直立旋轉

Question

我試圖以任何平板電腦方向將平板電腦用戶的網絡攝像頭顯示為直立狀態。 當用戶旋轉平板電腦時，網絡攝像頭隨之旋轉，並且流旋轉出來。

我認為，如果我可以訪問window.orientation屬性，這將很容易，但是在Firefox和Chrome中這都是不確定的。

到目前為止，我的代碼能夠旋轉圖像，但是基於resize事件，我所能知道的只是它是縱向模式還是橫向模式，我相信我需要知道數位板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>

有任何想法嗎？

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 個解決方案

解決方案1
1 2014-07-21 20:37:07

如何使平板電腦網站上的HTML5網絡攝像頭保持直立旋轉

問題描述

1 個解決方案

解決方案1 1 2014-07-21 20:37:07

解決方案1
1 2014-07-21 20:37:07