{"id":103577,"date":"2025-03-28T20:26:43","date_gmt":"2025-03-28T15:56:43","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/video-streaming-tutorial-javascript-webrtc-streaming-example-libreremoteplay-l90\/"},"modified":"2025-03-28T20:26:43","modified_gmt":"2025-03-28T15:56:43","slug":"video-streaming-tutorial-javascript-webrtc-streaming-example-libreremoteplay-l90","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/video-streaming-tutorial-javascript-webrtc-streaming-example-libreremoteplay-l90\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u067e\u062e\u0634 \u0648\u06cc\u062f\u06cc\u0648. JavaScript Webrtc Streaming \u0645\u062b\u0627\u0644 \ud83c\udf10liberremoteplay"},"content":{"rendered":"
\n

\u0633\u0644\u0627\u0645 \u060c \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0641\u0642\u0637 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 GetDisplayMedia () (\u0635\u0641\u062d\u0647)) \u0641\u0642\u0637 \u062a\u0646\u0638\u06cc\u0645 \u0633\u0627\u062f\u0647 Webrtc \u0631\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc GetUsermedia () (\u062f\u0648\u0631\u0628\u06cc\u0646 \u060c \u0645\u06cc\u06a9\u0631\u0648\u0641\u0648\u0646) \u0646\u06cc\u0632 \u0645\u0639\u062a\u0628\u0631 \u0627\u0633\u062a.<\/p>\n

\u0627\u0648\u0644 \u0627\u06af\u0631 \u062f\u0631 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a\/\u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc WEBRTC \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0631\u062f \u062a\u0648\u062c\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u06cc\u062f \u060c \u0627\u06cc\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0645\u0642\u0627\u0644\u0627\u062a \u0633\u0631\u06cc Webrtc \u0628\u0631\u0627\u06cc JavaScript \u0648 Golang \u0627\u0633\u062a (\u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u062f\u0627\u0646\u0634 \u0639\u0645\u0648\u0645\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f Webrtc) \u0627\u0633\u062a.<\/p>\n

\u062f\u0631 \u0648\u0647\u0644\u0647 \u062f\u0648\u0645 \u060c \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f Medialchannels \u060c \u0622\u0646\u0686\u0647 \u0622\u0646\u0647\u0627 \u0647\u0633\u062a\u0646\u062f \u0648 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062f\u0631 WebApp \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n

\u062f\u0631 \u06cc\u06a9 PeerConnection \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0648 \u0646\u0648\u0639 \u06a9\u0627\u0646\u0627\u0644 \u060c Datachannels (\u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0647\u062f\u0641 \u06a9\u0644\u06cc \u0628\u06cc\u0646 \u0647\u0645\u0633\u0627\u0644\u0627\u0646) \u0648 MediaChannels (\u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0645\u0627\u0646\u0646\u062f \u0641\u06cc\u0644\u0645\/\u0635\u0648\u062a\u06cc) \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. MediaChannels \u0642\u0628\u0644 \u0627\u0632 \u0645\u062d\u06a9\u0645 \u0627\u062a\u0635\u0627\u0644 \u0645\u0646\u0641\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f \u0627\u0645\u0627 \u067e\u0627\u0631\u062a\u0648\u0631\u0647\u0627\u06cc \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0632\u0645\u0627\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u06cc\u0627 \u062f\u0633\u062a\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u0646\u062f.<\/p>\n

\u062c\u0631\u06cc\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 MediaChannels \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0641\u0642\u0637 \u0627\u0632 \u062c\u0639\u0628\u0647 \u062e\u0627\u0631\u062c \u0645\u06cc \u0634\u0648\u062f \u0627\u0645\u0627 \u0627\u06af\u0631 WebApp \u0634\u0645\u0627 \u0628\u0647 \u0631\u0641\u062a\u0627\u0631 \u062e\u0627\u0635\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0627\u0634\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u06a9\u062f\u06a9 \u0647\u0627\u06cc \u0648\u06cc\u062f\u0626\u0648\u06cc\u06cc\/\u0635\u0648\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06a9\u062f\u06a9 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0633\u062a\u0646\u062f \u0627\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0645\u0647 \u06a9\u062f\u06a9 \u0647\u0627 \u0647\u0645\u06cc\u0634\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u0634\u0648\u0646\u062f (\u0622\u0646\u0647\u0627 \u0628\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\/\u0633\u062e\u062a \u0627\u0641\u0632\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0628\u0633\u062a\u0647 \u0647\u0633\u062a\u0646\u062f) \u0627\u0645\u0627 \u062c\u0627\u06cc \u0646\u06af\u0631\u0627\u0646\u06cc \u0646\u06cc\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u0646\u0641\u06cc \u06a9\u062f\u06a9 \u062a\u0648\u0633\u0637 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627\u0646\u0646\u062f Magic \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06a9\u062f\u06a9 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc Webrtc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n

\u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062f\u06a9 \u0647\u0627 \u060c \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u06a9\u062f\u06a9 \u0647\u0627\u06cc \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u0631\u062c\u06cc\u062d \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645. \u0633\u0627\u0628\u0642: [The codec I want the most, …, Other codecs, …, Worst codec]\u0628\u0634\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a Codecs \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 \u0645\u0634\u062a\u0631\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0634\u0648\u062f (\u0645\u0648\u0631\u062f\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0641\u06cc\u0644\u0645\/\u0635\u0648\u062a\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f).<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0644\u06cc \u06a9\u0648\u0686\u06a9 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f MediaChannels \u0622\u0645\u0648\u062e\u062a\u0647 \u0627\u06cc\u062f \u060c \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

\u2b50 \u0627\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u0627\u0635\u0644\u0627\u062d \u0634\u062f\u0647 \u0648 \u0633\u0627\u062f\u0647 \u0627\u0632 “\u0644\u06cc\u0628\u0631\u0647 \u0628\u0627\u0632\u06cc<\/strong>“\u0645\u062d\u0635\u0648\u0644 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\u06cc \u0645\u0646 \u06a9\u0647 \u0633\u0639\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06cc\u06a9 \u0628\u0627\u0634\u062f \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc \u0627\u0632 \u0631\u0627\u0647 \u062f\u0648\u0631 Steam<\/strong>\u0628\u0634\u0631 \u0627\u06af\u0631 \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f \u0628\u0647 \u06a9\u0633\u0628 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646 \u0647\u0633\u062a\u06cc\u062f \u060c \u0645\u0646 \u0627\u06cc\u0646 \u0633\u0631\u06cc \u0631\u0627 \u0627\u062f\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f \u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0644\u062d\u0638\u0647 \u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a<\/p>\n

<\/p>\n

\ud83d\udcd8 \u0645\u062b\u0627\u0644 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u062a\u0627 \u0645\u06cc\u0632\u0628\u0627\u0646 (\u06a9\u0647 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f)<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0633\u06cc\u06af\u0646\u0627\u0644\u06cc\u0633\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 WebSocket \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0645\u0646 \u0622\u0646 \u0631\u0627 WS () \u0645\u06cc \u0646\u0627\u0645\u0645 ()<\/p>\n

\u0628\u0639\u062f \u0647\u0645\u0647 \u0645\u0646\u0637\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646 JS \u062e\u0648\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u0646\u0648\u0634\u062a<\/p>\n

\n
\n\/\/ PeerConnection declaration (note that you will need to specify iceServers)<\/span>\nlet<\/span> peerConnection<\/span> =<\/span> peerConnection<\/span> =<\/span> new<\/span> RTCPeerConnection<\/span>({<\/span>iceServers<\/span>});;<\/span>\n\n\/\/ This function returns the media stream generated by getDisplayMedia or<\/span>\n\/\/ undefined if the user rejects to share screen.<\/span>\n\/\/ Video and Audio properties can be objects to specify some parameters<\/span>\n\/\/ like resolution, frame rate, ...<\/span>\nasync<\/span> function<\/span> getDisplayMediaStream<\/span>(<\/span>resolution<\/span>,<\/span> idealFrameRate<\/span> maxFramerate<\/span>)<\/span> {<\/span>\n    try<\/span> {<\/span>\n        const<\/span> mediastream<\/span> =<\/span> await<\/span> navigator<\/span>.<\/span>mediaDevices<\/span>.<\/span>getDisplayMedia<\/span>({<\/span>\n            video<\/span>:<\/span> true<\/span>,<\/span>\n            audio<\/span>:<\/span> true<\/span>,<\/span>\n        });<\/span>\n\n        return<\/span> mediastream<\/span>;<\/span>\n    }<\/span> catch <\/span>(<\/span>e<\/span>)<\/span> {<\/span>\n        return<\/span> undefined<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n\npeerConnection<\/span>.<\/span>onicecandidate<\/span> =<\/span> async <\/span>(<\/span>event<\/span>)<\/span> =><\/span> {<\/span>\n    if <\/span>(<\/span>event<\/span>.<\/span>candidate<\/span>)<\/span> {<\/span>\n        const<\/span> data<\/span> =<\/span> {<\/span>\n            type<\/span>:<\/span> '<\/span>candidate<\/span>'<\/span>,<\/span>\n            candidate<\/span>:<\/span> event<\/span>.<\/span>candidate<\/span>.<\/span>toJSON<\/span>(),<\/span>\n            role<\/span>:<\/span> '<\/span>host<\/span>'<\/span>\n        };<\/span>\n\n        return<\/span> ws<\/span>().<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>data<\/span>));<\/span>\n\n    }<\/span>\n\n    const<\/span> answer<\/span> =<\/span> peerConnection<\/span>?.<\/span>localDescription<\/span>?.<\/span>toJSON<\/span>();<\/span>\n    const<\/span> data<\/span> =<\/span> {<\/span>\n        type<\/span>:<\/span> '<\/span>answer<\/span>'<\/span>,<\/span>\n        answer<\/span>,<\/span>\n        role<\/span>:<\/span> '<\/span>host<\/span>'<\/span>\n    };<\/span>\n\n    return<\/span> ws<\/span>().<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>data<\/span>));<\/span>\n\n};<\/span>\n\nlet<\/span> offerArrived<\/span> =<\/span> false<\/span>\n\nasync<\/span> function<\/span> onSignalArrive<\/span>(<\/span>data<\/span>)<\/span> {<\/span>\n\n    const<\/span> {<\/span> type<\/span>,<\/span> offer<\/span>,<\/span> candidate<\/span>,<\/span> role<\/span> }<\/span> =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>data<\/span>);<\/span>\n\n    if <\/span>(<\/span>role<\/span> !==<\/span> '<\/span>client<\/span>'<\/span>)<\/span> return<\/span>;<\/span>\n\n    if <\/span>(<\/span>type<\/span> ===<\/span> \"<\/span>candidate<\/span>\"<\/span>)<\/span> {<\/span>\n        try<\/span> {<\/span>peerConnection<\/span>.<\/span>addIceCandidate<\/span>(<\/span>candidate<\/span>)}<\/span> catch<\/span> {<\/span>\/** *\/<\/span>}<\/span>\n        return<\/span>\n    }<\/span>\n\n    if <\/span>(<\/span>type<\/span> !==<\/span> '<\/span>offer<\/span>'<\/span>)<\/span> return<\/span>;<\/span>\n    if <\/span>(<\/span>!<\/span>offer<\/span> ||<\/span> offerArrived<\/span>)<\/span> return<\/span>;<\/span>\n\n    try<\/span> {<\/span>\n        await<\/span> peerConnection<\/span>.<\/span>setRemoteDescription<\/span>(<\/span>offer<\/span>);<\/span>\n    }<\/span> catch <\/span>(<\/span>e<\/span>)<\/span> {<\/span>\n        console<\/span>.<\/span>error<\/span>(<\/span>e<\/span>)<\/span>\n        return<\/span>\n    }<\/span>\n    offerArrived<\/span> =<\/span> true<\/span>;<\/span>\n\n    const<\/span> stream<\/span> =<\/span> await<\/span> getDisplayMediaStream<\/span>(<\/span>resolution<\/span>,<\/span> idealFrameRate<\/span>,<\/span> maxFramerate<\/span>);<\/span>\n\n    \/\/ Here I add MediaStream tracks to the WebRTC Peerconnection<\/span>\n    stream<\/span>?.<\/span>getTracks<\/span>().<\/span>forEach<\/span>((<\/span>track<\/span>)<\/span> =><\/span> {<\/span>\n        if <\/span>(<\/span>!<\/span>stream<\/span>)<\/span> return<\/span>;<\/span>\n        peerConnection<\/span>?.<\/span>addTrack<\/span>(<\/span>track<\/span>,<\/span> stream<\/span>);<\/span>\n    });<\/span>\n\n    try<\/span> {<\/span>\n\n        await<\/span> peerConnection<\/span>.<\/span>setLocalDescription<\/span>(<\/span>await<\/span> peerConnection<\/span>.<\/span>createAnswer<\/span>());<\/span>\n\n    }<\/span> catch <\/span>(<\/span>e<\/span>)<\/span> {<\/span>\n        console<\/span>.<\/span>error<\/span>(<\/span>e<\/span>)<\/span>\n        return<\/span>\n    }<\/span>\n\n}<\/span>\n\n\nconst<\/span> cllbck<\/span> =<\/span> (<\/span>ev<\/span>)<\/span> =><\/span>  onSignalArrive<\/span>(<\/span>ev<\/span>.<\/span>data<\/span>)<\/span>\nws<\/span>().<\/span>addEventListener<\/span>(<\/span>\"<\/span>message<\/span>\"<\/span>,<\/span> cllbck<\/span>)<\/span>\nunlistenerStreamingSignal<\/span> =<\/span> ()<\/span> =><\/span> ws<\/span>().<\/span>removeEventListener<\/span>(<\/span>\"<\/span>message<\/span>\"<\/span>,<\/span> cllbck<\/span>)<\/span>\nreturn<\/span>\n\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\ud83d\udcd8 \u0645\u062b\u0627\u0644 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0645\u0634\u062a\u0631\u06cc (\u06a9\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0648\u06cc\u062f\u06cc\u0648\/\u0635\u0648\u062a\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f)<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0633\u06cc\u06af\u0646\u0627\u0644\u06cc\u0633\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 WebSocket \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0645\u0646 \u0622\u0646 \u0631\u0627 WS () \u0645\u06cc \u0646\u0627\u0645\u0645 ()<\/p>\n
\u0627\u0639\u0644\u0627\u0645 \u0639\u0646\u0635\u0631 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc HTML<\/p>\n
\n