capture screenshot from video etc.

bleh.coffee

$capture = $ ".capture"

$capture.change (event) ->
  file = @files[0]
  event.preventDefault()

  # Capture first frame of video
  video = document.createElement("video")
  video.src = URL.createObjectURL(file)
  video.style.visibility = "hidden"
  document.body.appendChild(video)
  
  video.oncanplay = ->
    dimensions = video.getBoundingClientRect()
    canvas = document.createElement "canvas"
    canvas.width = dimensions.width
    canvas.height = dimensions.height
    canvas
      .getContext "2d"
      .drawImage video, 0, 0, dimensions.width, dimensions.height
    dataUrl = canvas.toDataURL()
    binary = atob dataUrl.split(',')[1]
    array = []
    for i in [0...binary.length]
      array.push binary.charCodeAt i
    blob = new Blob [new Uint8Array array], type: "image/jpeg"
    
    $form = $ "#upload_form"
    posterUrl = null
    videoUrl = null

    # Upload video
    $.getJSON "/upload/new?name=#{file.name}", (data) ->
      fd = new FormData()

      fd.append "key", data.key
      fd.append "acl", "public-read"
      fd.append "AWSAccessKeyId", $form.find("#AWSAccessKeyId").val()
      fd.append "policy", data.policy
      fd.append "signature", data.signature
      fd.append "success_action_status", 201
      fd.append "file", file

      $.ajax
        xhr: ->
          xhr = new window.XMLHttpRequest()
          xhr.upload.addEventListener "progress", (event) ->
            if event.lengthComputable
              complete = event.loaded * 100 / event.total
          xhr
        type: "POST"
        url: $form.attr("action")
        processData: false
        contentType: false
        datatype: "xml"
        data: fd
        success: (data) ->
          videoUrl = $(data).find("Location").text()
        error: ->
          alert "Recording failed"

    # Upload poster
    # name = file.name.replace /\.[^.]+$/, ".jpg"
    # $.getJSON "/upload/new?name=#{name}", (data) ->
    #   fd = new FormData()
    #
    #   fd.append "key", data.key
    #   fd.append "acl", "public-read"
    #   fd.append "AWSAccessKeyId", $form.find("#AWSAccessKeyId").val()
    #   fd.append "policy", data.policy
    #   fd.append "signature", data.signature
    #   fd.append "success_action_status", 201
    #   fd.append "file", blob
    #
    #   $.ajax
    #     xhr: ->
    #       xhr = new window.XMLHttpRequest()
    #       xhr.upload.addEventListener "progress", (event) ->
    #         if event.lengthComputable
    #           complete = event.loaded * 100 / event.total
    #       xhr
    #     type: "POST"
    #     url: $form.attr("action")
    #     processData: false
    #     contentType: false
    #     datatype: "xml"
    #     data: fd
    #     success: (data) ->
    #       posterUrl = $(data).find("Location").text()
    #     error: ->
    #       alert("Recording poster failed")

    do processUrls = ->
      if videoUrl #and posterUrl

        $("#shot_video").val(videoUrl)
        #$("#shot_poster").val(posterUrl)
        #$("#shot_height").val(dimensions.height)
        #$("#shot_width").val(dimensions.width)
        $("#new_shot").submit()

        reel.load ->
          reel.skipToLast()

        alert "Shot Saved"
        record.enable()
        play.enable()

      else
        setTimeout processUrls, 500

  record.click ->
    $capture.click()