2020-07-26の開発

現役のエンジニアが毎日どんなことを学んで，どんな開発を行っているのか雑にアウトプットしてみる試みの14日目です．

WebRTC の実装

今日は，WebRTC の実装を行っていた．

前に触っていた，Elm でフロント側は実装することにした．

home

久しぶりで，いろいろ思い出しつつやっていたがやっぱり楽しい．

他のJavaScriptフレームワークとは別物で，たとえばView の設定は以下のように書く．

view : Model -> Browser.Document Msg
view model =
    { title = "WebRTC"
        , body =
        [ Html.h1 [] [ text "WebRTC Sample" ]
         , Html.video [ Html.Attributes.id "localVideo" ] []
         , Html.button [ onClick JoinMeeting ] [ text "Join" ]
         ]
    }

これで，html の title と body タグの中に h1 要素と，video 要素，button 要素を書くことができる．

今日実装できたとことしては，クライアント側のメディア (カメラ) を取得して，video タグに表示するところまで．

  <script>
   const app = Elm.Main.init();

   app.ports.readyForLocalStream.subscribe(async (videoTagId) => {
     const videoTag = document.getElementById(videoTagId);

     const audioConfig = true;
     const videoConfig = { width: 1280, height: 720 };

     let localStream = null;
     try {
       localStream = await navigator.mediaDevices.getUserMedia({ 
         audio: audioConfig,
         video: videoConfig,
       });
     } catch(err) {
       alert(err);
     }

     videoTag.srcObject = localStream;
     videoTag.onloadedmetadata = (e) => {
       videoTag.play();
     }
   });
 </script>

コードは上記のように，WebRTC 周りの実装は，port を通して，JavaScript 側で実装する予定．( port は，JavaScript と，Elm でやり取りするためのInterface )

今日は少ししか実装できなかったが，WebRTCみたいに，実際に動画とか扱うコードを書くのは結構視覚的にも楽しくてよい．

次はPeer同士をマッチングするためのシグナリングサーバーを書いていく予定．