unity云渲染----unity与前端通信

1.Unity接收与发送消息的思路

查找云渲染官方文档，在API中可以看到接收Input​Receiverhttps://docs.unity3d.com/Packages/com.unity.renderstreaming@3.1/api/Unity.RenderStreaming.InputReceiver.html与发送Input​Senderhttps://docs.unity3d.com/Packages/com.unity.renderstreaming@3.1/api/Unity.RenderStreaming.InputSender.html这两个类都继承DataChannelBase这个类:

在这个类中可以看到他的一些成员是可以接收和发送消息的

 我们在脚本中去引用Send()与OnMessage这两个方法：

1.获取InputReceiver这个组件

，

    private InputReceiver inputReceiver;
    void Start()
    {
        inputReceiver = GameObject.Find("Broadcast").GetComponent<InputReceiver>();
    }

 2.接收消息

在接收消息时要注意是否已经连接，OnStartedChannel当用户连接后会有一个回调事件，我们在用户连接回调方法中写消息的回调，这样我们就可以接收到web发送过来的消息了

private void OnReceiveMessage()
    {
        inputReceiver.OnStartedChannel += id =>
        {
            inputReceiver.Channel.OnMessage += o =>
            {
                var message = Encoding.UTF8.GetString(o);
            };
        };
    }

3.发送消息

在发送消息时也要判断是否有用户连接，当有用户连接时我们要发送消息直接将调用这个方法就行了

private void OnSendMessage(string message)
    {
        if (inputReceiver.IsConnected)
        {
            Debug.Log(message);
            inputReceiver.Channel.Send(message);
        }
        else
        {
            Debug.Log("设备未连接");
        }
    }

 2.Web接收与发送消息的思路

 在我搞好Unity接收与发送消息后，然后开始测试，发现在WebAPP给的模板里VideoPlayer Sample可以接收到消息，Receiver Sample不能接收到消息，于是F12看了后台打印发现，VideoPlayer Sample与Receiver Sample差异，然后根据VideoPlayer Sample去改就ok了，

这里我在Receiver文件夹下的main.js中添加了几行代码就ok了。

1.接收消息

找到onConnect函数，在函数中加上下面几行代码。

function onConnect() {
  const channel = renderstreaming.createDataChannel("input");
  videoPlayer.setupInput(channel);


  // Create data channel with proxy server and set up handlers
  channel.onmessage = async (msg) => {
    // receive message from unity and operate message
    console.log("Receive msg:", msg);
  };
  showStatsMessage();
}

 2.发送消息

在onConnect方法下面再加上OnSendMsg方法调用这个方法就ok了。

function OnSendMsg(message){
  console.log(message);
  videoPlayer.inputSenderChannel.send(message);
}