javascript - 如何在 webrtc 中实时流数据

Question

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

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

            myVideo.current.srcObject = currentStream;
        });

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

标签： javascriptwebrtcpeerjs

Answer 1

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

与 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 get{Video,Audio}Tracks
        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>