(ਲਗਭਗ) ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਬੇਕਾਰ ਵੈਬਕੈਮ ਸਟ੍ਰੀਮਿੰਗ। ਭਾਗ 2. WebRTC

ਕਿਸੇ ਤਰ੍ਹਾਂ ਵਿੱਚ ਇਕ ਪੁਰਾਣੇ ਅਤੇ ਪਹਿਲਾਂ ਹੀ ਛੱਡੇ ਗਏ ਲੇਖਾਂ ਤੋਂ, ਮੈਂ ਇਸ ਬਾਰੇ ਲਿਖਿਆ ਹੈ ਕਿ ਤੁਸੀਂ ਵੈਬਸਾਕੇਟ ਰਾਹੀਂ ਕੈਨਵਸ ਤੋਂ ਵੀਡੀਓ ਨੂੰ ਕਿੰਨੀ ਆਸਾਨੀ ਅਤੇ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਪ੍ਰਸਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਉਸ ਲੇਖ ਵਿੱਚ, ਮੈਂ ਸੰਖੇਪ ਵਿੱਚ ਇਸ ਬਾਰੇ ਗੱਲ ਕੀਤੀ ਸੀ ਕਿ ਕੈਮਰੇ ਤੋਂ ਵੀਡੀਓ ਕਿਵੇਂ ਕੈਪਚਰ ਕਰਨਾ ਹੈ ਅਤੇ ਮਾਈਕ੍ਰੋਫੋਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਵਾਜ਼ ਕਿਵੇਂ ਕਰਨੀ ਹੈ MediaStream API, ਪ੍ਰਾਪਤ ਹੋਈ ਸਟ੍ਰੀਮ ਨੂੰ ਕਿਵੇਂ ਏਨਕੋਡ ਕਰਨਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਵੈਬਸਾਕੇਟ ਰਾਹੀਂ ਸਰਵਰ ਨੂੰ ਕਿਵੇਂ ਭੇਜਣਾ ਹੈ। ਹਾਲਾਂਕਿ, ਅਸਲ ਵਿੱਚ ਉਹ ਅਜਿਹਾ ਨਹੀਂ ਕਰਦੇ, ਪ੍ਰਸਾਰਣ ਲਈ ਉਹ ਜਾਂ ਤਾਂ ਵਿਸ਼ੇਸ਼ ਸੌਫਟਵੇਅਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਜਿਸ ਨੂੰ ਸਥਾਪਿਤ ਅਤੇ ਸੰਰਚਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: ਬੰਦ, ਇਹ ਹੋ ਸਕਦਾ ਹੈ ਓਪਨ ਬਰਾਡਕਾਸਟ ਸੌਫਟਵੇਅਰ, ਜਾਂ ਉਹ WebRTC ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਜੋ ਕਿ ਬਾਕਸ ਦੇ ਬਿਲਕੁਲ ਬਾਹਰ ਕੰਮ ਕਰਦਾ ਹੈ, ਯਾਨੀ ਇਸ ਨੂੰ ਕਿਸੇ ਵੀ ਪਲੱਗਇਨ a la ਫਲੈਸ਼ ਪਲੇਅਰ ਦੀ ਸਥਾਪਨਾ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਜੋ ਦਸੰਬਰ ਵਿੱਚ ਪਹਿਲਾਂ ਹੀ Chromium ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਕੱਟਿਆ ਜਾਵੇਗਾ।

ਅੱਜ ਅਸੀਂ WebRTC ਬਾਰੇ ਗੱਲ ਕਰਾਂਗੇ।

ਵੈੱਬ ਰੀਅਲ-ਟਾਈਮ ਕਮਿਊਨੀਕੇਸ਼ਨ (WebRTC) ਇੱਕ ਸਿੰਗਲ ਪ੍ਰੋਟੋਕੋਲ ਨਹੀਂ ਹੈ, ਇਹ ਮਿਆਰਾਂ, ਪ੍ਰੋਟੋਕੋਲਾਂ ਅਤੇ JavaScript API ਦਾ ਇੱਕ ਪੂਰਾ ਸੰਗ੍ਰਹਿ ਹੈ ਜੋ ਇਕੱਠੇ ਪੀਅਰ-ਟੂ-ਪੀਅਰ ਰੀਅਲ-ਟਾਈਮ ਵੀਡੀਓ-ਆਡੀਓ ਸੰਚਾਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਅਤੇ ਕਿਸੇ ਵੀ ਟ੍ਰਾਂਸਫਰ ਕਰਨ ਲਈ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਬਾਈਨਰੀ ਡਾਟਾ ਆਮ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸਾਥੀਆਂ ਵਜੋਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ ਇਹ ਇੱਕ ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨ ਵੀ ਹੋ ਸਕਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ। ਗਾਹਕਾਂ ਵਿਚਕਾਰ p2p ਸੰਚਾਰ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ, ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਵੀਡੀਓ ਅਤੇ ਆਡੀਓ ਏਨਕੋਡਿੰਗ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਕਈ ਤਰ੍ਹਾਂ ਦੇ ਨੈੱਟਵਰਕ ਪ੍ਰੋਟੋਕੋਲ ਲਈ ਸਮਰਥਨ, ਬ੍ਰਾਊਜ਼ਰ (OS ਲੇਅਰਾਂ ਰਾਹੀਂ) ਨਾਲ ਹਾਰਡਵੇਅਰ ਦੀ ਆਪਸੀ ਤਾਲਮੇਲ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ: ਵੈਬਕੈਮ, ਸਾਊਂਡ ਕਾਰਡ। ਡਿਵੈਲਪਰ ਦੀ ਸਹੂਲਤ ਲਈ ਜਾਵਾ ਸਕ੍ਰਿਪਟ API ਐਬਸਟਰੈਕਸ਼ਨ ਦੇ ਪਿੱਛੇ ਟੈਕਨਾਲੋਜੀ ਦਾ ਇਹ ਸਾਰਾ ਹੌਜਪੌਜ ਲੁਕਿਆ ਹੋਇਆ ਹੈ।

ਇਹ ਸਭ ਤਿੰਨ APIs ਤੱਕ ਉਬਲਦਾ ਹੈ:

• MediaStream API - ਪਿਛਲੀ ਵਾਰ ਤੋੜਿਆ, ਅੱਜ ਮੈਂ ਉਸ ਬਾਰੇ ਥੋੜਾ ਹੋਰ ਲਿਖਾਂਗਾ. ਹਾਰਡਵੇਅਰ ਤੋਂ ਵੀਡੀਓ / ਆਡੀਓ ਸਟ੍ਰੀਮ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੇਵਾ ਕਰਦਾ ਹੈ

• RTCPeerConnection - ਦੋ ਗਾਹਕਾਂ ਵਿਚਕਾਰ ਸੰਚਾਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ (p2p)

• RTCDataChannel - ਦੋ ਗਾਹਕਾਂ ਵਿਚਕਾਰ ਆਪਹੁਦਰੇ ਡੇਟਾ ਨੂੰ ਟ੍ਰਾਂਸਫਰ ਕਰਨ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ

ਪ੍ਰਸਾਰਣ ਲਈ ਆਡੀਓ ਅਤੇ ਵੀਡੀਓ ਸਟ੍ਰੀਮਾਂ ਨੂੰ ਤਿਆਰ ਕਰਨਾ

ਇਹ ਸਭ ਵੈਬਕੈਮ ਅਤੇ ਮਾਈਕ੍ਰੋਫੋਨ ਮੀਡੀਆ ਸਟ੍ਰੀਮ ਨੂੰ "ਕੈਪਚਰ ਕਰਨ" ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ। ਬੇਸ਼ੱਕ, ਕੱਚੀਆਂ ਸਟ੍ਰੀਮਾਂ ਟੈਲੀਕਾਨਫਰੰਸ ਦੇ ਆਯੋਜਨ ਲਈ ਢੁਕਵੇਂ ਨਹੀਂ ਹਨ, ਹਰੇਕ ਸਟ੍ਰੀਮ 'ਤੇ ਕਾਰਵਾਈ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: ਗੁਣਵੱਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰੋ, ਵੀਡੀਓ ਨਾਲ ਆਡੀਓ ਨੂੰ ਸਮਕਾਲੀ ਬਣਾਓ, ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਵਿੱਚ ਸਮਕਾਲੀਕਰਨ ਚਿੰਨ੍ਹ ਰੱਖੋ, ਅਤੇ ਚੈਨਲ ਦੀ ਲਗਾਤਾਰ ਬਦਲ ਰਹੀ ਬੈਂਡਵਿਡਥ ਦੇ ਅਨੁਸਾਰੀ ਬਿੱਟਰੇਟ ਨੂੰ ਯਕੀਨੀ ਬਣਾਓ। . ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਸਭ ਦਾ ਧਿਆਨ ਰੱਖਦਾ ਹੈ, ਡਿਵੈਲਪਰ ਨੂੰ ਮੀਡੀਆ ਸਟ੍ਰੀਮਾਂ ਲਈ ਏਨਕੋਡਿੰਗ ਪ੍ਰਦਾਨ ਕਰਨ ਬਾਰੇ ਚਿੰਤਾ ਕਰਨ ਦੀ ਵੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇੱਕ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ, ਕੈਪਚਰਿੰਗ, ਗੁਣਵੱਤਾ ਵਿੱਚ ਸੁਧਾਰ (ਧੁਨੀ ਤੋਂ ਗੂੰਜ ਅਤੇ ਸ਼ੋਰ ਨੂੰ ਹਟਾਓ, ਤਸਵੀਰ ਵਿੱਚ ਸੁਧਾਰ ਕਰੋ), ਵੀਡੀਓ ਅਤੇ ਆਡੀਓ ਏਨਕੋਡਿੰਗ ਲਈ ਪਹਿਲਾਂ ਹੀ ਸਾਫਟਵੇਅਰ ਲੇਅਰ ਹਨ। ਲੇਅਰ ਸਕੀਮ ਨੂੰ ਅੰਜੀਰ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ। 1:

ਚੌਲ. 1. ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਆਡੀਓ ਅਤੇ ਵੀਡੀਓ ਪ੍ਰੋਸੈਸਿੰਗ ਦੀਆਂ ਪਰਤਾਂ

ਸਾਰੀ ਪ੍ਰੋਸੈਸਿੰਗ ਸਿੱਧੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੁੰਦੀ ਹੈ, ਕੋਈ ਵਾਧੂ ਨਹੀਂ। ਕੋਈ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਨਹੀਂ। ਹਾਲਾਂਕਿ, 2020 ਲਈ ਚੀਜ਼ਾਂ ਅਜੇ ਵੀ ਇੰਨੀਆਂ ਗੁਲਾਬੀ ਨਹੀਂ ਹਨ. ਅਜਿਹੇ ਬ੍ਰਾਊਜ਼ਰ ਹਨ ਜੋ ਅਜੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ MediaStream API, ਤੁਸੀਂ ਲਿੰਕ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਬਿਲਕੁਲ ਹੇਠਾਂ ਅਨੁਕੂਲਤਾ ਸਾਰਣੀ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ। ਖਾਸ ਕਰਕੇ IE ਫਿਰ ਨਿਰਾਸ਼ਾਜਨਕ ਹੈ।

ਤੁਸੀਂ ਪ੍ਰਾਪਤ ਕੀਤੀਆਂ ਸਟ੍ਰੀਮਾਂ ਦੇ ਨਾਲ ਬਹੁਤ ਦਿਲਚਸਪ ਚੀਜ਼ਾਂ ਕਰ ਸਕਦੇ ਹੋ: ਤੁਸੀਂ ਕਲੋਨ ਕਰ ਸਕਦੇ ਹੋ, ਵੀਡੀਓ ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ, ਆਡੀਓ ਗੁਣਵੱਤਾ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਮੀਡੀਆ ਸਟ੍ਰੀਮ ਸਟ੍ਰੀਮ ਨੂੰ ਲੈ ਅਤੇ "ਹੁੱਕ" ਕਰ ਸਕਦੇ ਹੋ html ਪੰਨੇ 'ਤੇ ਆਪਣੇ ਆਪ ਨੂੰ ਟੈਗ ਕਰੋ ਅਤੇ ਦੇਖੋ। ਜਾਂ ਤੁਸੀਂ ਕੈਨਵਸ 'ਤੇ ਇੱਕ ਸਟ੍ਰੀਮ ਬਣਾ ਸਕਦੇ ਹੋ, ਅਤੇ WebGL ਜਾਂ CSS3 ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਵੀਡੀਓ 'ਤੇ ਵੱਖ-ਵੱਖ ਫਿਲਟਰ ਲਗਾ ਸਕਦੇ ਹੋ, ਪ੍ਰੋਸੈਸ ਕੀਤੇ ਵੀਡੀਓ ਨੂੰ ਕੈਨਵਸ ਤੋਂ ਕੈਪਚਰ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਨੈੱਟਵਰਕ 'ਤੇ ਸਰਵਰ 'ਤੇ ਭੇਜ ਸਕਦੇ ਹੋ, ਟ੍ਰਾਂਸਕੋਡ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਹਰ ਕਿਸੇ ਨੂੰ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ (ਹੈਲੋ ਬਿਗੋ ਲਾਈਵ, ਟਵਿਚ ਅਤੇ ਹੋਰ). ਇੱਥੇ ਮੈਂ ਵਿਸ਼ਲੇਸ਼ਣ ਨਹੀਂ ਕਰਾਂਗਾ ਕਿ ਅਜਿਹੀਆਂ ਚੀਜ਼ਾਂ ਕਿਵੇਂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਮੈਂ ਵੈੱਬ 'ਤੇ ਮਿਲੀਆਂ ਕੁਝ ਉਦਾਹਰਣਾਂ ਦੇਵਾਂਗਾ:

https://jeeliz.com/ - ਮੁੰਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਰੀਅਲਟਾਈਮ ਸੀਵੀ ਕਰ ਰਹੇ ਹਨ। ਉਨ੍ਹਾਂ ਕੋਲ ਇੱਕ ਪੂਰਾ ਹੈ ਅਸਲਾ ਕੈਨਵਸ 'ਤੇ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਵੱਖ-ਵੱਖ js ਲਾਇਬ੍ਰੇਰੀਆਂ: ਚਿਹਰਿਆਂ, ਵਸਤੂਆਂ ਦਾ ਪਤਾ ਲਗਾਉਣਾ, ਫਿਲਟਰ ਲਗਾਉਣਾ (ਮਾਸਕ, ਜਿਵੇਂ ਕਿ ਇੰਸਟਾਗ੍ਰਾਮ ਵਿੱਚ), ਆਦਿ। ਤੁਸੀਂ ਵਾਧੂ ਪਲੱਗਇਨਾਂ ਤੋਂ ਬਿਨਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਰੀਅਲ-ਟਾਈਮ ਵੀਡੀਓ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰੋਸੈਸ ਕਰ ਸਕਦੇ ਹੋ ਇਸਦੀ ਇੱਕ ਸ਼ਾਨਦਾਰ ਉਦਾਹਰਣ।

Canvas captureStream API - ਕੈਨਵਸ ਤੋਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਕੈਪਚਰ ਕਰਨ ਲਈ API ਦਸਤਾਵੇਜ਼। Chrome, Opera ਅਤੇ Firefox ਵਿੱਚ ਪਹਿਲਾਂ ਹੀ ਸਮਰਥਿਤ ਹੈ

RTCPeerConnection

ਇਸ ਲਈ ਅਸੀਂ ਬਿੰਦੂ 'ਤੇ ਆਏ, ਪਰ ਅਸਲ ਵਿੱਚ ਵੀਡੀਓ ਨੂੰ ਕਿਸੇ ਹੋਰ ਉਪਭੋਗਤਾ ਨੂੰ ਕਿਵੇਂ ਟ੍ਰਾਂਸਫਰ ਕਰਨਾ ਹੈ? ਸਾਹਮਣੇ ਆਉਂਦਾ ਹੈ RTCPeerConnection. ਸੰਖੇਪ ਵਿੱਚ, ਲਗਭਗ ਇਸ ਪੜਾਅ 'ਤੇ ਤੁਹਾਨੂੰ ਇੱਕ RTCPeerConnection ਵਸਤੂ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ:

const peerConnection = new RTCPeerConnection({
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
});

ਅਸੀਂ iceServers ਨੂੰ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੇ ਰੂਪ ਵਿੱਚ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹਾਂ - ਇਹ ਇੱਕ ਸਰਵਰ ਹੈ ਜੋ NAT'om ਦੇ ਪਿੱਛੇ ਦੋ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿਚਕਾਰ ਇੱਕ ਕੁਨੈਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਭਾਵ, ਸਮੱਸਿਆ ਇੱਥੇ ਹੱਲ ਹੋ ਗਈ ਹੈ: ਵਾਰਤਾਕਾਰ ਦਾ ਆਈਪੀ ਕਿਵੇਂ ਪਤਾ ਲਗਾਇਆ ਜਾਵੇ ਜੇ ਉਹ ਆਪਣੇ ਪ੍ਰਦਾਤਾ ਦੇ NAT ਦੇ ਪਿੱਛੇ ਹੈ? ICE ਪ੍ਰੋਟੋਕੋਲ ਬਚਾਅ ਲਈ ਆਉਂਦਾ ਹੈ, ਵਾਸਤਵ ਵਿੱਚ, ICE ਬਿਲਕੁਲ ਵੀ WebRTC 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ, ਪਰ ਬਾਅਦ ਵਿੱਚ ਇਸ ਬਾਰੇ ਹੋਰ।

ਪਹਿਲਾਂ, ਸਾਨੂੰ ਯੂਜ਼ਰਮੀਡੀਆ ਸਟ੍ਰੀਮਾਂ ਮਿਲੀਆਂ:

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
  // Usermedia-потоки, обычно это видео и аудио 
  const tracks = stream.getTracks();

   for (const track of tracks) {
     // каждый трек присоединяем к peerConnection
     peerConnection.addTrack(track);
   }
}).catch(console.error);

ਅੱਗੇ, ਪੀਅਰ ਕਨੈਕਸ਼ਨ 'ਤੇ ਗੱਲਬਾਤ ਲਈ ਲੋੜੀਂਦੀ ਘਟਨਾ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ, ਜਿਸ ਦੇ ਹੈਂਡਲਰ ਵਿੱਚ ਸਾਨੂੰ ਇੱਕ ਪੇਸ਼ਕਸ਼ ਬਣਾਉਣੀ ਚਾਹੀਦੀ ਹੈ (SDP - ਸੈਸ਼ਨ ਵਰਣਨ ਪ੍ਰੋਟੋਕੋਲ ਦੇ ਰੂਪ ਵਿੱਚ) ਅਤੇ ਇਸਨੂੰ setLocalDescription ਵਿਧੀ ਰਾਹੀਂ ਪੀਅਰ ਕਨੈਕਸ਼ਨ ਨੂੰ ਸੌਂਪਣਾ ਚਾਹੀਦਾ ਹੈ। SDP ਬਾਰੇ - ਇਹ ਕੀ ਹੈ ਅਤੇ ਪੇਸ਼ਕਸ਼ ਅਤੇ ਜਵਾਬ ਦੇ ਫਾਰਮੈਟਾਂ ਬਾਰੇ - ਅਸੀਂ ਅੱਗੇ ਗੱਲ ਕਰਾਂਗੇ।

LocalDescription peerConnection ਨਿਰਧਾਰਤ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਬ੍ਰਾਊਜ਼ਰ ਆਈਸ ਉਮੀਦਵਾਰਾਂ ਨੂੰ "ਇਕੱਠਾ" ਕਰਦਾ ਹੈ, ਯਾਨੀ NAT ਰਾਹੀਂ ਸੰਚਾਰ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕੇ ਲੱਭਦਾ ਹੈ। ਆਨਿਸਗੈਦਰਿੰਗਸਟੇਟਚੇਂਜ ਘਟਨਾ ਨੂੰ ਅੱਗ ਲੱਗ ਗਈ। onicegatheringstatechange ਹੈਂਡਲਰ ਵਿੱਚ, ਅਸੀਂ ਸਾਥੀਆਂ ਵਿਚਕਾਰ ਸੈਸ਼ਨ ਵਰਣਨ ਦਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ webrtc-signaling-server ਸਟ੍ਰੀਮ ਨਾਲ ਇੱਕ ਕਨੈਕਸ਼ਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਾਂ:

peerConnection.oniceconnectionstatechange = (event) => {
      console.log('Connection state: ', peerConnection.iceConnectionState);

      if (peerConnection.iceConnectionState === 'connected') {
        // Можем активировать кнопку Start broadcast
        setBroadcasting(true);
        setBroadcastingBtnActive(true);
      }
    };

// Событие срабатывает сразу, как только добавился медаиапоток в peerConnection
peerConnection.onnegotiationneeded = (event) => {
      // Создаем и назначаем SDP offer
      peerConnection.createOffer().
        then((offer) => peerConnection.setLocalDescription(offer)).
        catch(console.error);
    };

// Событие срабатывает каждый раз, как появляется ICE кандидат
peerConnection.onicegatheringstatechange = (ev) => {
      let connection = ev.target;

      // Now we can activate broadcast button
      if (connection.iceGatheringState === 'complete') {
        let delay = 50;
        let tries = 0;
        let maxTries = 3;

        let timerId = setTimeout(function allowStreaming() {
          if (isOnline) {
            setBroadcastingBtnActive(true);
            return;
          }

          if (tries < maxTries) {
            tries += 1;
            delay *= 2;
            timerId = setTimeout(allowStreaming, delay);
          } else {
            // TODO: show user notification
            console.error("Can't connect to server");

            alert("Can't connect to server");
          }
        }, delay);
      }
    };

webrtc-signaling-server ਇੱਕ ਸਰਵਰ ਹੈ ਜੋ ਦੋ ਸਾਥੀਆਂ ਵਿਚਕਾਰ ਸੈਸ਼ਨ ਦੇ ਵਰਣਨ ਦਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਹੈ, ਇਹ ਕਿਸੇ ਵੀ PL 'ਤੇ ਸਭ ਤੋਂ ਸਰਲ ਵੈਬਸਾਕੇਟ ਜਾਂ xhr-ਸਰਵਰ ਹੋ ਸਕਦਾ ਹੈ। ਇਸਦਾ ਕੰਮ ਸਧਾਰਨ ਹੈ: ਇੱਕ ਪੀਅਰ ਤੋਂ ਸੈਸ਼ਨ ਦੇ ਵੇਰਵੇ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਅਤੇ ਇਸਨੂੰ ਦੂਜੇ ਵਿੱਚ ਟ੍ਰਾਂਸਫਰ ਕਰਨਾ।

ਸੈਸ਼ਨ ਦੇ ਵੇਰਵਿਆਂ ਦੇ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਤੋਂ ਬਾਅਦ, ਦੋਵੇਂ ਧਿਰਾਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮਾਂ ਨੂੰ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਤਿਆਰ ਹਨ, ਜਿਸ ਪਾਸੇ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਪ੍ਰਾਪਤ ਹੁੰਦੀ ਹੈ, ਓਨਟਰੈਕ ਇਵੈਂਟ ਨੂੰ ਪੀਅਰ ਕਨੈਕਸ਼ਨ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਦੇ ਹੈਂਡਲਰ ਵਿੱਚ, ਪ੍ਰਾਪਤ ਕੀਤੇ ਟਰੈਕਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਅਤੇ ਆਪਣੇ ਮਨਪਸੰਦ ਵਾਰਤਾਕਾਰ ਨੂੰ ਦੇਖੋ। ਹੋਰ ਥਿਊਰੀ ਅਤੇ ਵੇਰਵੇ.

ਲਿੰਕ ਅਤੇ ਸਾਹਿਤ:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - ਦਸਤਾਵੇਜ਼ RTCPeerConnection

https://github.com/pion/webrtc - ਜਾਂਦੇ ਸਮੇਂ WebRTC ਪ੍ਰੋਟੋਕੋਲ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

https://webrtcforthecurious.com/ - pion ਦੇ ਸਿਰਜਣਹਾਰਾਂ ਦੀ ਇੱਕ ਕਿਤਾਬ

https://hpbn.co/ - ਬੁੱਕ ਹਾਈ ਪਰਫਾਰਮੈਂਸ ਬ੍ਰਾਊਜ਼ਰ ਨੈੱਟਵਰਕਿੰਗ। ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਉੱਚ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਦੇ ਮੁੱਦਿਆਂ 'ਤੇ ਵਿਸਥਾਰ ਨਾਲ ਚਰਚਾ ਕੀਤੀ ਗਈ ਹੈ। ਅੰਤ ਵਿੱਚ, WebRTC ਦਾ ਵਰਣਨ ਕੀਤਾ ਗਿਆ ਹੈ। ਕਿਤਾਬ ਬੇਸ਼ੱਕ ਪੁਰਾਣੀ ਹੈ (2013), ਪਰ ਇਸਦੀ ਸਾਰਥਕਤਾ ਨਹੀਂ ਗੁਆਉਂਦੀ।

ਅਗਲੇ ਹਿੱਸੇ ਵਿੱਚ, ਮੈਂ ਥਿਊਰੀ ਦਾ ਥੋੜਾ ਹੋਰ ਹਿੱਸਾ ਦੇਣਾ ਚਾਹੁੰਦਾ ਹਾਂ ਅਤੇ ਅਭਿਆਸ ਵਿੱਚ ਪੀਓਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਰਵਰ 'ਤੇ ਇੱਕ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਦੇ ਰਿਸੈਪਸ਼ਨ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਦਰਸ਼ਕਾਂ ਨੂੰ ਅਗਲੇ ਪ੍ਰਸਾਰਣ ਲਈ ffmpeg ਦੁਆਰਾ HLS ਨੂੰ ਟ੍ਰਾਂਸਕੋਡਿੰਗ ਕਰਨਾ.

ਬੇਚੈਨ ਲਈ: twitch ਵਿੱਚ ਇੱਕ pion-ਅਧਾਰਿਤ ਸਰਵਰ ਦੁਆਰਾ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਲਈ ਇੱਕ ਵੈਬਕੈਮ ਤੋਂ ਵੀਡੀਓ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਦਾ ਮੇਰਾ ਬਹੁਤ ਹੀ ਕੱਚਾ ਪ੍ਰੋਟੋਟਾਈਪ (ਇਹ ਸਿਰਫ਼ ਇੱਕ ਪ੍ਰਯੋਗ ਹੈ)।

ਸਰੋਤ: www.habr.com