Why my image is rotated?

When you take a picture using iPhone, there are 4 possible orientation, namely 1, 3, 6, 8. The most common values are 1 (landscape) and 6 (portrait).

When you take a picture holding iPhone in portrait mode, the image orientation will be 6. In iOS and Mac OSX, most softwares (applications) recognize this orientation Flag and display image correctly on screen. It seems windows 7 does the same thing (not fully test).

The original image was saved in a "Rotated 90 CCW" (back to Camera View with orientation 1) , so when display this image, we need rotate 90 clockwise (reverse the CCW).

This behavior is true in preview, browsers etc. However, there is a difference in browsers, if I refer the image directly (file:///Users/jimz/Downloads/1323-bike-rotate.jpeg), it is auto-rotated clockwise 90 degree. If I refer the image using <img src="1323-bike-rotate.jpeg"> in HTML, it is not auto-rotated, so in html image, it is displayed in original format which is 90 degree rotated counter-clockwise. This is the reason why my image is rotated from UI viewpoint.

WebRTC Acronyms

ICE: Interactive Connectivity Establishment (It is a framework to allow browsers to connect peers)
STUN: Session Traversal Utililities for NAT (It is a protocol to discover public address and determine if there is any restrictions in the router)
NAT: Network Address Translation (It is to give device, connecting to router, a public IP)
TURN: Traversal Using Relays around NAT (It is to bypass Symmetric NAT restriction by connecting to TURN server and relaying all information through TURN server)
SDP: Session Description Protocol (It is a standard to describe multimedia content of the connection such as resolution, format, codec, encryption etc metadata, simply put, it is media info)
Signal Channel it is sort of channel of communication to exchange information before establish a connection. The information is called offer (peer A)/answer (peer B).
ICE Candidate: It is to exchange information about the network connection. It is connectivity info which details the available methods the peer is able to communicate.

All information is from below blog which is very easy to understand these acronyms.


https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms

Am I online or offline?

HTML5 provides APIs to let user check if user_agent is online or offline, but unfortunately different browser vendors implement differently. From my testing, Chrome is the only browser which detects network connectivity and provides "correct" online/offline information. While Firefox etc is checking if user_agent is in "Work Offline" mode, so it returns true even though network connectivity is lost. Due to this inconsistency across browsers,  the two "ideal" ways (check navigator.onLine, or window.ononline/onoffline event) will NOT work.

There are two possible solutions to overcome this and provide online/offline status.
1. AppCache error event (applicationCache.onerror, applicationCache.addEventListener('error')) - pay attention to reaching applicationCache size limit.
2. XHR (long polling predicable resource on server, if timeout either server is down or network connectivity is lost)