我目前正在尝试从udp到浏览器中的视频标签的h264格式的一些视频流。目前屏幕上没有显示任何内容,这意味着代码或视频格式/编解码器存在问题。在控制台中没有任何错误消息
当前的设置是这样的:
- PX4 Gazebo无人机模拟器在Windows子系统上运行,适用于Linux。该模拟器通过UDP以h.264格式流式传输视频-这通过在真实的无人机应用程序中查看视频来确认工作(QGroundControl)
- UDP到WebSocket的桥接,用于将原始数据包原样转发到在C#中运行的WebSocket服务器
- 带有视频标签和JavaScript的HTML页面,用于接收数据包并将其推送到视频标签-通过使用console.log,确认数据包接收正常且为base64格式
该页面的代码是:
<div>
<h2>Video</h2>
<video id="test-video" autoplay muted class="video-element"></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.12/signalr.min.js"></script>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl("/droneHub")
.build();
connection.binaryType = 'arraybuffer';
connection.start()
.then(() => {
console.log("Connected to SignalR hub");
connection.invoke("JoinGroup", "drone253"); // get this from the current drone
})
.catch(err => console.error("Error connecting to SignalR hub:", err));
// get video packets
if ('MediaSource' in window) {
let mediaSource = new MediaSource();
let sourceBuffer;
let bufferQueue = [];
mediaSource.addEventListener('sourceopen', function () {
sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E,mp4a.40.2"');
});
document.getElementById('test-video').src = URL.createObjectURL(mediaSource);
connection.on("Video", function (dataChunk) {
var byteArray = base64ToArrayBuffer(dataChunk);
console.log(dataChunk);
if (sourceBuffer && !sourceBuffer.updating) {
sourceBuffer.appendBuffer(byteArray);
}
});
} else {
console.error('MSE not supported by this browser.');
}
function base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
</script>
字符串
我期待着视频播放,但没有显示在屏幕上,也没有错误消息出现在日志中.我已经尝试改变在JavaScript上面的编解码器,但没有成功.我也尝试使用video.js和jmuxer也没有任何喜悦.
视频在QGroundControl中显示良好
QGroundControl camera feed
QGroundControl settings的
我还尝试使用FFMPEG和FFProbe来尝试检查流,并得到下面的错误消息(IP地址绝对正确)
Error message的
有没有人设法让这样的东西工作,或有任何想法如何让它工作?
1条答案
按热度按时间o3imoua41#
试试这个修改过的
base64ToArrayBuffer
函数.字符串
如果Base64给出了一个正确的十六进制字符串(* 例如:* 正确的二进制值字符串),这应该可以工作(播放视频)。一个正确的十六进制字符串可以 “除以2” 而不留下任何小数(没有分数)。
如果数据不是碎片MP4格式,它可能无法工作(无法播放)。