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

Question

I'm trying to display the tablet user's webcam as upright in any tablet orientation. 我试图以任何平板电脑方向将平板电脑用户的网络摄像头显示为直立状态。 When the user rotates the tablet, the webcam rotates with it, and the stream comes out rotated. 当用户旋转平板电脑时，网络摄像头随之旋转，并且流旋转出来。

I think this would be easy enough if I had access to the window.orientation property, but this comes back undefined in both Firefox and Chrome. 我认为，如果我可以访问window.orientation属性，这将很容易，但是在Firefox和Chrome中这都是不确定的。

My code so far is capable of rotating the image, but all I can know based on the resize event is whether it is in portrait or landscape mode and I believe I need to know which of the 4 sides of the tablet is on the bottom in order to rotate the canvas' context the correct amount. 到目前为止，我的代码能够旋转图像，但是基于resize事件，我所能知道的只是它是纵向模式还是横向模式，我相信我需要知道数位板4面中的哪一侧在屏幕底部。为了将画布的上下文旋转正确的数量。

My test code: 我的测试代码：

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

Any ideas? 有任何想法吗？

Answer 1

Maybe I'm not completely understanding what you're trying to accomplish, but can't you just use .on('orientationchange',…) for what you're talking about? 也许我没有完全理解您要完成的任务，但是您不能只使用.on('orientationchange',…)来表达您的想法吗？

And Realistically, you should only need two orientations, not four, one for portrait and one for landscape, right? 实际上，您只需要两个方向，而不是四个方向，一个方向用于纵向，一个方向用于横向，对吗？ The tablet should never orient where the bottom is at the "top" of the screen towards the user. 数位板绝对不能将底部在屏幕“顶部”的位置朝向用户。

If that's the case, then all you should have to do (since you realistically can't get at screen.orientation yet; it's not widely-supported), is just compare $(window).height() against $(window).width() to get orientation. 如果真是这样，那么您要做的所有事情（因为您实际上还不能进入screen.orientation ；它尚未得到广泛支持），只需将$(window).height()与$(window).width()获取方向。

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

Would that suffice for what you're talking about? 这足以满足您的要求吗？ Or am I misunderstanding your question? 还是我误会了你的问题？

Here's a quick fiddle I threw together that should demonstrate this: http://jsfiddle.net/vfK2w/2/ 这是我提出的一个小提琴，应该对此进行演示： 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