locked
the image which draw on canvas from video is upside down after rotate pad

    Question

  • there is a video element and canvas element(<video></video><canvas></canvas>), it will draw video current frame on canvas if video was paused or ended

    rotate pad (180 degree) before go to the page

    go to the page play video

    pause or after the video ended

    draw video frame on canvas

    the image is upside down

    Note: it also reproduces if rotate pad in playing

    Monday, December 30, 2013 8:09 AM

All replies

  • Hi lbmjsls,

    Is this issue reproducible while debugging with Visual Studio? If possible, could you share a package with me for a better support. I'm not sure why you meet such issue but reading the code might be helpful.

    Basically I would suggest you to detect the screen rotation before you draw the image to the canvas by CurrentOrientation | currentOrientation property. And then you can apply the captured image to the canvas, ref: Quickstart: Capturing video using the MediaCapture API.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles HezModerator Tuesday, January 07, 2014 3:23 AM
    • Unmarked as answer by lbmjsls Wednesday, February 12, 2014 6:32 AM
    Tuesday, December 31, 2013 7:27 AM
    Moderator
  • I get some reasons for the issue, this is what i do:

    1. this is a metro app(js/css/html5) with vs2013 and the issue can reproduce while debugging

    2. add video and canvas element in the page

    3. load a video to play with the video element

    4. rotate pad 90, 180 or 270(degree)

    5. pause the video and hide the video element

    6. show canvas and draw the video to canvas(canvas.drawImage(video, 0, 0, width, height);)

    7. the image which is a frame of video shows on canvas is incorrect

    a. if rotate the pad 180, the image was rotated 180 and shows up-side-down

    b. if rotate the pad 90 or 270, the image was rotated 90

    NOTE: if i draw picture, it's ok(canvas.drawImage(picture, 0, 0, width, height);)

    Wednesday, February 12, 2014 6:31 AM
  • Hi lbmjsls,

    Thx for your explanation, could you share a demo for us to reproduce the issue?

    Not sure if this is a bug right now, but once we know how it work, even it is a bug, we can still use some codes to make it looks correct.

    Thanks,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, February 12, 2014 9:13 AM
    Moderator
  • this is a demo

    1.create a js metro empty project with vs2013 and deploy the app to a pad with remote debug

    2.the app will ask you to select a video(my test is mp4)

    3.it will play for 5 seconds and draw video to canvas

    4.you can rotate the pad firstly for 90, 180 or 270 and find the issue

    this is the default.html code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App4</title>
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
        <!-- App4 references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <video id="video"></video>
    </body>
    </html>

    this is the default.js code:

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        var videofile;
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                    starthandle();
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
        app.start();
        function starthandle() {
            var folderpicker = new Windows.Storage.Pickers.FileOpenPicker();
            folderpicker.fileTypeFilter.replaceAll([".jpg", ".png", ".jpeg", ".bmp", ".jif", ".mp4"]);
            folderpicker.commitButtonText = "Open";
            folderpicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
            folderpicker.pickSingleFileAsync().then(
                function (results) {
                    videofile = results;
                    playvideo();
                });
        }
        function playvideo() {
            var video = document.getElementById("video");
            var canvas = document.getElementById("canvas");
            video.pause();
            video.src = URL.createObjectURL(videofile, { oneTimeOnly: false });
            video.autoplay = true;
            video.style.display = "";
            canvas.style.display = "none";
            setTimeout(function () {
                video.style.display = "none";
                canvas.style.display = "";
                var context = canvas.getContext("2d")
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
            }, 5000);
        }
    })();

    Thursday, February 13, 2014 4:11 AM
  • Note: the issue reproduces is related with the screen resolution. there is a critical value which you set video element bigger than it, the issue will reproduces

    screen resolution   critical value

    1366x768               916

    1920x1200             969

    1400x1080             796

    1024x768               793

    ...

    Tuesday, February 18, 2014 3:17 AM
  • Hi lbmjsls,

    Thanks for additional information and I will try to reproduce this. Once I got some solution will update here. :)

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, February 18, 2014 3:18 AM
    Moderator
  • there are the results which i test with Simulator

    rotate 0 degree(correct)

    rotate 90 degree(incorrect)


    Tuesday, February 18, 2014 6:11 AM
  • rotate 180(incorrect)

    rotate 270(incorrect)

    Tuesday, February 18, 2014 6:13 AM