如何在 webrtc 中实时流数据

Posted 2023-05-07

【中文标题】如何在 webrtc 中实时流数据

【英文标题】：how to live stream data in webrtc

【发布时间】：2021-10-13 19:12:41

【问题描述】：

我目前是 webrtc 的新手，我看过 webrtc 的视频，但问题是它只是一对一的，我想在特定 URL 上流式传输视频让我们说 test.com/live 以及访问此 URL 的人可以看到与普通点对点不同的流

navigator.mediaDevices
        .getUserMedia( video: true, audio: true )
        .then((currentStream) => 
            setStream(currentStream);

            myVideo.current.srcObject = currentStream;
        );

这是获取我的媒体数据的代码，我如何将这些数据流式传输到这个特定的 URL，请问我是 webrtc 的新手，谁能解释一下？

【问题讨论】：

您需要信令服务器将流/流媒体数据传递给打开该链接的任何用户

【参考方案1】：

这是我构建的视频流媒体的 sn-p，您可以创建数据流并附加它。 我希望这会很有用。

使用 WebRTC 进行点对点通信

<script>
    var RTCPeerConnection = null;
    var getUserMedia = null;
    var attachMediaStream = null;
    var reattachMediaStream = null;
    var webrtcDetectedBrowser = null;

    if (navigator.mozGetUserMedia) 
        console.log("This appears to be Firefox");

        webrtcDetectedBrowser = "firefox";

        // The RTCPeerConnection object.
        RTCPeerConnection = mozRTCPeerConnection;

        // The RTCSessionDescription object.
        RTCSessionDescription = mozRTCSessionDescription;

        // The RTCIceCandidate object.
        RTCIceCandidate = mozRTCIceCandidate;

        // Get UserMedia (only difference is the prefix).
        // Code from Adam Barth.
        getUserMedia = navigator.mozGetUserMedia.bind(navigator);

        // Attach a media stream to an element.
        attachMediaStream = function (element, stream) 
            console.log("Attaching media stream");
            element.src = URL.createObjectURL(stream);;
            element.play();
        ;

        reattachMediaStream = function (to, from) 
            console.log("Reattaching media stream");
            to.mozSrcObject = from.mozSrcObject;
            to.play();
        ;

        // Fake getVideo,AudioTracks
        MediaStream.prototype.getVideoTracks = function () 
            return [];
        ;

        MediaStream.prototype.getAudioTracks = function () 
            return [];
        ;
     else if (navigator.webkitGetUserMedia) 
        console.log("This appears to be Chrome");

        webrtcDetectedBrowser = "chrome";

        // The RTCPeerConnection object.
        RTCPeerConnection = webkitRTCPeerConnection;

        // Get UserMedia (only difference is the prefix).
        // Code from Adam Barth.
        getUserMedia = navigator.webkitGetUserMedia.bind(navigator);

        // Attach a media stream to an element.
        attachMediaStream = function (element, stream) 
            element.src = webkitURL.createObjectURL(stream);
        ;

        reattachMediaStream = function (to, from) 
            to.src = from.src;
        ;

        // The representation of tracks in a stream is changed in M26.
        // Unify them for earlier Chrome versions in the coexisting period.
        if (!webkitMediaStream.prototype.getVideoTracks) 
            webkitMediaStream.prototype.getVideoTracks = function () 
                return this.videoTracks;
            ;
            webkitMediaStream.prototype.getAudioTracks = function () 
                return this.audioTracks;
            ;
        

        // New syntax of getXXXStreams method in M26.
        if (!webkitRTCPeerConnection.prototype.getLocalStreams) 
            webkitRTCPeerConnection.prototype.getLocalStreams = function () 
                return this.localStreams;
            ;
            webkitRTCPeerConnection.prototype.getRemoteStreams = function () 
                return this.remoteStreams;
            ;
        
     else 
        console.log("Browser does not appear to be WebRTC-capable");
    

</script>