ChatGPT's version of aiortc's webcam example client.js

chatgpt-aiortc-webcam-client-2.cljs

;; I asked chatGPT to convert this JS code to ClojureScript
;; https://raw.githubusercontent.com/aiortc/aiortc/main/examples/webcam/client.js

(def pc (atom nil))

(defn check-state [resolve]
  (fn []
    (if (= (.-iceGatheringState @pc) "complete")
      (resolve)
      (do
        (defn check-state-fn []
          (if (= (.-iceGatheringState @pc) "complete")
            (do
              (.removeEventListener @pc "icegatheringstatechange" check-state-fn)
              (resolve))
            ()))
        (.addEventListener @pc "icegatheringstatechange" check-state-fn)))))

(defn negotiate []
  (.addTransceiver @pc "video" #js {:direction "recvonly"})
  (.addTransceiver @pc "audio" #js {:direction "recvonly"})
  (-> (.createOffer @pc)
      (.then (fn [offer]
               (.setLocalDescription @pc offer)))
      (.then #(js/Promise. (check-state %)))
      (.then #(fetch "/offer"
                 #js {:body (js/JSON.stringify
                             #js {:sdp (.-sdp (.localDescription @pc))
                                  :type (.-type (.localDescription @pc))})
                      :headers #js {"Content-Type" "application/json"}
                      :method "POST"}))
      (.then #(-> % .json))
      (.then #(-> @pc (.setRemoteDescription %)))
      (.catch #(js/alert %))))

(defn start []
  (let [config #js {:sdpSemantics "unified-plan"}]
    (when (.-checked (js/document.getElementById "use-stun"))
      (set! (.-iceServers config) #js [{:urls ["stun:stun.l.google.com:19302"]}])))
  (reset! pc (js/RTCPeerConnection. config))
  (.addEventListener @pc "track" (fn [evt]
                                   (if (= "video" (.-kind (.-track evt)))
                                     (set! (.-srcObject (js/document.getElementById "video")) (.-streams evt))
                                     (set! (.-srcObject (js/document.getElementById "audio")) (.-streams evt)))))

  (set! (.-style (js/document.getElementById "start")) "display" "none")
  (negotiate)
  (set! (.-style (js/document.getElementById "stop")) "display" "inline-block"))

(defn stop []
  (set! (.-style (js/document.getElementById "stop")) "display" "none")
  (setTimeout #(.-close @pc) 500))

;; note from ChatGPT
;; The ClojureScript code is very similar to the original JavaScript code, with some syntax changes to make it work in ClojureScript. For example, Promise is accessed via js/Promise, and JavaScript objects are converted to ClojureScript maps using the #js reader macro. The code uses atom to create a mutable reference to the pc object, which is equivalent to a JavaScript variable.

chatgpt-aiortc-webcam-client.cljs

;; I asked chatGPT to convert this JS code to ClojureScript
;; https://raw.githubusercontent.com/aiortc/aiortc/main/examples/webcam/client.js

(def pc (atom nil))

(defn negotiate []
  (.addTransceiver @pc "video" #js {:direction "recvonly"})
  (.addTransceiver @pc "audio" #js {:direction "recvonly"})
  (-> (.createOffer @pc)
      (.then #(-> @pc
                  (.setLocalDescription %)))
      (.then #(let [promise (js/Promise. (fn [resolve _]
                                          (if (= "complete" (.iceGatheringState @pc))
                                            (resolve)
                                            (letfn [(check-state []
                                                      (if (= "complete" (.iceGatheringState @pc))
                                                        (do
                                                          (.removeEventListener @pc "icegatheringstatechange" check-state)
                                                          (resolve))
                                                        (recur)))]
                                              (.addEventListener @pc "icegatheringstatechange" check-state))))] promise))
      (.then #(let [offer (.localDescription @pc)]
                 (.fetch "/offer"
                         #js {:body (js/JSON.stringify #js {:sdp (.sdp offer)
                                                           :type (.type offer)})
                              :headers #js {"Content-Type" "application/json"}
                              :method "POST"})))
      (.then #(.json %))
      (.then #(-> @pc
                  (.setRemoteDescription %)))
      (.catch #(js/alert %))))

(defn start []
  (let [config #js {:sdpSemantics "unified-plan"}]
    (if (.checked (js/document.getElementById "use-stun"))
      (set! (.-iceServers config) [{:urls ["stun:stun.l.google.com:19302"]}]))
    (reset! pc (js/RTCPeerConnection. config))
    (.. @pc -addEventListener "track" (fn [evt]
                                        (if (= "video" (.-kind (.-track evt)))
                                          (set! (.-srcObject (js/document.getElementById "video")) (.-streams evt))
                                          (set! (.-srcObject (js/document.getElementById "audio")) (.-streams evt)))))
    (set! (.-style (js/document.getElementById "start")) "display" "none")
    (negotiate)
    (set! (.-style (js/document.getElementById "stop")) "display" "inline-block")))

(defn stop []
  (set! (.-style (js/document.getElementById "stop")) "display" "none")
  (js/setTimeout #(.-close @pc) 500))


;; note from ChatGPT
;; Note that js/Promise and #js are used to create JavaScript Promise objects and objects with JavaScript-style keys, respectively. Additionally, JavaScript function callbacks are replaced with anonymous functions defined with the fn macro. Finally, . is used instead of [] for JavaScript object property access.