通过WebSocket将h.264从UDP流传输到浏览器

t1qtbnec  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(235)

我目前正在尝试从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
有没有人设法让这样的东西工作,或有任何想法如何让它工作?

o3imoua4

o3imoua41#

试试这个修改过的base64ToArrayBuffer函数.

function base64ToArrayBuffer(base64) 
{
    let binary_string = window.atob(base64);
    let len = ( binary_string.length / 2 );
    let bytes = new Uint8Array( len );
    
    for (let i = 0; i < len; i++) 
    {
        bytes[i] = parseInt( binary_string.substr(i*2, 2), 16 );
    }
    
    return bytes;
}

字符串
如果Base64给出了一个正确的十六进制字符串(* 例如:* 正确的二进制值字符串),这应该可以工作(播放视频)。一个正确的十六进制字符串可以 “除以2” 而不留下任何小数(没有分数)。
如果数据不是碎片MP4格式,它可能无法工作(无法播放)。

相关问题