Reagent

Form-1

Form-2

Form-3

React refs

Because the ref's life cycle is separate from the component's, clojure.core/atom is used instead of Reagent's atoms.

  (defn Video []
    (let [video (atom nil)]
      (fn [{:keys [src]}]
        [:div
         [:video {:width 1280 :height 720
                  :auto-play true
                  :src src
                  :ref #(reset! video %)}]
         [:button {:on-click
                   (fn []
                     (-> (js/navigator.mediaDevices.getDisplayMedia
                          #js {:audio true
                               :video {:width 1280
                                       :height 720
                                       :frameRate 30}})
                         (.then (fn [stream]
                                  (set! (.-srcObject @video) stream)
                                  (set! (.-onloadedmetadata @video)
                                        (fn [_]
                                          (.play @video)))))
                         (.catch #(js/console.log %))))}
          "start"]])))