WebRTC: transmitting the timecode data to the web page frame accurately.

Since MFormats version 1.2.1.8461 you are able to transmit the timecode data with MWebRTC object  by embedding it into the bottom line of each frame. 
This data can be parsed on a web page and transformed into a numerical timecode that can be used for advanced operations like: 
  • Building a timeline
  • Frame accurate positioning
  • Video trimming
  • Playlist compositing 

How to use? 
To start the timecode embedding you should set the "embed_timecode = true" property value in a registry or using PropsSet method: 
m_objWebRTC.PropsSet("embed_timecode", "true");

Once this option is enabled, the MWebRTC object will transform the timecode into binary format, encode into black and white color scheme and append to 4 bottom lines of each frame. 
On a web page you can parse this data and transform back into the timecode. 

Try this feature on our sample applications
MFormats SDK: C:\Program Files (x86)\Medialooks\MFormats SDK\Samples WebRTC\C#\Sample Streaming To Browser




The magic behind
Here is the description of timecode embedding process that is performed by MWebRTC object:
1. Get the frame canvas. 



2. Pick 4 bottom lines of the frame. 



3. Draw them black. 



4. Separate into 34 segments. 



5. The first and last pieces are ignored to minimize the distortion. 



6. The remaining 32 pieces in a middle will be used to encode the timecode values: hours, minutes, seconds and frames. Each one will have it's own 8-segment section.



7. Get the frame timecode. For example 10:17:30.11 
where
10 - hours
17 - minutes
30 - seconds
11 - frames

8. Convert decimal timecode values into binary
Hours: 10  =  1010
Minutes:  17 = 10001
Seconds:  30 = 11110
Frames: 11 = 1011

9. Use 4 8-segment sections to encode hours, minutes, seconds and frames values by color manipulation: black for 0 and white for 1. 


10. Transmit frame by WebRTC as usual. 
NOTE:  The gray grid on the images is displayed for visualization purposes only. MWebRTC object does not paint any grid lines, only Black and White colors for 0 and 1.

When the image is received on a web page you can use JavaScript to analyze the frame canvas, read the binary timecode  and convert it into decimal values. 
After that operation, you can cut 4 bottom lines to keep the picture clear and do not show blinking segments to the customer.

Check our sample web page for JavaScrpt algorithm of timecode reading:
MFormats SDK: C:\Program Files (x86)\Medialooks\MFormats SDK\Samples WebRTC\HTML\MfStreaming.html

By request
Please note that this way of frame-accurate data transfer can potentially be used for any type of data, not only timecode. So if you need to transfer something else, please let us know. We will consider exposing the color manipulation interfaces for you.