Question

我有一个h.264视频流，该流通过WebSocket从服务器（node.js）传递到客户端（html，vanilla js）。我在浏览器中记录了原始的h.264控制台。我想将该视频流发送到html const [profile, setProfile] = React.useState(false); useEffect(() => { console.log(Cookies.get("logged-in")); if (Cookies.get("logged-in") === "true") { console.log("ciao"); setProfile(true); } }, []); return ( profile ? <> <AccountCircle /> </> : <> Log In </> );标签，并使其在其中实时显示视频。

服务器端：

<video>

客户端：

var wssV = new Server({ port: 3001 });
wssV.on("connection", function (ws) {
    var videoPORT = 11111;//port Tello uses for video
    var videoServer = dgram.createSocket('udp4');

    videoServer.on('listening', function () {
        var address = videoServer.address();
    });

    videoServer.on('message', function (message, remote) {
        ws.send( message );//raw h.264 video stream sent to front end
    });
    videoServer.bind(videoPORT);
});

html：

$(document).ready( function(){ 
    var videoWebSocket = new WebSocket("ws://localhost:3001");
    videoWebSocket.onerror = function(evt){console.log("ERROR:" + evt.data);};
    videoWebSocket.onopen = function(evt) { console.log("Video Connection open ..."); };

    videoWebSocket.onmessage = function(evt) { 
        console.log( evt.data );//raw h.264 encoded video stream 

        //HOW TO SEND THIS evt.data TO MY html video tag
    };

    videoWebSocket.onclose = function(evt) { console.log("Video Connection closed."); };
});

问题：

如何将传入的视频流附加到<video id="videoPlayer"> <source src="" type="video/mp4" codec="accl.42E01E"> </video>标签上？
<video>和src属性值应设置为什么？
是否可以通过设置codec属性直接流式传输h.264？

如果我完全错误地解决了此问题，请帮助我找到一种在浏览器中显示h.264视频流的方法。

Answer 1

如果我完全错误地解决了这个问题，那么请帮助我找到一种在浏览器中显示h.264视频流的方法。

您完全错误地解决了这个问题。使用媒体源扩展（MSE）。

有没有一种方法可以将h.264视频流转换为客户端Javascript可读的内容？

1 个答案: