Первая статья – Управляем роботами из VR

В прошлой статье, мы провели начальную подготовку и реализовали сигнализацию для компонентов средствами websocket. В этой статье мы реализуем работу по WebRTC (Части 3, 4).

Часть 3. Настройка WebRTC Connection + DataChannel

Итак, у нас реализован сервер сигнализации, который мы сможем использовать для обмена контекстом WebRTC - offer, answer, ice, подробнее про webrtc можно почитать в тут, не будем останавливаться на деталях.

В этой части мы будем реализовывать организацию WebRTC соединения, и создание DataChannel между 2мя пирами в JS-Python-C#.

Серверный компонент

Добавим в созданную ранее разметку main.html новые элементы:

main.html

...
  <div class="row-md-6">
    <form class="form-inline">
      <div class="form-group">
        <label for="content">Send offer to:</label>
        <input type="text" id="offerTo" class="form-control" placeholder="Offer to...">
      </div>
      <button id="createOffer" class="btn btn-primary" type="submit">Create Offer</button>
    </form>
  </div>
  <div class="row-md-6">
    <form class="form-inline">
      <div class="form-group">
        <label for="content">Message directly:</label>
        <input type="text" id="content2" class="form-control" placeholder="Message here...">
      </div>
      <button id="sendMessageDirectly" class="btn btn-primary" type="submit">Directly message</button>
    </form>
  </div>
...

Для реализации datachannel на стороне браузера доработаем наш скрипт следующим образом – создадим процесс обмена sdp/ice для отправки и приема OFFER. Создание DataChаannel и отправку сообщений между пирами:

robo.js

var connection;
var userId = 'unknown';
var peerConnection;
var dataChannel;
var configuration = {
  "iceServers" : [{
  "urls" : "stun:stun2.1.google.com:19302"
  }]
};

function connect(){
  connection = new WebSocket('wss://' + window.location.host + '/robopi_webrtc');
  console.log("Connsection sucsess");
  
  initRTCPeerConnection();
  
  connection.onmessage = function(msg) {
    
    var resp = JSON.parse(msg.data);
      
    if(resp.type == 'USERID'){
      console.log();
      userId = resp.data;
      document.getElementById("username").textContent = userId;
    }
    if(resp.type == 'NEWMEMBER'){
      if(userId != resp.userId){
        console.log("NEWMEMDER:" + resp.userId);
      }
    }
    if(resp.type == 'OFFER'){
      if(userId != resp.userId){
        console.log(resp);
        handleOffer(resp.payload, resp.userId)
      }
    }
    if(resp.type == 'ICE'){
      if(userId != resp.userId){
        console.log(resp);
        receiveIceCandidate(resp.payload);
      }
    }
    if(resp.type == 'ANSWER'){
      if(userId != resp.userId){
        console.log(resp);
        handleAnswer(resp.payload);
      }
    }
  }
}

function login() {
  connection.send(JSON.stringify({'userId' : '', 'type' : 'LOGIN', 'data' : '' , 'toUserId' : ''}));
}

function newmember() {
  connection.send(JSON.stringify({'userId' : userId, 'type' : 'NEWMEMBER', 'data' : '' , 'toUserId' : ''}));
}

function initRTCPeerConnection(){
  peerConnection = new RTCPeerConnection(configuration);
  console.log("peerConnection created");
  // remote datachannel handler
  peerConnection.ondatachannel = function(event){
    dataChannel = event.channel;
    // open handling
    dataChannel.onopen = function(){
    console.log("Data channel is open!");
    }
    // error handling
    dataChannel.onerror = function(error){
      console.log("Error in datachannel:", error);
    };
    // messaging handler
    dataChannel.onmessage = function(event) {
      console.log("incoming message:", event.data);
    };
    // closing handler
    dataChannel.onclose = function() {
      console.log("Data channel is closed");
    };
  };
}

function createRTCDatachannel(){
  dataChannel = peerConnection.createDataChannel("datachannel", { 
    reliable: true 
  });
  // open handling
  dataChannel.onopen = function(){
    console.log("Data channel is open!");
  }
  // error handling
  dataChannel.onerror = function(error){
    console.log("Error in datachannel:", error);
  };
  // messaging handler
  dataChannel.onmessage = function(event) {
    console.log("incoming message:", event.data);
  };
  // closing handler
  dataChannel.onclose = function() {
    console.log("Data channel is closed");
  };
}

function createOffer(){
  createRTCDatachannel();
  peerConnection.createOffer(function(offer) {
    connection.send(JSON.stringify({'userId' : userId, 'type' : 'OFFER', 'payload' : offer , 'toUserId' : $("#offerTo").val()}));
    peerConnection.setLocalDescription(offer);
  },
  function(error) {
    console.log("error in offer creating:" + error);
  });
  sendIceCandidate();
}

function sendIceCandidate(){
  peerConnection.onicecandidate = function(event) {
  if (event.candidate) {
    console.log("sending ice candidate:" + event.candidate);
    connection.send(JSON.stringify({'userId' : userId, 'type' : 'ICE', 'payload' : event.candidate , 'toUserId' : $("#offerTo").val()}));
  }
  };
}

function receiveIceCandidate(candidate){
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
  console.log("sucsess receiving ice candidate");
}

function handleAnswer(answer){
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
  console.log("handling amswer successfully!!");
}

function handleOffer(offer, fromUser) {
  peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
  // create and send an answer to an offer
  peerConnection.createAnswer(function(answer) {
    peerConnection.setLocalDescription(answer);
    connection.send(JSON.stringify({'userId' : userId, 'type' : 'ANSWER', 'payload' : answer , 'toUserId' : fromUser}));
  }, function(error) {
    console.log("error creating answer:" + error);
  });
};

function sendMessageDirectly(){
  var message = $("#content2").val();
  dataChannel.send(message);
  console.log("send message:" + message);
}

$(function () {
  $("form").on('submit', function (e) {
  e.preventDefault();
  });
  
$( "#connect" ).click(function() { connect(); });
$( "#login" ).click(function() { login(); });
$( "#newmember" ).click(function() { newmember(); });
$( "#createOffer" ).click(function() { createOffer(); });
$( "#sendMessageDirectly" ).click(function() { sendMessageDirectly(); });
});

Делаем проверку между 2мя браузерами, проверяем работоспособность, у нас должен создаваться datachannel и мы можем отправлять принимать сообщения между браузерами:

проверка:

Исполнительный компонент(Python-скрипт на RPI)

Для работы с WebRTC из пайтон будем использовать бибилиотеку aiortc:

pip3 install aiortc

Тут возникают первые проблемы с совместимостью реализаций WebRTC (ICE) и учитываем особенность – Python не будет являться инициатором соединения, т. е. он должен только обрабатывать входящие офферы:

part2.py

import asyncio
import websockets
import json
import ssl
from websockets import WebSocketClientProtocol
from aiortc import RTCIceCandidate, RTCPeerConnection, RTCSessionDescription, RTCConfiguration, RTCIceServer

async def wsconsume(wsurl: str) -> None:
    ssl_context = ssl.SSLContext()
    async with websockets.connect(wsurl, ssl=ssl_context) as websocket:
        await websocket.send(json.dumps({"userId": "", "type": "LOGIN", "data": "", "payload": "", "toUserId": ""}))
        await wsconsumer_handler(websocket)


async def wsconsumer_handler(websocket: WebSocketClientProtocol) -> None:
    local_user_id = ""
    ice_servers = [RTCIceServer(urls=["stun:stun2.l.google.com:19302"])]
    peer_conn = RTCPeerConnection(RTCConfiguration(iceServers=ice_servers))
    
    @peer_conn.on("connectionstatechange")
    async def on_connectionstatechange():
        print("Connection state is %s" % peer_conn.connectionState)
        if peer_conn.connectionState == "failed":
            await peer_conn.close()

    @peer_conn.on("signalingstatechange")
    async def on_signalingstatechange():
        print(f"changed signalingstatechange {peer_conn.signalingState}")

    @peer_conn.on("icegatheringstatechange")
    async def on_icegatheringstatechange():
        print(f"changed icegatheringstatechange {peer_conn.iceGatheringState}")
        
    @peer_conn.on("datachannel")
    async def on_datachannel(channel):
        print(f"changed datachannel to {channel}")
        @channel.on("message")
        async def on_message(rtc_message):
            if isinstance(rtc_message, str):
                print("New message from datachannel " + rtc_message)
                channel.send("Reply from PyPi - " + rtc_message)
    
    async for message in websocket:

        msg = json.loads(message)

        if msg.get("type") == 'USERID' and local_user_id != msg.get("userId"):
            local_user_id = msg.get("data")
            print("SET UID: " + local_user_id)
            await websocket.send(json.dumps({"userId": local_user_id, "type": "NEWMEMBER", "data": "",
                                             "payload": "", "toUserId": ""}))

        if msg.get("type") == 'OFFER' and local_user_id == msg.get("toUserId"):
            print("Handling offer: " + str(msg.get("payload")))
            
            await peer_conn.setRemoteDescription(
                RTCSessionDescription(sdp=msg.get("payload").get("sdp"), type=msg.get("payload").get("type")))

            
            answer = await peer_conn.createAnswer()
            print("Creating answer:" + str(answer))
            await peer_conn.setLocalDescription(answer)

            await websocket.send(json.dumps({"userId": local_user_id, "type": "ANSWER", "data": "",
                                             "payload": {"sdp": answer.sdp, "type": answer.type},
                                             "toUserId": msg.get("userId")}))
            
        if msg.get("type") == 'ICE' and local_user_id == msg.get("toUserId"):
            print("ICE INCOMING")
            candidate = msg.get("payload").get("candidate").split()
            new_ice = RTCIceCandidate(
                component=int(candidate[1]),
                foundation=candidate[0].split(":")[1],
                ip=candidate[4],
                port=int(candidate[5]),
                priority=int(candidate[3]),
                protocol=candidate[2],
                type=candidate[7],
                relatedAddress=None,
                relatedPort=None,
                sdpMid=msg.get("payload").get("sdpMid"),
                sdpMLineIndex=int(msg.get("payload").get("sdpMLineIndex")),
                tcpType=None
            )
            await peer_conn.addIceCandidate(new_ice)

        if msg.get("type") == 'ANSWER' and local_user_id == msg.get("toUserId"):
            print("ANSWER INCOMING")
            await peer_conn.setRemoteDescription(
                RTCSessionDescription(sdp=msg.get("payload").get("sdp"), type=msg.get("payload").get("type")))

async def main():
    task = asyncio.create_task(wsconsume('wss://192.168.10.146:9000/robopi_webrtc'))
    await task


if __name__ == '__main__':
    loop = asyncio.get_event_loop()
    try:
        loop.run_until_complete(main())
    except KeyboardInterrupt:
        loop.stop()
        pass

Делаем проверку между браузером и пайтон скриптом, проверяем работоспособность, у нас должен создаваться datachannel и мы можем отправлять принимать сообщения между браузером и python скриптом:

проверка:

Управляющий компонент(Unity VR)

Для работы с WebRTC unity будем использовать библиотеку WebRTC for Unity

Добавляем ее по инструкции, там же приведены основные референсы по работе(чаcть не совсем корректна, поэтому нужно внимательно смотреть на сэмплы к пакету!)

добавление:

Cкрипты из браузера и Unity могут отправлять и принимать offer в обе стороны, т.е. могут быть инициаторами соединения, скрипт из Python может только принимать входящий offer и отправлять встречный offer после создания контекста, но инициатором соединения он не будет.

Дополняем наш UI в Unity новыми элементами:

Dropdown – для отображения Member.

Create Offer – для инициации WebRTC call.

Send Hello – для отправки сообщения, по нажатию на которую в datachannel будет отправляться типовое сообщение с датой/временем. Для отображения сообщений из datachannel будем писать их просто в debug log Unity.

Дополняем наш скрипт следующим образом:

Connection.cs

using System;
using System.Collections;
using System.Collections.Concurrent;
using System.Collections.Generic;
using Unity.WebRTC;
using UnityEngine;
using UnityEngine.UI;
using WebSocketSharp;

public class Connection : MonoBehaviour
{

    private GameObject uuid;
    private WebSocket ws;
    private ConcurrentQueue<string> incomingWebsocketMessages;
    private string userId = "unknown";

    private GameObject wscandidates;
    private List<string> dropOptions;

    private RTCPeerConnection webrtcConnection;
    private RTCDataChannel dataChannel, remoteDataChannel;

    private DelegateOnDataChannel onDataChannel;
    private DelegateOnOpen onDataChannelOpen;
    private DelegateOnMessage onDataChannelMessage;
    private DelegateOnClose onDataChannelClose;
    private DelegateOnIceConnectionChange onIceConnectionChange;
    private DelegateOnIceCandidate onIceCandidate;

    void Start()
    {
        uuid = GameObject.FindGameObjectWithTag("uuid");
        incomingWebsocketMessages = new ConcurrentQueue<string>();

        ws = new WebSocket("wss://192.168.10.146:9000/robopi_webrtc");
        ws.SslConfiguration.EnabledSslProtocols = System.Security.Authentication.SslProtocols.Tls12;

        ws.OnOpen += (sender, e) =>
        {
            Debug.Log("OPEN WEBSOCKET");
        };

        ws.OnMessage += (sender, e) =>
        {
            if (e.IsText)
            {
                incomingWebsocketMessages.Enqueue(e.Data);
                Debug.Log("Incoming websocket message:" + e.Data);
            }
        };

        ws.OnClose += (sender, e) => {
            Debug.Log("CLOSE WEBSOCKET:" + e.Reason);
        };

        dropOptions = new List<string> { "No candidates!" };
        wscandidates = GameObject.FindGameObjectWithTag("candidates");
        wscandidates.GetComponent<Dropdown>().AddOptions(dropOptions);

        webrtcConnection = new RTCPeerConnection();

        onDataChannelOpen = () =>
        {
            Debug.Log("OPEN LOCAL DATACHANNEL");
            var welcome = "Welcome to Unity WebRTC! Local creation!";
            dataChannel.Send(welcome);
            dataChannel.OnMessage = onDataChannelMessage;
        };

        onDataChannel = channel =>
        {
            remoteDataChannel = channel;
            Debug.Log("OPEN REMOTE DATACHANNEL");
            var welcome = "Welcome to Unity WebRTC! Remote creation!";
            remoteDataChannel.Send(welcome);
            remoteDataChannel.OnMessage = onDataChannelMessage;
        };

        onDataChannelMessage = bytes =>
        {
            var messageText = System.Text.Encoding.UTF8.GetString(bytes);
            Debug.Log("Incoming datachannel message: " + messageText);
        };

        onDataChannelClose = () =>
        {
            Debug.Log("CLOSE DATACHANNEL");
        };

        onIceConnectionChange = state => {
            OnIceConnectionChange(webrtcConnection, state);
        };

        onIceCandidate = candidate => {
            OnIceCandidate(webrtcConnection, candidate);
        };

    }

    void Update()
    {
        if (incomingWebsocketMessages.TryDequeue(out var wsmessage))
        {
            var answer = JsonUtility.FromJson<WSMessage<string>>(wsmessage);

            if (answer.type.Equals("USERID") && !answer.data.Equals(userId))
            {
                userId = answer.data;
                SetUserId(userId);
            }
            else if (answer.type.Equals("NEWMEMBER") && !answer.userId.Equals(userId))
            {
                string newcandidate = answer.userId;
                AddNewWsCandidate(newcandidate);
            }
            else if (answer.type.Equals("OFFER") && !answer.userId.Equals(userId))
            {
                var incomingOffer = JsonUtility.FromJson<WSMessage<Offer>>(wsmessage);
                Debug.Log("INCOMING OFFER:" + incomingOffer);

                var desc = new RTCSessionDescription();
                desc.type = RTCSdpType.Offer;
                desc.sdp = incomingOffer.payload.sdp;

                wscandidates.GetComponent<Dropdown>().captionText.text = answer.userId;

                StartCoroutine(HandleCall(desc));
            }
            else if (answer.type.Equals("ICE") && !answer.userId.Equals(userId))
            {
                var iceCandidate = JsonUtility.FromJson<WSMessage<Ice>>(wsmessage);

                Debug.Log("INCOMING ICE:" + answer);

                RTCIceCandidateInit init = new RTCIceCandidateInit();
                init.candidate = iceCandidate.payload.candidate;
                init.sdpMid = iceCandidate.payload.sdpMid;
                init.sdpMLineIndex = iceCandidate.payload.sdpMLineIndex;

                RemoteIceCandidate(webrtcConnection, new RTCIceCandidate(init));
            }
            else if (answer.type.Equals("ANSWER") && !answer.userId.Equals(userId))
            {
                var incomingAnswer = JsonUtility.FromJson<WSMessage<Answer>>(wsmessage);
                Debug.Log("INCOMING ANSWER:" + incomingAnswer.payload.type + "  sdp:" + incomingAnswer.payload.sdp);

                var desc = new RTCSessionDescription();
                desc.type = RTCSdpType.Answer;
                desc.sdp = incomingAnswer.payload.sdp;

                StartCoroutine(ConsumeAnswer(desc));
            }
        }
    }
    public void AddNewWsCandidate(string candidate)
    {
        dropOptions.Add(candidate);
        wscandidates.GetComponent<Dropdown>().ClearOptions();
        wscandidates.GetComponent<Dropdown>().AddOptions(dropOptions);
        wscandidates.GetComponent<Dropdown>().RefreshShownValue();
    }

    IEnumerator HandleCall(RTCSessionDescription desc)
    {

        webrtcConnection.OnIceCandidate = onIceCandidate;
        webrtcConnection.OnIceConnectionChange = onIceConnectionChange;
        webrtcConnection.OnDataChannel = onDataChannel;

        var op = webrtcConnection.SetRemoteDescription(ref desc);
        yield return op;

        if (!op.IsError)
        {
            Debug.Log("Set Remote Description complete");
        }
        else
        {
            var error = op.Error;
            Debug.Log("ERROR Set Session Description: " + error);
        }

        var op2 = webrtcConnection.CreateAnswer();
        yield return op2;
        if (!op2.IsError)
        {
            string remoteUuid = wscandidates.GetComponent<Dropdown>().captionText.text;

            var wsAnswer = new WSMessage<Answer>
            {
                userId = userId,
                type = "ANSWER",
                data = "",
                payload = new Answer(op2.Desc.sdp, "answer"),
                toUserId = remoteUuid
            };

            Debug.Log("CREATE ANSWER:" + JsonUtility.ToJson(wsAnswer));

            ws.Send(JsonUtility.ToJson(wsAnswer));

            Debug.Log("SEND ANSWER:" + JsonUtility.ToJson(wsAnswer));

            yield return OnCreateAnswerSuccess(op2.Desc);
        }
        else
        {
            Debug.Log("ERROR Create Session Description:" + op2.Error.message);
        }

    }

    IEnumerator OnCreateAnswerSuccess(RTCSessionDescription desc)
    {
        var op = webrtcConnection.SetLocalDescription(ref desc);
        yield return op;

        if (!op.IsError)
        {
            Debug.Log("Set Local Description complete");
        }
        else
        {
            var error = op.Error;
            Debug.Log("ERROR Set Session Description: " + error.message);
        }
    }

    IEnumerator ConsumeAnswer(RTCSessionDescription desc)
    {

        var op = webrtcConnection.SetRemoteDescription(ref desc);
        yield return op;

        if (!op.IsError)
        {
            Debug.Log("Set Remote Description complete");
        }
        else
        {
            var error = op.Error;
            Debug.Log("ERROR Set Session Description: " + error.message);
        }

    }

    public void CallWebRTC()
    {
        StartCoroutine(Call());
    }

    IEnumerator Call()
    {
        webrtcConnection.OnIceCandidate = onIceCandidate;
        webrtcConnection.OnIceConnectionChange = onIceConnectionChange;

        var option = new RTCDataChannelInit();
        dataChannel = webrtcConnection.CreateDataChannel("datachannel", option);
        dataChannel.OnOpen = onDataChannelOpen;
        dataChannel.OnClose = onDataChannelClose;
        webrtcConnection.OnDataChannel = onDataChannel;

        var op = webrtcConnection.CreateOffer();
        yield return op;

        if (!op.IsError)
        {

            string remoteUuid = wscandidates.GetComponent<Dropdown>().captionText.text;

            var wsOffer = new WSMessage<Offer>
            {
                userId = userId,
                type = "OFFER",
                data = "",
                payload = new Offer(op.Desc.sdp, "offer"),
                toUserId = remoteUuid
            };

            Debug.Log("CREATE OFFER:" + JsonUtility.ToJson(wsOffer));

            ws.Send(JsonUtility.ToJson(wsOffer));

            Debug.Log("SEND OFFER:" + JsonUtility.ToJson(wsOffer));

            yield return StartCoroutine(OnCreateOfferSuccess(op.Desc));
        }
        else
        {
            Debug.Log("ERROR Create Session Description: " + op.Error);
        }

    }

    IEnumerator OnCreateOfferSuccess(RTCSessionDescription desc)
    {
        var op = webrtcConnection.SetLocalDescription(ref desc);
        yield return op;

        if (!op.IsError)
        {
            Debug.Log("Set Local Description complete");
        }
        else
        {
            var error = op.Error;
            Debug.Log("ERROR Set Session Description: " + error);
        }

    }

    public void SendDirectMessage()
    {
        var message = "Message from Unity " + DateTime.Now;
        if (dataChannel != null && dataChannel.ReadyState == RTCDataChannelState.Open) dataChannel.Send(message);
        if (remoteDataChannel != null && remoteDataChannel.ReadyState == RTCDataChannelState.Open) remoteDataChannel.Send(message);
    }

    void OnIceConnectionChange(RTCPeerConnection pc, RTCIceConnectionState state)
    {
        switch (state)
        {
            case RTCIceConnectionState.New:
                Debug.Log("IceConnectionState: New");
                break;
            case RTCIceConnectionState.Checking:
                Debug.Log("IceConnectionState: Checking");
                break;
            case RTCIceConnectionState.Closed:
                Debug.Log("IceConnectionState: Closed");
                break;
            case RTCIceConnectionState.Completed:
                Debug.Log("IceConnectionState: Completed");
                break;
            case RTCIceConnectionState.Connected:
                Debug.Log("IceConnectionState: Connected");
                break;
            case RTCIceConnectionState.Disconnected:
                Debug.Log("IceConnectionState: Disconnected");
                break;
            case RTCIceConnectionState.Failed:
                Debug.Log("IceConnectionState: Failed");
                break;
            case RTCIceConnectionState.Max:
                Debug.Log("IceConnectionState: New");
                break;
            default:
                break;
        }
    }

    void OnIceCandidate(RTCPeerConnection webrtcConnection, RTCIceCandidate candidate)
    {
        webrtcConnection.AddIceCandidate(candidate);
        Debug.Log("ADDED local ICE candidate:" + candidate.Candidate);
        string remoteUuid = wscandidates.GetComponent<Dropdown>().captionText.text;
        var iceCand = new WSMessage<Ice>
        {
            userId = userId,
            type = "ICE",
            data = "",
            payload = new Ice(candidate.Candidate, (int)candidate.SdpMLineIndex, candidate.SdpMid, candidate.UserNameFragment),
            toUserId = remoteUuid
        };
        ws.Send(JsonUtility.ToJson(iceCand));
        Debug.Log("SEND ICE:" + JsonUtility.ToJson(iceCand));
    }

    void RemoteIceCandidate(RTCPeerConnection webrtcConnection, RTCIceCandidate candidate)
    {
        webrtcConnection.AddIceCandidate(candidate);
        Debug.Log("ADDED remote ICE candidate:" + candidate.Candidate);
    }

    public void ConnectWebsocket()
    {
        ws.Connect();
    }

    public void DisconnectWebsocket()
    {
        ws.Close();
    }

    public void LoginWebsocket()
    {
        var hello = new WSMessage<string>
        {
            userId = "",
            type = "LOGIN",
            data = "",
            payload = "",
            toUserId = ""
        };
        ws.Send(JsonUtility.ToJson(hello));
    }

    public void SendNewmember()
    {
        var newmember = new WSMessage<string>
        {
            userId = userId,
            type = "NEWMEMBER",
            data = "",
            payload = "",
            toUserId = ""
        };

        ws.Send(JsonUtility.ToJson(newmember));
    }

    void SetUserId(string userId)
    {
        uuid.GetComponent<UnityEngine.UI.Text>().text = userId;
    }

}

[Serializable]
public class WSMessage<T>
{
    public string userId;
    public string type;
    public string data;
    public T payload;
    public string toUserId;
}

[Serializable]
public class Offer
{
    public string type;
    public string sdp;

    public Offer(string sdp, string type)
    {
        this.type = type;
        this.sdp = sdp;
    }
}

[Serializable]
public class Answer
{
    public string type;
    public string sdp;
    public Answer(string sdp, string type)
    {
        this.type = type;
        this.sdp = sdp;
    }
}

[Serializable]
public class Ice
{
    public string candidate;
    public int sdpMLineIndex;
    public string sdpMid;
    public string usernameFragment;

    public Ice(string candidate, int sdpMLineIndex, string sdpMid, string usernameFragment)
    {
        this.candidate = candidate;
        this.sdpMLineIndex = sdpMLineIndex;
        this.sdpMid = sdpMid;
        this.usernameFragment = usernameFragment;
    }
}

Добавляем наши методы SendDirectMessage и CallWebRTC на созданные Button и можем приступить к проверке.

Проверка взаимодействия компонентов

Теперь можем провести проверку между браузером и Unity с двух сторон и между Unity и Python скриптом.

проверка:

Unity – Браузер (желательно в обе стороны)

Unity – Python:

Вуаля, мы видим, что сообщения успешно отправляются и принимаются, а это значит что у нас закончилась 3 часть.

Часть 4. Настройка WebRTC Media streaming

В предыдущих частях у нас получилось сделать datachannel между браузером-python-unity, теперь этот код пора обогатить медиаконтентом.

Серверный компонент

Добавим в созданную разметку main.html новые элементы для видео

main.html

...
<div class="row-md-6">
  <form class="form-inline">
    <button id="startStream" class="btn btn-primary" type="submit">Start media streaming</button>
  </form>
  </div>
  <div class="row-md-6">
    <video autoplay id="myvideo" width="320" height="240" controls></video>
    <video autoplay id="remoteVideo" width="320" height="240" controls></video>
</div>
...

Доработаем наш скрипт следующим образом:

robo.js

...
const constraints = {
  video: true, audio: true
};
var videoStream;
...

// Добавим в function initRTCPeerConnection()
// video handling
const remoteVideo = document.getElementById('remoteVideo');
peerConnection.addEventListener('track', async (event) => {
  const remoteStream = event.streams[0];
  remoteVideo.srcObject = remoteStream;
  console.log('Received remote stream');
});

// Добавим старт медиа стриминга:
function statrStream(){
  navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    videoStream = stream;
    stream.getTracks().forEach(track => {
      peerConnection.addTrack(track, videoStream);
      console.log("added track:" + track);
    });
      console.log("sucsess started media stream");
    recreateOffer();
  })
  .catch(function(err){
    console.log("errors when media stream");
  });
  attachVideoToScreen();
}

function recreateOffer(){
  peerConnection.createOffer(function(offer) {
    connection.send(JSON.stringify({'userId' : userId, 'type' : 'OFFER', 'payload' : offer , 'toUserId' : $("#offerTo").val()}));
    peerConnection.setLocalDescription(offer);
  },
  function(error) {
    console.log("error in offer creating:" + error);
  });
}

function attachVideoToScreen(){
  const localvideo = document.getElementById('myvideo');
  if (videoStream != null) {
    localvideo.srcObject = videoStream;
    localvideo.onloadedmetadata = () => {
      localvideo.play();
    }
    console.log("sucsess attached media stream");
  } else {
    setTimeout(attachVideoToScreen, 500);
  }
}

// Не забываем сделать кнопку активной:
...
$( "#startStream" ).click(function() { statrStream(); });
...

Теперь подключаем USB-камеру к компьютеру и можем сделать проверку работы видео/аудио между браузерами в обе стороны, я делаю между браузером компьютера и телефона и видим, что все идет успешно.

Исполнительный компонент(Python-скрипт на RPI)

При поступлении offer от Управляющего компонента нам нужно получить видео с USB-камеры и создать видеотрак, который добавить к webrtc-connection. В пакете aiortc для реализации передачи медиа есть специальные хелперы. Реализуем их в нашем Python скрипте:

part3.py

## добавим 2 метода:
def force_codec(pc, sender, forced_codec):
    kind = forced_codec.split("/")[0]
    codecs = RTCRtpSender.getCapabilities(kind).codecs
    transceiver = next(t for t in pc.getTransceivers() if t.sender == sender)
    transceiver.setCodecPreferences(
        [codec for codec in codecs if codec.mimeType == forced_codec]
    )


async def add_video(peer_conn) -> None:
    options = {"framerate": "30", "video_size": "640x480", "preset": "fast"}
    relay_v = MediaRelay()
    webcam = MediaPlayer("/dev/video0", format="v4l2", options=options)
    video_sender = peer_conn.addTrack(relay_v.subscribe(webcam.video, buffered=False))
    force_codec(peer_conn, video_sender, "video/H264")

## И в раздел хендлинга оффера добавим вызов добавления видео и отправку оффера с новым кандидатом.

            await add_video(peer_conn)
            
            offer = await peer_conn.createOffer()
            await peer_conn.setLocalDescription(offer)
            await websocket.send(json.dumps({"userId": local_user_id, "type": "OFFER", "data": "",
                                             "payload": {"sdp": offer.sdp, "type": offer.type},
                                             "toUserId": msg.get("userId")}))

Хелперы основаны на ffmpeg поэтому в параметры опций мы можем включать необходимые опции для ускорения ffmpeg, это может быть очень полезно для снижения задержек видео.

Теперь можем провести проверку работы между Python и браузером. Если вдруг медиа траки принимаются в браузере, но видео не воспроизводится - то перезапускаем хром, так же можем пользоваться инструментом - chrome://webrtc-internals/

проверка:

Управляющий компонент(Unity VR)

С этой частью все несколько сложнее, для начала мы сделаем panel для отображения видео, для этого просто продублируем созданный ранее Connection Panel, переименуем его в Robo Video Panel, удалим из него все объекты и поместим в него 2 новых объекта:

Raw Image - для отображения видео из видеотрека, ставим тэг «remoteimage»
Audiosource - для аттача аудио из аудиотрека webrtc, ставим тэг «receivedaudiosource»(это на будущее)

Вот так:

и добавим собственно само добавление видео/аудио из траков:

Connection.cs:

...
private RawImage remoteImage;
private DelegateOnTrack webrtcСonnOntrack;
private AudioSource receivedAudioSource;
...

// Аттачим объекты по тегам в Start методе и добавим делагат на событие добавления траков:
void Start()
….
remoteImage = GameObject.FindGameObjectWithTag("remoteimage").GetComponent<RawImage>();
receivedAudioSource = GameObject.FindGameObjectWithTag("receivedAudioSource").GetComponent<AudioSource>();
….
webrtcСonnOntrack = e =>
        {
            if (e != null)
            {
                Debug.Log("NEW TRACK Recived: " + e.Track.Id);
            }
            if (e.Track is VideoStreamTrack video)
            {
                video.OnVideoReceived += tex =>
                {
                    remoteImage.texture = tex;
                };
            }
            if (e.Track is AudioStreamTrack track)
            {
                receivedAudioSource.SetTrack(track);
                receivedAudioSource.loop = true;
                receivedAudioSource.Play();
            }
        };

// Теперь в хендлинге оффера добавим на OnTrack делегат webrtcСonnOntrack
IEnumerator HandleCall(RTCSessionDescription desc)
{
    webrtcConnection.OnTrack = webrtcСonnOntrack;
...
// И очень важный пункт после хендлинга оффера — провести WebRTC.Update().
...
StartCoroutine(WebRTC.Update());
}

PS: так же можно сделать и трансляцию с камеры из Unity в медиа стрим если хочется смотреть смотреть в браузере, что делается в Unity:

MediaStream videoStream = customCamera.CaptureStream(1280, 720);
MediaStreamTrack trackLocal = videoStream.GetVideoTracks().First();
webrtcConnection.AddTrack(track, videoStream);
Debug.Log("ADDED OUTGOING TRACK:" + trackLocal.Id);

Проверка взаимодействия компонентов

Теперь проверим взаимодействие компонентов, сначала Unity-браузер, потом Unity-Python, как видим обмен контекстом успешен и видео с камеры отображается в Unity.

проверка:

Unity – Python:

PS: я использовал видеокамеру, которая по идее должна выдавать медиа с разрешением 1280х720 30fps, однако по факту она настроена на 640х480, т.к. даже с оптимизированными настройками на ffmpeg мне не удалось найти режима с минимальной задержкой видео. Возможно дело в камере, возможно в кривых руках.

options = {"framerate": "25", "input_format": "mjpeg", "video_size": "1280x720", "preset": "ultrafast", "tune":"zerolatency"}

PS2: судя по инфо по aiortc с камеры так же можно получить аудиопоток, однако у меня это с помощью хелпера MediaPlayer() с alsa не получилось, поэтому я оставил этот вопрос.

Очередная часть закончена, пора приступить к реализации управления.

Продолжение в следующей статье – Управляем роботами из VR. Продолжение 2

Управляем роботами из VR. Продолжение 1