Janus 的搭建與 WebRTC 使用

介紹

Janus 是由 Meetecho 開發的 WebRTC 服務器。因此，除了實現與瀏覽器建立 WebRTC 媒體通信、與其交換 JSON 消息以及在瀏覽器和服務器端應用程序邏輯之間中繼 RTP/RTCP 和消息的方法之外，它本身不提供任何功能。任何特定的功能和應用程序都由服務器端插件提供，瀏覽器可以通過 Janus 聯系以利用它們提供的功能。此類插件的示例可以是應用程序的實現，例如回聲測試、會議橋、媒體記錄器、SIP 網關等。

部署

我使用了一個 docker hub 鏡像 來部署 janus 的后台，部署方法可參考 https://janus.conf.meetecho.com/docs/deploy，再搭配一個 nginx 來做后台 API 的轉發，docker-compose 配置如下：

version: '2.1'
services:
  janus-gateway:
    image: 'canyan/janus-gateway'
    container_name: janus_gateway
    command: ["/usr/local/bin/janus", "-F", "/usr/local/etc/janus"]
    volumes:
      - "./etc/janus/janus.jcfg:/usr/local/etc/janus/janus.jcfg"
    #   - "./etc/janus/janus.eventhandler.sampleevh.jcfg:/usr/local/etc/janus/janus.eventhandler.sampleevh.jcfg"
    restart: always
    network_mode: 'host'
  janus_nginx:
    image: nginx:alpine
    container_name: janus_nginx
    restart: always
    network_mode: 'host'
    volumes:
        - ./conf.d/:/etc/nginx/conf.d
        - ./html:/dist

有一點需要注意，如果 janus 安裝在 nat 轉換后的內網需要 trun 來幫助客戶端和服務端打洞，部署復雜，而且失敗率很高，因此將 janus 的服務部署為與主機共享網絡的 host 模式，當然前提是你要有一台有公網 ip 的服務器。

雖然部署在公網，但是還是需要一個 stun 服務，在 janus.jcfg 配置中需要取消 stun 的注釋：

stun_server = "stun.voip.eutelia.it"
stun_port = 3478

nginx 配置如下，里面我使用了對應域名的 https 證書：

server {
        listen       80;
        server_name  web_dist;

        location / {
            root   /dist;
            index  index.html index.htm;
        }
}

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  localhost;
        rewrite ^(.*)$  https://$host$1 permanent;
        root   /dist;
}

# api server
upstream api_server{
  server 127.0.0.1:8088;
}

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}
upstream websocket {
        server 127.0.0.1:8188;
}

server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    server_name  localhost;
    root         /dist;

    underscores_in_headers on;

    ssl_certificate "/etc/nginx/conf.d/ctxy.frhello.comert.pem";
    ssl_certificate_key "/etc/nginx/conf.d/txy.frhello.com.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    # error_page 497 301 =307

    location / {
    }

    # 后台接口
    location /janus/ {
        proxy_pass http://api_server/janus/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Server $host;
    }

    # ws
    location /ws {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

nginx 中的 web 前端使用的是官網 github 項目中的演示 html 文件夾，整理好整個工程的目錄：

JavaScript API

在源代碼下有一個 html 文件夾下有演示 demo，在每個頁面對應的 js 文件下可以配置服務地址的 websocket 地址：server = "wss://" + window.location.hostname + "/ws";，然后在 nginx 中修改配置做為這個 web 服務的代理。

最后打開 Video Room 的效果：

原文地址：https://frhello.com/janus-搭建與-webrtc-使用/