WebRTC samplesのapprtc解説

ソースコード https://github.com/webrtc/apprtc/

README.md 概要

Developement

The development AppRTC server http://locahost:8080
動作環境: Node.js, Python PIP, Grunt website
Node.jsとGruntがあれば、npm install と pip install -r requirements.txt
最初、更新時の再コンパイルはgrunt build
Google App Engine SDK dev server: dev_appserver.py ./out/app_engine

やってみる (Ubuntu 20.04LTS)

git clone https://github.com/webrtc/apprtc.git -- OK
apprtcで、npm install -- OK

grunt -- ないので

(aptで入れたnode.jsじゃない場合、apt install はだめ)
sudo npm install -g grunt-cli
sudo npm install -g grunt
npm install coffeescript // 足りなかった

grunt build -- OK

Google App Engine SDK dev server って何? (Google Cloudで使う場合の話)

https://cloud.google.com/sdk/docs/install-sdk
curl -O https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-374.0.0-linux-x86_64.tar.gz
展開
~/ に google-cloud/ をmv
install.sh
// gcloud init (実際にgcloudを使いに行くのでやめ
dev_appserver.pyはインストールされた

dev_appserver.py out/app_engine -- 動いた

未完成な感じだ。コードを読んだところ色々な操作があるが、実際には表示されない。

Test


 grunt runPythonTests
 // Warning多数

Deployment

Dockerfile
Manual
1. Clone repo
2. Collider instructions
3. Install and start Coturn TURN server
4. Open src/app_engine/constants.py
その他色々大変そう

Docker

使うのが久しぶりで使い方を忘れた。

docker build .  (Dockerfileに書いてあるとおり)
docker images (一覧で確認。名前はついていないので番号で)

REPOSITORY    TAG                 IMAGE ID       CREATED          SIZE
                      1d9e8206b40f   20 minutes ago   1.96GB
golang        1.17.5-alpine3.15   d8bf44a3f6b4   3 months ago     315MB
hello-world   latest              d1165f221234   12 months ago    13.3kB

docker tag 1d9e8206b40f apprtc:20220311 で REP:TAGを指定

docker run -d -p 8080:8080 apprtc:20220311 // background 実行
docker ps
CONTAINER ID   IMAGE             COMMAND                  CREATED          STATUS          PORTS                                       NAMES
6604139eedb9   apprtc:20220311   "/bin/sh -c /go/star…"   26 minutes ago   Up 26 minutes   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   sleepy_dirac

docker exec -it 6604139eedb9 ls

docker exec -it 6604139eedb9 netstat -an

Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       
tcp        0      0 127.0.0.1:8000          0.0.0.0:*               LISTEN      
tcp        0      0 127.0.0.1:41603         0.0.0.0:*               LISTEN      
tcp        0      0 127.0.0.1:22509         0.0.0.0:*               LISTEN      
tcp        0      0 0.0.0.0:8080            0.0.0.0:*               LISTEN      
tcp        0      0 0.0.0.0:443             0.0.0.0:*               LISTEN      
tcp        0      0 :::8089                 :::*                    LISTEN      
Active UNIX domain sockets (servers and established)
Proto RefCnt Flags       Type       State         I-Node Path
unix  2      [ ]         DGRAM                    321657 

docker stop 6604139eedb9

docker run -d -p 8080:8080 -p 443:443 apprtc:20220311 // background 実行

Firefox client
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://appr.tc/v1alpha/iceconfig?key=. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.
Firefox can’t establish a connection to the server at wss://apprtc-ws.webrtc.org/ws.
--- 修正が必要

docker -s -a
docker ps -a
CONTAINER ID   IMAGE             COMMAND                  CREATED          STATUS                        PORTS                                                                              NAMES
3b5158b9de9f   apprtc:20220311   "/bin/sh -c /go/star…"   10 minutes ago   Up 10 minutes                 0.0.0.0:443->443/tcp, :::443->443/tcp, 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   zen_engelbart
6604139eedb9   apprtc:20220311   "/bin/sh -c /go/star…"   42 minutes ago   Exited (137) 11 minutes ago                                                                                      sleepy_dirac
76077ced198d   apprtc:20220311   "-d"                     43 minutes ago   Created                       0.0.0.0:8080->8080/tcp, :::8080->8080/tcp                                          musing_edison
docker rm musing_edison

修正: githubで検索 Collider: https://github.com/webrtc/apprtc/blob/master/src/collider/collidermain/main.go#L16 var roomSrv = flag.String("room-server", "https://your.apprtc.server", "The origin of the room server")


1) 
apprtc-ws は、src/app_engine/constants.py
appr.tc/v1alpha/iceconfigは3箇所
src/web_app/tml/params.html
src/app_engine/constants.py
src/collider/collidermain/main.go

== Docker imageを編集 
https://blog.yfsakai.com/posts/2021-08-16-change-code-in-docker-image-directly/
または、DockerFileを編集

2) CORS header ‘Access-Control-Allow-Origin’ missing 
これは多分1)でよそにいったからだめなだけ

Access-Control-Allow-Origin: * をHTTPヘッダに
src/collider/collider/collider.go にははいっているが

Server code (Python)

src/app_engine/apprtc.py エントリポイント?

app = webapp2.WSGIApplication([
    ('/', MainPage),
    ('/a/', analytics_page.AnalyticsPage),
    ('/compute/(\w+)/(\S+)/(\S+)', compute_page.ComputePage),
    ('/join/([a-zA-Z0-9-_]+)', JoinPage),
    ('/leave/([a-zA-Z0-9-_]+)/([a-zA-Z0-9-_]+)', LeavePage),
    ('/message/([a-zA-Z0-9-_]+)/([a-zA-Z0-9-_]+)', MessagePage),
    ('/params', ParamsPage),
    ('/v1alpha/iceconfig', IceConfigurationPage),
    ('/r/([a-zA-Z0-9-_]+)', RoomPage),
], debug=True)

class MainPage(webapp2.RequestHander) // webapp2.RequestHandlerの子クラス
   self.write_response('index_template.html', params)

class JoinPage(webapp2.RequestHandler):
   def post(self, room_id):

Client code

こちらのほうがわかりやすいか?

// < >は省略
web_app/html/index_template.html
div id="videos"
    video id="mini-video" autoplay playsinline muted
    video id="remote-video" autoplay playsinline
    video id="local-video" autoplay playsinline muted
/div

id="room-id-input-div"
        input type="text" id="room-id-input" autofocus
      div id="room-id-input-buttons"
        button id="join-button" JOIN
        button id="random-button" RANDOM
      /div>

div id="confirm-join-div" class="hidden"
   1) button id="confirm-join-button" JOIN
/div

 button id="rejoin-button" REJOIN
 button id="new-room-button" NEW ROOM