Since MFormats version 1.2.1.8461 you are able to transmit a timecode data with an 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 use 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 Streamer C#"
MPlatform SDK:
"C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples WebRTC\C#\Streamer Sample C#"
The magic behind
Here is the description of timecode embedding process that is performed by MWebRTC object:
1. Get the frame's 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 its 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's 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 a JavaScrpt algorithm of timecode reading
MFormats SDK: C:\Program Files (x86)\Medialooks\MFormats SDK\Samples WebRTC\HTML\Old\MfStreaming.html
MPlatform SDK: C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples WebRTC\HTML\Old\MplStreaming.html
Still have questions?
Tell us what didn’t work or what you’d like clarified.