What is HTML5


It is to play video in browser, using HTML5 video tag: <video src=”/my.mp4″ controls>

What’s under it: MSE Media Source Extension

Why MSE: JavaScript needs to call codec, which is native code. Another way to call into native is by ActiveX, such as Flash.

What’s on top: the web video players, such as JW Player. JW can also bypass video tag and call MSE, which explains why video tag cannot play HLS but JW can, in Chrome.

Interesting: my test says video tag can play HLS .m3u8 only on Edge, but cannot play .ts anywhere, which is weird. Since the vendor of the browser has total control, everything can happen.

Advertisements

Live Streaming: THSCA Convention and Coaching School, 2018


MaxxSports is live streaming this three day events, from July 22nd to 24th
at https://www.tsrnsports.com/watch-live
from Henry B. Gonzalez Convention Center, San Antonio, TX

CoachShow

HTTP Traffic by Telnet


This is just to show the traffic when requesting and submiting a minimum web form by telnet. Command used: c:\ telnet maxv.maxxsports.cc 80, which is our AWS dev server.
There are two round trip traffic. Frist, clent requests a user name password form, second, client submit this form. Server set a cookie when sending out the form. “Access-Control-Allow-Origin *” is important for our streaming server since this allows the web server containing the video player to play the content.┬áHeaders are terminated by the sequence \r\n\r\n, then content length is said in header.
The traffic is listed below, excluding commends after # sign.
Client sends #1 to request form:

GET http://maxv.maxxsports.cc/test HTTP/1.1
Host: maxv.maxxsports.cc #nginx requires domain name on the line of GET and HOST
Connection: keep-alive #server doesn’t close this connection, and client reuses this socket.
Cache-Control: max-age=0 #must re-fetch
Upgrade-Insecure-Requests: 1 #please redirect me to a secure representation of the resource
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 #Chrome UA string
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate # I understand compressed content.
Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7 # I understand these languages
# hit return on keyboard twice

Server sends #1 returning the form:

HTTP/1.1 200 OK
Server: nginx/1.9.15
Date: Sat, 14 Jul 2018 22:07:49 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 216
Connection: keep-alive
Set-Cookie: LoginForm=SentAlready #sends client a cookie
Access-Control-Allow-Origin: * #allow pages originated from other web sites to fetch this content
<form action=”/test” method=”post”> #just a minimum web form
Username: <input name=”username” type=”text” value=”a”/>
Password: <input name=”password” type=”password” value=”a”/>
<input value=”Login” type=”submit” />
</form>

Client sends #2 to submitting the form:

POST http://maxv.maxxsports.cc/test HTTP/1.1 #post the form
Host: maxv.maxxsports.cc
Connection: keep-alive
Content-Length: 21
Cache-Control: max-age=0
Origin: http://maxv.maxxsports.cc #the web server that generated this page.
Upgrade-Insecure-Requests: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: # same as last request
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: http://maxv.maxxsports.cc/test #previous web page
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
Cookie: LoginForm=SentAlready #the cookie set by last server response.
# hit return on keyboard twice

Server sends #2 saying form submitted successfully:

username=a&password=a
HTTP/1.1 200 OK
Server: nginx/1.9.15
Date: Sat, 14 Jul 2018 22:07:51 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 23
Connection: keep-alive
Cache-Control: no-cache
<p>Success</p>

Python at MaxxSports


C++ has been my primary language in my entire career until a year ago, when Python came to our tool set.
We chose Python for it’s rich collection of modules. In our case, for example:

  1. AI: keras module to TensorFlow for player recognition
  2. REST API: bottle and json module, through which AWS server talks to the clients
  3. Database: pymysql module access video recordings saved in MySql
  4. HLS Playlist parsing: m3u8 module
  5. Access AWS: boto3 module to control ec2 instances