使用LAN网络摄像头流作为A帧中视频的源
我目前正在从事一个项目，在虚拟现实中我控制着一个机器人手臂。我正在使用A帧和oculus quest 1来完成这个任务。为了让用户看到他们正在用机器人手臂做什么，我想将指向arm的摄像头的视频流到Web应用程序中。摄像头和耳机都在同一个局域网上，所以我不需要视频可以从互联网上访问。
，到目前为止，我尝试了什么来播放摄像头：
- 使用OBS将udp、rtp和srt流到下面的url中：
- 协议://145.89.161.93:8087模式=侦听器
- 协议://127.0.0.1:8087模式=侦听器
- 议定书://145.89.161.93:8087
- 议定书://145.89.161.93:8087
- 流http，rtsp，rtp，udp使用vlc媒体播放器。
我试着观察了vlc中所有的obs流，唯一似乎起作用的就是使用mode=listener的srt流。但是，当我试图查看aframe的那条河流时，我没有工作。现在，obs不再允许我使用srt (我不知道为什么)。我会尝试重新安装obs看看这是否有帮助。
我试图在A帧中查看流：
<a-video src="protocol://145.89.161.93:8087" width="16" height="9" position="0 0 -10"></a-video><a-assets>
<video id="#webcam_stream" src="protocol://145.89.161.93:8087" playsinline> </video>
</a-assets>
<a-video src="#webcam_stream" width="16" height="9" position="0 0 -10"></a-video>http流似乎无法工作，因为Oculus连接的服务器使用https运行。由于耳机否则将不允许使用虚拟现实。对于其他流，A帧似乎不会给连接或未知源文件带来错误，但是它也不会显示流/视频。
其他的VLC流会产生一个跨原点错误，但是当我使用crossorigin=“匿名”时就会出现错误。但是，如果我这样做，a-视频组件就找不到#webcam_stream资产.
我认为这教程会有一点帮助，即使它不是一个框架。但是html代码是不可见的，所以它不太有用。
我对网络开发和流媒体这一主题并不十分了解，但这是我们项目的重要组成部分。所以任何帮助都是非常感谢的。
如果有人有一个解决方案，有一个远程网络摄像头流可见在A帧，预先存在的代码或一个总的方向/建议调查，这将是非常感谢。
回答 3
Stack Overflow用户
发布于 2021-12-13 16:00:03
好吧，经过大量的观察，我找到了解决问题的办法！有许多问题我必须解决：
- html5只支持有限数量的流协议。
- 流必须是安全的，因为VR应用程序是使用https托管的。
- 我们需要将视频应用到A帧中的一个实体上
- 我们需要启动实际的流。
- 我们不需要任何延迟
流协议
对于流协议，我最终使用了HLS。大多数浏览器和默认情况下都不支持HTML5。但是，通过使用HLS.js，我们可以很容易地添加这种支持。
安全性
使用该协议还可以解决我们的安全问题。由于HLS流基本上只是使用HTTP/HTTPS服务器提供的短视频段。因为我们的服务器是一个简单的https服务器，所以我们只需要在服务器内部的一个目录中输出HLS文件就可以使它们对应用程序可用。
如果您的流与应用程序不在同一台服务器上，则需要将CORS头添加到GET请求的HLS主机中。这是一个由要求库组成的HLS.js
A帧中实体的视频应用
要在A帧中的实体上应用流，我们需要一个<video>资产。在加载了该资产之后，我们可以使用脚本将流应用到资产上。然后，我们可以使用这个资产作为实体和纹理的源。
下面的代码正是这样做的。当实体在资产之后加载时，向<a-video>实体添加组件将在资产加载之后调用脚本。然后，我们可以使用该资产作为<a-video>实体的源。
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="hls.js"></script>
<script>
AFRAME.registerComponent('hls_stream', {
init: function(){
var video = document.getElementById('webcam_stream');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://ip:port/path_to_hls_file/filename.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://ip:port/path_to_hls_file/filename.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
}
})
</script>
</head>
<body>
<a-scene cursor="rayOrigin:mouse">
<a-assets>
<video id="webcam_stream" crossorigin="anonymous"></video>
</a-assets>
<a-video src="#webcam_stream" width="16" height="9" position="0 4.5 -20" hls_stream></a-video>
<a-entity id="camera" wasd-controls camera look-controls></a-entity>
<a-sky color="#111"></a-sky>
</a-scene>
</body>
</html>我怎样才能流
目前，我正在使用OBS创建HLS流。您可以发现如何使用OBS here OBS流HLS相对容易设置，并且允许更多地使用摄像头，因为您可以使用OBS捕获几乎任何视频、屏幕或其他输入源。
延迟
我还在苦苦挣扎的唯一一件事就是OBS的延迟。由于OBS的2秒段，并且由于OBS的HLS流的段列表的长度为4，所以通常延迟约8秒。这仍然比我想要的要大，但是现在它可以做，因为启动一个低延迟的HLS流是另一个问题的主题。
开始回放
大多数浏览器默认禁用视频文件的自动播放功能。因此，如果自动播放被禁用，则需要手动启动video.play()命令。或者您可以在浏览器的设置中启用自动播放，视频将自动启动。
Stack Overflow用户
发布于 2022-08-28 17:52:28
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
AFRAME.registerComponent('hls_stream', {
init: function(){
var video = document.getElementById('webcam_stream');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://ip:port/path_to_hls_file/filename.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://ip:port/path_to_hls_file/filename.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
}
})
</script>
</head>
<body>
<a-scene cursor="rayOrigin:mouse">
<a-assets>
<video id="webcam_stream" crossorigin="anonymous"></video>
</a-assets>
<a-video src="#webcam_stream" width="16" height="9" position="0 4.5 -20" hls_stream></a-video>
<a-entity id="camera" wasd-controls camera look-controls></a-entity>
<a-sky color="#111"></a-sky>
</a-scene>
</body>
</html>但不做自动播放
Stack Overflow用户
发布于 2022-09-02 08:48:37
好的，我找到了一个自动播放的解决方案，这要归功于松懈的支持。
<a-assets>
<video id="webcam_stream" autoplay playsinline muted loop="true" crossorigin="anonymous"></video>
</a-assets>https://stackoverflow.com/questions/70306702
复制相似问题
腾讯云开发者
