Simple video creation with Xholon

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sun Feb 23 2014 08:45:46 GMT-0500 (EST)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Simple video creation with Xholon
Description: Simple video creation with Xholon
Url: http://www.primordion.com/Xholon/gwt/wb/editwb.html?app=8984157&src=gist
InternalName: 8984157
Keywords: 

My Notes
--------

February 13, 2014
I'm starting to create some simple videos (screencasts) from existing Xholon apps.
  http://www.primordion.com/Xholon/screencast/index.html
I've never done this before.
I'll use this Xholon Workbook to help learn what I need to know,
by taking notes, organizing the stuff I read, and maybe creating some procedures.
For now I'll restrict myself to tools that work with the two Linux distribution I use, Ubuntu and Linux Mint.
I'd like the resulting videos to play on all modern browsers (Chrome, Firefox, OPera, Safari, IE9+), in my own web pages, at Youtube, and at Vimeo.

The wikipedia screencast page has this to say:
"A screencast is a digital recording of computer screen output, also known as a video screen capture, often containing audio narration."

As much as possible, I'll use neutral/consensus terminology from wikipedia pages.

To get started, I've downloaded and used two tools
 - SimpleScreenRecorder to capture video content from a web page while a Xholon app is running
 - kdenlive to create a finished video from a collection of video clips, audio clips, and static images

YouTube supports the following file formats (14):
.MOV
.MPEG4
.AVI
.WMV
.MPEGPS
.FLV
3GPP
WebM

Here are supported video format for YouTube (15):
* WebM files (Vp8 video codec and Vorbis Audio codec)
* MPEG4, 3GPP and MOV files - (typically supporting h264 and mpeg4 video codecs and AAC audio codec)
* AVI (Many cameras output this format - typically the video codec is MJPEG and audio is PCM)
* MPEGPS (Typically supporting MPEG2 video codec and MP2 audio)
* WMV
* FLV (Adobe - FLV1 video codec, MP3 audio)

Because I want to use open-source/free containers and codecs, and because I want to be able to upload to Youtube,
then probably the WebM container is what I should target.
- Does Vimeo support WebM?
- Do my target web browsers all support this?
Perhaps better is to think about a best base format, that can be transformed into any other format I'll need.
- Perhaps Matroska?

Vimeo
It's hard to tell what the Vimeo requirements and formats are, but here's a process to follow:
  http://vimeo.com/forums/topic:107858#comment_9887154
I may need to use Handbrake:
  "HandBrake is a tool for converting video from nearly any format to a selection of modern, widely supported codecs."

HTML5
- <video> and <audio> tag

HandBrake
- "By default HandBrake saves all files in the MP4 container" (37)
- "HandBrake can also save files in the widely popular MKV container" (37)
- uses selected ffmpeg stuff
- has command-line interface (CLI), and GUI (Windows, Mac)

February 17, 2014
I could use a Petri Net (PN) to define transformation processes.
PN places would be lineups, and PN transitions would be processes that transform lineups into other lineups.

February 19, 2014
I've looked at a few tools for downloading content from YouTube and other sites.
Both of the following can be instaled using UBuntu Software Center, and Linux Mint Software Manager:
- youtube-dl  it works well
- minitube    not tested yet

February 23, 2014
All of the parameters in the Xholon lineup tags could be converted to ffmpeg or libav (avconv) options.
For example, to convert a 1280x720 mp4 video to 640x360:
  ffmpeg -i infile.mp4 -s 640x360 outfile.mp4
OR
  avconv  -i infile.mp4 -s 640x360 outfile.mp4

definitions
-----------
HD - high definition
SD - standard definition
720p - 720 pixels high, with progressive scanning
1080i - 1080 pixels high, with interlaced scanning
fps - frames per second
1280x720 - 1280 pixels wide by 720 pixels high
4:3 (or 4/3) - display aspect ration (ex: 640x480, where 480*4/3 = 640)
16:9 (or 16/9) - display aspect ration (ex: 1280x720, where 720*16/9 = 1280)

Links
-----
(1) http://en.wikipedia.org/wiki/Screencast
(2) http://en.wikipedia.org/wiki/FFmpeg
(3) http://ffmpeg.org/
(4) http://en.wikipedia.org/wiki/Digital_container_format
(5) http://en.wikipedia.org/wiki/Comparison_of_container_formats
(6) http://www.snowfoxsoft.com/mkv-converter/upload-mkv-to-youtube.html
(7) http://en.wikipedia.org/wiki/WebM
(8) http://www.webmproject.org/
(9) http://en.wikipedia.org/wiki/MPEG-4_Part_14
(10) http://en.wikipedia.org/wiki/Multimedia_Container_Format
(11) http://mcf.sourceforge.net/
(12) http://en.wikipedia.org/wiki/Ogg
(13) http://xiph.org/
(14) https://support.google.com/youtube/troubleshooter/2888402?hl=en
(15) http://www.snowfoxsoft.com/mkv-converter/upload-mkv-to-youtube.html
(16) https://support.google.com/youtube/?hl=en#topic=4355169  "Youtube getting started"
(17) https://support.google.com/youtube/topic/16547?hl=en
  "Youtube upload videos"
(18) https://support.google.com/youtube/answer/1722171?hl=en
  "Advanced encoding settings; Recommended bitrates, codecs, and resolutions, and more"
(19) http://www.maartenbaert.be/simplescreenrecorder/
(20) http://www.kdenlive.org/
(21) http://vimeo.com/help/faq/uploading-to-vimeo/uploading-basics
(22) http://handbrake.fr/
(23) http://www.linux.com/learn/tutorials/745745-how-to-make-a-youtube-instructional-screencast-video-on-linux
(24) http://matroska.org/
(25) http://en.wikipedia.org/wiki/Matroska
(26) http://www.bunkus.org/videotools/mkvtoolnix/
  "tools to create, alter and inspect Matroska files under Linux, other Unices and Windows"
  mkvmerge
(27) http://en.wikipedia.org/wiki/Video_codec
(28) http://en.wikipedia.org/wiki/Comparison_of_video_codecs
(29) http://en.wikipedia.org/wiki/Codec
(30) http://vimeo.com/help/compression
(31) http://en.wikipedia.org/wiki/Theora
(32) http://en.wikipedia.org/wiki/VP8
(33) http://en.wikipedia.org/wiki/Vorbis
(34) http://en.wikipedia.org/wiki/Advanced_Audio_Coding
(35) http://vimeo.com/videoschool/lessons
(36) http://www.w3schools.com/html/html5_video.asp
(37) https://trac.handbrake.fr/wiki/Containers
(38) https://trac.handbrake.fr/wiki/HandBrakeGuide
(39) http://en.wikipedia.org/wiki/HTML5_video
(40) http://www.html5rocks.com/en/tutorials/video/basics/
(41) http://diveintohtml5.info/video.html
(42) http://en.wikipedia.org/wiki/Libav
  fork of ffmpeg
(43) http://linuxers.org/tutorial/ffmpeg-tutorial-beginners
]]></Notes>

<_-.XholonClass>

  <!-- Digital container format
  a metafile format whose specification describes how different data elements and metadata coexist in a computer file
  -->
  <DigitalContainerFormat>
    
    <!-- these are non-proprietary, non-patent-encumbered container formats -->
    <Matroska/> <!-- .mkv  video/x-matroska audio/x-matroska -->
    <Mcf/> <!-- Multimedia Container Format  .mcf, .av.mcf, .audio.mcf, .video.mcf -->
    <Ogg/> <!-- .ogg  video/ogg,audio/ogg -->
    <!-- WebM
    "WebM is an open, royalty-free, media file format designed for the web.
    WebM defines the file container structure, video and audio formats.
    WebM files consist of video streams compressed with the VP8 video codec
    and audio streams compressed with the Vorbis audio codec.
    The WebM file structure is based on the Matroska container."
    -->
    <WebM/> <!-- .webm  video/webm,audio/webm -->
    
    <!-- other popular container formats -->
    <Mp4/> <!-- MPEG-4 Part 14  .mp4  video/mp4 -->
    
  </DigitalContainerFormat>
  
  <Codec superClass="Attribute_String">
    <!-- Video codec
    "A video codec is software or a device that provides encoding and decoding for digital video,
    and which may or may not include the use of video compression and/or decompression." (28)
    "A video codec is a device or software that enables compression or decompression of digital video.
    The compression is usually lossy." (27)
    -->
    <VideoCodec>
      <H.264/> <!-- x264; MPEG-4 Part 10 or AVC (Advanced Video Coding); Vimeo recommends H.264 -->
      <Mpeg-4_Part_2/> <!-- MPEG-4 Part 2 -->
      <Theora/> <!-- VP3; libtheora is a reference implementation of the Theora video compression format. (31) -->
      <Vp8/> <!-- libvpx (VP8 codec library) (32) -->
    </VideoCodec>
    <AudioCodec>
      <Aac/> <!-- Advanced Audio Coding; Vimeo recommends AAC-LC (30) -->
      <Mp3/>
      <Vorbis/>
    </AudioCodec>
  </Codec>
  
  <EndUse>
    <WebBrowserHtml5>
      <Chrome/>
      <Firefox/>
      <InternetExplorer/> <!-- IE9+ -->
      <Opera/>
      <Safari/>
    </WebBrowserHtml5>
    <OnlineService>
      <Vimeo/>
      <YouTube/>
    </OnlineService>
    <DesktopMediaPlayer> <!-- Linux -->
      <Vlc/>
    </DesktopMediaPlayer>
  </EndUse>
  <NonEndUse> <!-- internal formats while capturing and editing video/audio/images -->
    <Kdenline/>
    <SimpleScreenRecorder/>
  </NonEndUse>
  
  <!-- HTML5 media (video, audio) players -->
  <JavaScriptMediaPlayer>
    <MediaElement.js/>
    <Videojs/>
  </JavaScriptMediaPlayer>
  
  <Converter superClass="TransitionPN"> <!-- Petri Net transition -->
    <!-- command-line converters -->
    <FFmpeg/>
    <HandBrake/> <!-- saves files to Mp4 or Matroska container -->
    <Libav/>
    <!-- GUI-based converters/editors -->
    <Kdenlive/>
  </Converter>
  
  <Lineup/> <!-- profile, some specific set of parameters -->
  <Lineups/>
  
  <!-- any small or large fragment of a complete media project,
  converters convert media clips into other media clips
  -->
  <MediaClip superClass="PlacePN"> <!-- Petri Net place -->
    <VideoClip/>
    <AudioClip/>
    <Image/> <!-- PNG, JPEG, etc. -->
  </MediaClip>
  
  <MediaProject/>
  <MediaSystem/> <!-- top-level node in the CSH -->
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<MediaSystem>
  
  <!-- ??? -->
  <MediaProject roleName="Lotr">
    <Converter>
      <InputArcs>
        <InputArc weight="1" connector="ancestor::MediaProject/VideoClip[1]"/>
      </InputArcs>
      <OutputArcs>
        <OutputArc weight="1" connector="ancestor::MediaProject/VideoClip[2]"/>
      </OutputArcs>
    </Converter>
    
    <VideoClip lineup="simpleScreenRecorder1"/>
    
    <VideoClip lineup="youTube2"/>
    
  </MediaProject>
  
  <Lineups>
    <!--
    all of these lineups have one container (ex: WebM),
    which in turn has one video format (ex: Vp8), and one audio format (ex: Vorbis)
    
    H.264 parameters: possible values (units)
    ================  ===============  =====
    definition: SD,          HD
    bitRate:    2000 - 5000, 5000 - 10000 (kilobits per second (kbps)) data rate
    width:      640, 640,    1280 (pixels)
    height:     480, 360,    720 (pixels)
    scan: p, i
    frameRate: 23.976, 24, 25, 29.97, 30 (frames per second (fps))
    -->
    
    <YouTube roleName="youTube1"> <!-- WebM files (Vp8 video codec and Vorbis Audio codec) -->
      <WebM>
        <Vp8/>
        <Vorbis/>
      </WebM>
    </YouTube>
    
    <YouTube roleName="youTube2"> <!-- MPEG4 (typically supporting h264 and mpeg4 video codecs and AAC audio codec) -->
      <Mp4>
        <H.264>
          {
          "definition": "HD",
          "width": 1280,
          "height": 720,
          "scan": "p",
          "frameRate": 30,
          "bitRate": 12000
          }
        </H.264>
        <Aac/>
      </Mp4>
    </YouTube>
    
    <Vimeo roleName="vimeo1"> <!-- source (30) -->
      <Mp4> <!-- ? -->
        <H.264>
          {
          "definition": "HD",
          "width": 1280,
          "height": 720,
          "scan": "p",
          "frameRate": 30,
          "bitRate": 10000
          }
        </H.264>
        <Aac/>
      </Mp4>
    </Vimeo>
    
    <!--
    source (36)
    MP4 = MPEG 4 files with H264 video codec and AAC audio codec
    WebM = WebM files with VP8 video codec and Vorbis audio codec
    Ogg = Ogg files with Theora video codec and Vorbis audio codec
    -->
    <Chrome roleName="chrome1"> <WebM>
      <Vp8/>
      <Vorbis/>
    </WebM> </Chrome>
    
    <Chrome roleName="chrome2"> <Mp4>
      <H.264/>
      <Aac/>
    </Mp4> </Chrome>

    <Chrome roleName="chrome3"> <Ogg>
      <Theora/>
      <Vorbis/>
    </Ogg> </Chrome>
    
    <Firefox roleName="firefox1"> <WebM>
      <Vp8/>
      <Vorbis/>
    </WebM> </Firefox>
    
    <Firefox roleName="firefox2"> <Mp4>
      <H.264/>
      <Aac/>
    </Mp4> </Firefox>

    <Firefox roleName="firefox3"> <Ogg>
      <Theora/>
      <Vorbis/>
    </Ogg> </Firefox>
    
    <Safari roleName="safari1"> <Mp4>
      <H.264/>
      <Aac/>
    </Mp4> </Safari>
    
    <Opera roleName="opera1"> <WebM>
      <Vp8/>
      <Vorbis/>
    </WebM> </Opera>
    
    <Opera roleName="opera2"> <Ogg>
      <Theora/>
      <Vorbis/>
    </Ogg> </Opera>
    
    <SimpleScreenRecorder roleName="simpleScreenRecorder1"> <Matroska> <!-- ??? -->
      <!-- Matroska can include any video format and any audio format
      this lineup is the same as for WebM which is based on Matroska
      -->
      <Vp8/>
      <Vorbis/>
    </Matroska> </SimpleScreenRecorder>
    <!-- SimpleScreenRecorder offers other lineups -->

  </Lineups>
</MediaSystem>

<H.264behavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var myH264;
var beh = {
  postConfigure: function() {
    myH264 = this.cnode.parent();
    var txt = myH264.text();
    console.log(txt);
    if (txt) {
      var params = JSON.parse(txt);
      myH264.println(params.definition);
      myH264.println(params.width);
      myH264.println(params.height);
      myH264.println(params.scan);
      myH264.println(params.frameRate);
      myH264.println(params.bitRate);
    }
  },
  act: function() {
    var txt = myH264.text();
    if (txt) {
      var params = JSON.parse(txt);
      var tool = "ffmpeg"; // or use "avconv"
      var ffmpegTxt = "ffmpeg -i infile.mp4"
        // convert the width and height to half the values of the original video
        + " -s " + params.width/2 + "x" + params.height/2
        // retain the same bit rate as the original video
        + " -b " + params.bitRate
        + " outfile.mp4";
      myH264.println(ffmpegTxt);
    }
  }
}
]]></H.264behavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>MediaProject</title>
    <rect id="MediaSystem/MediaProject" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Converter</title>
      <rect id="MediaSystem/MediaProject/Converter" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>