Streaming your bedroom to the world

A talk about simple, free, opensource live video streaming directly from your computer.

Transcript

1. Streaming your bedroom … live to the WHOLE world! Jernej Virag @jernejv
2. Do it live!
3. Tools of the trade
4. Tools of the trade Camera Computer Browser Robot Fruit Bedroom Datacenter Viewer Streaming server
5. Camera / computer • Camera with PC connection • Webcams work great • HDMI capture cards not so much • Look for DirectShow / Video4Linux2 / AVFoundation compatibility • Good microphone is critical • Do use a stand, you’re not Michael Bay. Camera Computer
6. Camera / computer • PC or a smartphone • Enough CPU power to encode video • !!!!!! STABLE !!!!!! internet connection (WIRE!) • Streaming software Camera Computer
7. Camera / computer • Encoding settings • FLV container with RTMP protocol • H.264 video, AAC audio Camera Computer FLV H.264 AAC
8. H.264 settings • BITRATE - how many BITS each second should take • FPS - keep it at standard 30 or 25 • MAIN profile • KEYINT / GOP / I-FRAME INTERVAL at most 2x FPS Camera Computer
9. H.264 settings SUGGESTED BITRATE SIZE OF 10 MIN VIDEO 480p (640x480) 500 kbit/s ~36MB 576p (720x576) 800-900 kbit/s ~62MB 720p (1280x720) 1000-1200 kbit/s ~80MB 1080p (1920x1080) 3500-5000 kbit/s ~300MB
10. Streaming server • Receives video stream and keeps it around • Listens for phones, browsers and other clients • Packs video into proper container and protocol • Can also transcode Streaming server
11. Streaming server • You should probably use a SaaS service if you can - YouTube, Twitch.tv, etc.
 • Commercial: Adobe Media Server, Wowza, Akamai… • Opensource: Apache (module), Nginx (module), … Streaming server
12. Client Browser GOOD NEWS!
13. Client Browser Desktop browser streaming support is fragmented and broken. … yes including MPEG-DASH …
14. Client Browser BETTER NEWS!
15. Client Browser Flash can do it!
16. Client Fruit / Robot Mobile is better.
 HTTP Live Streaming - HLS
17. Client Browser Flash can do HLS too.
18. Recap Browser
 Flash iOS Streaming server Camera
 Computer Browser
 Flash Browser
 Flash Android H.264 / AAC video
 FLV container
 RTMP protocol H.264 / AAC video
 MPEG2-TS container
 HTTP protocol
19. Example
20. Camera: Webcam + ffmpeg Static builds without required installation available at:
 https://www.ffmpeg.org/download.html
21. Server: nginx-rtmp-module https://github.com/arut/nginx-rtmp-module
22. Client: video.js video.js player: http://www.videojs.com/
 videojs-contrib-media-sources: https://github.com/videojs/videojs-contrib-media-sources videojs-contrib-hls: https://github.com/videojs/videojs-contrib-hls
23. nginx-rtmp-module … http { # STANDARD CONFIGURATION HERE } rtmp { server { listen 1935; # Listening on port 1935 chunk_size 4096; application bedroom { live on; # Live broadcast hls on; # Enable HLS as well hls_path /tmp/hls; # Store HLS segments in /tmp/hls # Compatibility options wait_video on; # Make client wait for video packet wait_key on; # Make client wait for video keyframe allow play all; # Allow playback from all devices #deny publish all; # Standard syntax to limit sources } } }
24. Publish: rtmp://<server>:1935/bedroom/friday StreamKey, “name of the session” - you make this up.
 Some recording software has separate field for this. Play: rtmp://<server>/bedroom/friday
25. nginx-rtmp-module server { listen 80 default_server; root /var/www; index index.html index.htm; server_name localhost; # XML statistics (num. viewers, etc.) location /statistics { rtmp_stat all; } location /hls { # HLS url types { application/vnd.apple.mpegURL m3u8; video/mp2t ts; } root /tmp; # Location of HLS chunks add_header Cache-Control no-cache; } location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri $uri/ =404; } }
26. Publish: rtmp://<server>:1935/bedroom/friday StreamKey, “name of the session” - you make this up.
 Some recording software has separate field for this. Play HLS: http://<server>/hls/friday.m3u8 Play RTMP: rtmp://<server>/bedroom/friday
27. video.js + videojs-contrib-hls <!DOCTYPE html> <html> <head> <link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></script> <script src="videojs-media-sources.js"></script> <script src="videojs.hls.js"></script> </head> <body> <video id="example_video_1" class="video-js vjs-default-skin" controls
 width="1280" height="720"> <source src="rtmp://<server>/bedroom/friday/" type="rtmp/flv" /> <source src=“http://<server>/hls/friday.m3u8" type="application/x-mpegURL" /> </video> <script>videojs("example_video_1");</script> </body> </html>
28. ffmpeg ffmpeg -f avfoundation -i "0:0" -codec:v libx264 -b:v 1200k -maxrate 1200k -bufsize 1200k 
 -preset faster -vf fps=25 -pix_fmt yuv420p -profile:v main -g 25 
 -codec:a libfdk_aac -b:a 128k -f flv 
 rtmp://<server>:1935/bedroom/friday
 
 # Listing connected camera and sound card names ffmpeg -f avfoundation -list_devices true -i "" OS X ffmpeg -f dshow -i video="USB2.0_Camera":audio="Microphone (USB Audio Device)" -codec:v libx264 …
 # Listing connected camera and sound card names
 ffmpeg -f dshow -list_devices true -i dummy ffmpeg -f video4linux2 -s 1280x720 -r 25 -i /dev/video0 -f alsa -i pulse -codec:v libx264 … Windows Linux
29. DEMO TIME!
30. ?
 
 @jernejv
 http://www.virag.si