开发AR助视应用：如何在Sceneform中渲染WebRTC流至ExternalTexture？

嘿，我之前在做AR视频流项目时遇到过类似的问题，结合Sceneform和WebRTC的特性，给你几个具体的实操方向：

核心思路 #

Sceneform的ExternalTexture本质是封装了一个SurfaceTexture，我们需要让WebRTC把视频帧直接输出到这个SurfaceTexture对应的Surface上，再把ExternalTexture绑定到AR场景的Material中——和你跑通的绿幕示例逻辑一致，只是把MediaPlayer的视频源换成了WebRTC流。

具体步骤 #

1. 初始化ExternalTexture与关联Surface #

先像绿幕示例那样创建ExternalTexture，并基于它的SurfaceTexture生成可用于WebRTC输出的Surface：

// 在Sceneform初始化代码中（比如Activity的onCreate）
val externalTexture = ExternalTexture()
val surfaceTexture = externalTexture.surfaceTexture
// 提前设置和WebRTC流匹配的分辨率，避免画面变形
surfaceTexture.setDefaultBufferSize(1280, 720) // 替换成你的WebRTC流实际分辨率
val webRtcRenderSurface = Surface(surfaceTexture)

2. 让WebRTC输出帧到目标Surface #

WebRTC通过VideoSink回调提供视频帧，我们可以实现一个自定义Sink，把帧渲染到刚才创建的Surface上：

class WebRTCFrameSink(private val targetSurface: Surface) : VideoSink {
    private val videoRenderer = VideoRenderer(targetSurface)

    override fun onFrame(frame: VideoFrame) {
        // 直接用WebRTC的VideoRenderer工具类把帧渲染到Surface
        videoRenderer.renderFrame(frame)
    }

    // 记得在销毁时释放资源
    fun release() {
        videoRenderer.dispose()
        targetSurface.release()
    }
}

然后把这个Sink绑定到你的WebRTC VideoTrack上：

// 假设你已经通过WebRTC PeerConnection拿到了VideoTrack
val videoTrack: VideoTrack = ... 
val frameSink = WebRTCFrameSink(webRtcRenderSurface)
videoTrack.addSink(frameSink)

3. 关联ExternalTexture到AR场景的Material #

这部分和绿幕示例几乎完全一样，把ExternalTexture设置到Material，并绑定到AR节点：

// 创建使用ExternalTexture的Material
val material = MaterialFactory.makeOpaqueWithTexture(applicationContext, externalTexture)
// 可选：如果需要绿幕抠图，可以复用绿幕示例的Shader逻辑
// material.setFloat("keyColor", ChromaKeyColor.GREEN.value)

// 创建AR节点并设置渲染器
val videoNode = Node()
val planeRenderer = PlaneRenderer().apply {
    setMaterial(material)
    // 设置平面尺寸，和视频分辨率比例匹配
    setSize(16f, 9f)
}
videoNode.renderable = planeRenderer
// 将节点添加到AR场景中
arSceneView.scene.addChild(videoNode)

4. 处理纹理更新与矩阵变换 #

在Sceneform的渲染循环中，需要更新SurfaceTexture的内容，并同步纹理变换矩阵，确保画面正常显示：

val transformMatrix = FloatArray(16)
arSceneView.scene.addOnUpdateListener {
    externalTexture.surfaceTexture?.let { st ->
        st.updateTexImage()
        st.getTransformMatrix(transformMatrix)
        // 更新Material的纹理变换矩阵
        material.setFloatArray("textureTransform", transformMatrix)
    }
}

关键注意事项 #

• 线程安全：WebRTC的onFrame回调运行在非主线程，操作Surface时要确保在GL线程（Sceneform的渲染线程）执行，必要时可以用Handler切换到GL线程。
• 生命周期管理：在Activity的onPause或onDestroy时，记得移除WebRTC的VideoSink，释放Surface和ExternalTexture，避免内存泄漏。
• 格式兼容：如果遇到画面花屏或无显示，检查WebRTC的视频编码格式是否和Surface支持的格式匹配（优先用硬件加速的H.264格式）。
• 分辨率匹配：务必让SurfaceTexture的默认尺寸和WebRTC流的分辨率一致，否则会出现拉伸或黑边。

内容的提问来源于stack exchange，提问作者judicapo