基於surging 如何利用peerjs進行語音視頻通話

本文主要介紹攝像頭（相機）如何採集數據，用於類似攝像頭本地顯示軟體，以及流媒體數據傳輸場景如傳屏、視訊會議等。攝像頭採集有多種方案，如AForge.NET、WPFMediaKit、OpenCvSharp、EmguCv、DirectShow.NET、MediaCaptre（UWP），網上一些文章以及 ...

一、概述

PeerJS 是一個基於瀏覽器WebRTC功能實現的js功能包,簡化了WebrRTC的開發過程，對底層的細節做了封裝，直接調用API即可,再配合surging 協議組件化從而做到穩定，高效可擴展的微服務，再利用RtmpToWebrtc 引擎組件可以做到不僅可以利用httpflv 觀看rtmp推流直播，還可以採用基於 Webrtc的peerjs 進行觀看，那麼今天要講的是如何結合開發語音視頻通話功能。放到手機和電腦上都可以實現語音視頻通話。

一鍵運行打包成品下載：https://pan.baidu.com/s/1MVsjKtVYpUonauAz9ZXtPg?pwd=1q2g

測試用戶：fanly

測試密碼：123456

為了讓大家節約時間，能儘快運行產品看到效果，上面有一鍵運行打包成品可以進行下載測試運行。

二、如何測試運行

以下是目錄結構,

IDE:consul 註冊中心

kayak.client: 網關

kayak.server:微服務

apache-skywalking-apm：skywalking鏈路跟蹤

以上是目錄結構，不需要進入管理界面配置網路組件，啟動後自帶埠96的ws協議主機，只要打開video文件夾，裡面有兩個語音通話的html測試文件，在同一一個區域網只要輸入對方的name就可以進行語音通話

打開界面如圖

三、基於surging如何開發

以上是沒有開發環境的進行下載進行下載測試，那麼正在使用surging 的如何開發此功能呢？

1. 創建服務介面，繼承於IServiceKey

 [ServiceBundle("Device/{Service}")]
 public  interface IChatService : IServiceKey
 {
 }

2. 創建中間服務，繼承於WSBehavior, IChatService

  internal class ChatService : WSBehavior, IChatService
  {
      private static readonly ConcurrentDictionary<string, string> _users = new ConcurrentDictionary<string, string>();
      private static readonly ConcurrentDictionary<string, string> _clients = new ConcurrentDictionary<string, string>();

      protected override void OnOpen()
      {
         var _name = Context.QueryString["name"]; 
          if (!string.IsNullOrEmpty(_name))
          {
              _clients[ID] = _name;
              _users[_name] = ID;
          }
      }

      protected override void OnError( WebSocketCore.ErrorEventArgs e)
      {
        var msg = e.Message;
      }

      protected override void OnMessage(MessageEventArgs e)
      {
          if (_clients.ContainsKey(ID))
          {

              var message = JsonConvert.DeserializeObject<Dictionary<string, object>>(e.Data);
              //消息類型
             message.TryGetValue("type",out object @type);
              message.TryGetValue("toUser", out object toUser);
              message.TryGetValue("fromUser", out object fromUser);
              message.TryGetValue("msg", out object msg);
              message.TryGetValue("sdp", out object sdp);
              message.TryGetValue("iceCandidate", out object iceCandidate);
              

              Dictionary<String, Object> result = new Dictionary<String, Object>();
              result.Add("type", @type);

              //呼叫的用戶不線上
              if (!_users.ContainsKey(toUser?.ToString()))
              {
                  result["type"]= "call_back";
                  result.Add("fromUser", "系統消息");
                  result.Add("msg", "Sorry，呼叫的用戶不線上！");

                  this.Client().SendTo(JsonConvert.SerializeObject(result), ID);
                  return;
              }

              //對方掛斷
              if ("hangup".Equals(@type))
              {
                  result.Add("fromUser", fromUser);
                  result.Add("msg", "對方掛斷！");
              }

              //視頻通話請求
              if ("call_start".Equals(@type))
              {
                  result.Add("fromUser", fromUser);
                  result.Add("msg", "1");
              }

              //視頻通話請求回應
              if ("call_back".Equals(type))
              {
                  result.Add("fromUser", toUser);
                  result.Add("msg", msg);
              }

              //offer
              if ("offer".Equals(type))
              {
                  result.Add("fromUser", toUser); 
                  result.Add("sdp", sdp);
              }

              //answer
              if ("answer".Equals(type))
              {
                  result.Add("fromUser", toUser);
                  result.Add("sdp", sdp);
              }

              //ice
              if ("_ice".Equals(type))
              {
                  result.Add("fromUser", toUser);
                  result.Add("iceCandidate", iceCandidate);
              }

              this.Client().SendTo(JsonConvert.SerializeObject(result), _users.GetValueOrDefault(toUser?.ToString()));
          }
      }

      protected override void OnClose(CloseEventArgs e)
      {
         if( _clients.TryRemove(ID, out string name))
          _users.TryRemove (name, out string value);
      }

  }

3.設置surgingSettings的WSPort埠配置，預設96

以上就是利用websocket協議中轉消息，下麵是頁面如何編號，代碼如下：

<!DOCTYPE>
<!--解決idea thymeleaf 表達式模板報紅波浪線-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WebRTC + WebSocket</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        #main{
            position: absolute;
            width: 370px;
            height: 550px;
        }
        #localVideo{
            position: absolute;
            background: #757474;
            top: 10px;
            right: 10px;
            width: 100px;
            height: 150px;
            z-index: 2;
        }
        #remoteVideo{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #222;
        }
        #buttons{
            z-index: 3;
            bottom: 20px;
            left: 90px;
            position: absolute;
        }
        #toUser{
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 5px;
            padding-left: 5px;
            margin-bottom: 5px;
        }
        #toUser:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
        #call{
            width: 70px;
            height: 35px;
            background-color: #00BB00;
            border: none;
            margin-right: 25px;
            color: white;
            border-radius: 5px;
        }
        #hangup{
            width:70px;
            height:35px;
            background-color:#FF5151;
            border:none;
            color:white;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="main">
        <video id="remoteVideo" playsinline autoplay></video>
        <video id="localVideo" playsinline autoplay muted></video>

        <div id="buttons">
            <input id="toUser" placeholder="輸入線上好友賬號"/><br/>
            <button id="call">視頻通話</button>
            <button id="hangup">掛斷</button>
        </div>
    </div>
</body>
<!-- 可引可不引 -->
<!--<script th:src="@{/js/adapter-2021.js}"></script>-->
<script type="text/javascript" th:inline="javascript">
    let username = "fanly";
    let localVideo = document.getElementById('localVideo');
    let remoteVideo = document.getElementById('remoteVideo');
    let websocket = null;
    let peer = null;

    WebSocketInit();
    ButtonFunInit();

    /* WebSocket */
    function WebSocketInit(){
        //判斷當前瀏覽器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://127.0.0.1:961/device/chat?name="+username);
        } else {
            alert("當前瀏覽器不支持WebSocket！");
        }

        //連接發生錯誤的回調方法
        websocket.onerror = function (e) {
            alert("WebSocket連接發生錯誤！");
        };

        //連接關閉的回調方法
        websocket.onclose = function () {
            console.error("WebSocket連接關閉");
        };

        //連接成功建立的回調方法
        websocket.onopen = function () {
            console.log("WebSocket連接成功");
        };

        //接收到消息的回調方法
        websocket.onmessage = async function (event) {
            let { type, fromUser, msg, sdp, iceCandidate } = JSON.parse(event.data.replace(/\n/g,"\\n").replace(/\r/g,"\\r"));

            console.log(type);

            if (type === 'hangup') {
                console.log(msg);
                document.getElementById('hangup').click();
                return;
            }

            if (type === 'call_start') {
                let msg = "0"
                if(confirm(fromUser + "發起視頻通話，確定接聽嗎")==true){
                    document.getElementById('toUser').value = fromUser;
                    WebRTCInit();
                    msg = "1"
                }

                websocket.send(JSON.stringify({
                    type:"call_back",
                    toUser:fromUser,
                    fromUser:username,
                    msg:msg
                }));

                return;
            }

            if (type === 'call_back') {
                if(msg === "1"){
                    console.log(document.getElementById('toUser').value + "同意視頻通話");

                    //創建本地視頻併發送offer
                    let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                    localVideo.srcObject = stream;
                    stream.getTracks().forEach(track => {
                        peer.addTrack(track, stream);
                    });

                    let offer = await peer.createOffer();
                    await peer.setLocalDescription(offer); 
                    let newOffer = offer;
   
                    newOffer["fromUser"] = username;
                    newOffer["toUser"] = document.getElementById('toUser').value;
                    websocket.send(JSON.stringify(newOffer));
                }else if(msg === "

基於surging 如何利用peerjs進行語音視頻通話

一 、 概述

二、如何測試運行

三、基於surging如何開發

一、概述