关于Unity渲染流

此软件包包含基于我们的Unity渲染流构建的公共API和项目示例。使用此软件包，我们可以快速开发点对点流媒体解决方案。

主要功能

此软件包提供以下主要功能。

  • 视频流媒体
  • 音频流媒体
  • 远程控制

视频流媒体

我们可以通过网络将在Unity上渲染的视频广播到浏览器。例如，可以在iPad的浏览器上显示使用HDRP渲染的视频。此外，还支持从多个摄像头进行广播。
图片

音频流媒体

此软件包支持流式传输在Unity上生成的声音，并且可以同时向多个浏览器投放。

远程控制

可以从浏览器向Unity发送输入消息，并支持从多个浏览器发送输入。浏览器上支持鼠标、键盘、触摸和游戏手柄作为输入设备。

系统要求

这个版本的渲染流媒体与以下版本的Unity编辑器兼容：

  • Unity 2020.3
  • Unity 2021.3
  • Unity 2022.3
  • Unity 2023.1

平台

  • 仅支持 Windows（x64）
  • Linux
  • macOS（支持Intel和苹果硅片）
  • iOS
  • Android（仅支持ARM64，不支持ARMv7）

    注意
    此软件包依赖于WebRTC软件包。如果您要为移动平台（iOS/Android）构建，请查阅软件包文档以了解构建的要求。

浏览器支持

Unity渲染流媒体支持几乎所有可以使用WebRTC的浏览器。

Browser Windows Mac iOS Android
Google Chrome ✅ ✅ ✅
Safari ✅ ✅
Firefox ✅
Microsoft edge (Chromium based) ✅

注意
由于依赖于对WebRTC的支持状态，它可能在某些浏览器上无法正常工作。

注意
在Safari和iOS Safari中，WebRTC功能不能通过http使用。必须使用https。

概述

以下是对Unity渲染流媒体系统的一般概念的解释。

系统结构

渲染流媒体系统由以下三个组件组成。

  • 信号服务器
  • 节点1（发送者）
  • 节点2（接收者）
    图片
    在渲染流媒体中，两个节点之间创建了一个P2P网络，该网络发送视频/音频/二进制数据。Web服务器使两个节点之间的通信成为可能。这种通信称为信号传递。

信号处理过程

以下是对信号处理方式的解释。
图片

  1. 对等方1将Offer SDP发送到信号服务器。
  2. 对等方2检查信号服务器以获取未处理的Offer SDPs，并接收找到的任何SDP。
  3. 对等方2将Answer SDP发送到信号服务器。
  4. 对等方1检查信号服务器以获取未处理的Answer SDPs，并接收找到的任何SDP。
  5. 对等方1将ICE候选发送到信号服务器。
  6. 对等方2检查信号服务器以获取未处理的ICE候选，并接收找到的任何候选。
  7. 对等方2将ICE候选发送到信号服务器。
  8. 对等方1检查信号服务器以获取未处理的ICE候选，并接收找到的任何候选。
  9. 对等方之间的连接建立完成，对等方1可以向对等方2发送流。

教程

本页面描述了如何创建一个使用Unity渲染流技术的场景，并向您介绍帮助您通过流媒体在浏览器上呈现3D内容的关键功能。

开始之前

  • 请阅读需求以了解限制。
  • 本教程使用localhost和端口80作为信号服务器。如果您想更改地址和端口号，请阅读信号设置页面。

从模板创建Unity项目

1：打开Unity Hub。
2：转到项目(Projects)，并选择新建项目(New Project)。
图片
3：打开核心(Core )标签页，选择第三人称(Third Person)。
图片
4：输入项目名称(Project name)。
5：选择创建项目(Create Project)。
Unity将创建一个项目，当Unity打开模板项目后，您可以看到Playground场景。
图片
此模板设计用于多个平台，因此它是面向流媒体项目的良好起点。如果您想要实现高端图形效果，我们推荐使用HDRP样本模板。

Unity渲染流设置

1: 在菜单栏中选择窗口(Window) > 包管理器(Package Manager)。
图片
2: 检查包管理器窗口，点击+按钮并选择通过名称添加包(Add package by name)。如果您使用的是Unity 2020.3，请选择从git URL添加包(Add package from git URL)。
地址
3: 在输入框中输入以下字符串。

1
com.unity.renderstreaming

4: 安装包后，渲染流向导窗口将自动打开。选择全部修复(Fix All)。
图片
5: 在Unity编辑器中选择播放(Play)。

启动网页应用程序

1: 在渲染流向导窗口中选择下载最新版本的网页应用(Download latest version web app)。
图片
2: 启动应用程序。
如果您能在控制台中看到如下日志，则表示启动成功。
图片

从浏览器连接：

1: 启动浏览器。
请查看需求页(Requirements page)中支持的浏览器列表。
2: 在浏览器中访问http://127.0.0.1。
3: 选择接收者示例(Receiver Sample)。
图片
4: 选择播放(Play)。
您可以在浏览器中看到游戏视图，鼠标和键盘输入将影响游戏视图。
图片

从移动浏览器连接：

1: 该项目包含虚拟游戏手柄。请在层级窗口(Hierarchy window)中选择 UI_Canvas_StarterAssetsInputs_Joysticks，并设置为激活状态。
您可以在游戏视图(Game View)中看到游戏手柄。
图片
2: 从移动浏览器连接时，必须在信号服务器上启用SSL证书。请参阅此页面。
3: 使用创建的证书启动信号服务器。请在此处查看Web服务器的选项。
4: 将Web服务器的新URL设置到项目设置窗口(Project Settings window)中的信号设置(Signaling Settings)。
5: 在Unity编辑器中选择播放(Play)。
6: 从移动浏览器访问网页。
如果您看到如下的警告页面，也不必担心。

开发流媒体应用程序

本节将指导您通过从一个空的Unity项目开始，逐步创建一个简单的流媒体应用程序。

创建场景

本教程解释了如何在Unity编辑器中编辑一个空场景，并将摄像机渲染的图像显示到浏览器中。

更改项目设置

本页描述的程序假设不使用自动流媒体功能。请按以下步骤关闭该功能。
1: 打开项目设置窗口(Project Settings)。
2: 选择渲染流媒体(Render Streaming)标签。
3: 选择创建新设置资产(Create New Settings Asset)。
4: 以任意名称保存资产。
5: 禁用自动流媒体功能(Automatic Streaming)。
图片

设置组件

如果Unity版本是2020年或更晚版本，请创建一个新的空场景。从菜单中选择文件(File) > 新建场景(New Scene)以打开对话框，并选择基础场景(Basic (Built-in))。
图片
在层级窗口(Hierarchy window)中选择主摄像机对象(Main Camera)，然后在检查器窗口(Inspector window)中添加信号管理器组件(Signaling Manager component)。
图片
接下来，我们将向主摄像机对象(Main Camera)添加广播组件(Broadcast component)。该组件负责将流传输到多个对等方。
图片
将广播组件(Broadcast component)分配给渲染流组件(Render Streaming component)的处理器属性(Handler property)。
图片
在主摄像机对象(Main Camera)上添加一个视频流发送组件(Video Stream Sender component)。此组件引用摄像机，并将其作为流传输给其他对等方。
图片
将视频流发送组件(Video Stream Sender component)分配给广播组件(Broadcast component)的相应属性。并设置摄像机。
图片

在浏览器中检查

打开接收者示例页面(Receiver Sample page)，你应该能在浏览器中看到来自Unity摄像机的视频。
图片

下一步

你已经可以将视频从Unity传输到浏览器了。同样，也可以传输音频。有几种类型的组件可以被流式传输。请查看组件页面以获取详细信息。

设置设备输入

为了在远程PC上控制摄像机，我们需要将Web浏览器上的输入事件与Unity中的动作关联起来。输入系统(Input System)使得输入处理的实现变得简单。

检查输入系统的设置

首先，请检查关于输入系统设置的向导窗口。

添加用于输入处理的组件

打开之前页面创建的Unity场景，并在层级窗口(Hierarchy window)中选择主摄像机(Main Camera)。在检查器窗口(Inspector window)中添加输入接收器组件(Input Receiver component)。

输入接收器组件(Input Receiver)的初始条件如下所示。

将 Input Receiver 组件添加到 Broadcast 组件的属性中。

设置输入动作

我们将使用输入系统的输入动作功能。输入动作是一种将各种输入映射到 Unity 动作的机制，并且它提供了易于使用的编辑工具。我们将使用输入动作来定义鼠标动作。
在项目窗口中右键点击，然后选择 创建(Create ) > 输入动作( Input Actions)。

该资源将被添加到项目窗口中，并重命名为 Control。双击项目窗口中的 Control 资源，将会打开动作编辑器。

点击动作映射中的 + 按钮以添加一个项目。

将动作(Actions )项重命名为 Look。

选择该项，将动作类型(Action Type)更改为Value，控制类型(Control Type)更改为Vector2。

接下来，选择 项，并添加 Mouse > Delta 到绑定(Binding)路径(Path)中。

结果将如下所示。请注意，最后一步是按下保存资源(Save Asset)按钮以保存您的编辑。

设置 InputReceiver 组件

将 Control 资产拖到 InputReceiver 组件的 Input Actions 属性上。

添加代码以控制相机的旋转。移动到 Inspector 窗口，点击 Add component 按钮并选择 New Script 来创建资产。将资产名称更改为 PlayerControler。

脚本的内容如下所示。

1
2
3
4
5
6
7
8
9
10
11
using UnityEngine;
using UnityEngine.InputSystem;

public class PlayerController : MonoBehaviour
{
    public void Look(InputAction.CallbackContext value)
    {
        Vector2 input = value.ReadValue<Vector2>();
        transform.eulerAngles += new Vector3(-input.y, input.x, 0);
    }
}

将脚本复制并保存文件后，将 PlayerController.Look 分配给 InputReceiver 组件的 Look 事件。

在浏览器中检查

浏览器中的鼠标操作应该反映在相机的旋转上。如果相机没有移动，请检查向导窗口上的设置。

示例

请查看此页面。