I think it is worth going the extra step to center the viewfinder. As it is, on unagi, there are 40px, or 1/8th of the picture off one edge.  I modified the two lines above as follows and it seems to work for me:

    // Counter the position due to the rotation
    // This translation goes after the rotation so the element is shifted up
    // before it is rotated 90 degress clockwise.
    transform += ' translate(0, -' + height + 'px)';

    // Now add another translation at to center the viewfinder on the screen.
    // We put this at the start of the transform, which means it is applied
    // last, after the rotation, so width and height are reversed.
    var dx = -(height - screenHeight)/2;
    var dy = -(width - screenWidth)/2;
    transform = 'translate(' + dx + 'px,' + dy + 'px) ' + transform;