🥇 (ਲਗਭਗ) ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਬੇਕਾਰ ਵੈਬਕੈਮ ਸਟ੍ਰੀਮਿੰਗ। ਮੀਡੀਆ ਸਟ੍ਰੀਮ ਅਤੇ ਵੈਬਸਾਕਟ

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

ਅਡੋਬ ਫਲੈਸ਼, ਪਹਿਲਾਂ ਮੈਕਰੋਮੀਡੀਆ ਫਲੈਸ਼, ਇੱਕ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਣ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਪਲੇਟਫਾਰਮ ਹੈ। ਮੀਡੀਆ ਸਟ੍ਰੀਮ API ਦੀ ਜਾਣ-ਪਛਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਇੱਕ ਵੈਬਕੈਮ ਤੋਂ ਵੀਡੀਓ ਅਤੇ ਵੌਇਸ ਸਟ੍ਰੀਮ ਕਰਨ ਦੇ ਨਾਲ-ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕਈ ਤਰ੍ਹਾਂ ਦੀਆਂ ਕਾਨਫਰੰਸਾਂ ਅਤੇ ਚੈਟਾਂ ਬਣਾਉਣ ਲਈ ਅਮਲੀ ਤੌਰ 'ਤੇ ਇੱਕੋ ਇੱਕ ਪਲੇਟਫਾਰਮ ਸੀ। ਮੀਡੀਆ ਜਾਣਕਾਰੀ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਲਈ ਪ੍ਰੋਟੋਕੋਲ RTMP (ਰੀਅਲ ਟਾਈਮ ਮੈਸੇਜਿੰਗ ਪ੍ਰੋਟੋਕੋਲ) ਅਸਲ ਵਿੱਚ ਲੰਬੇ ਸਮੇਂ ਲਈ ਬੰਦ ਸੀ, ਜਿਸਦਾ ਮਤਲਬ ਸੀ: ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੀ ਸਟ੍ਰੀਮਿੰਗ ਸੇਵਾ ਨੂੰ ਹੁਲਾਰਾ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਅਡੋਬ ਤੋਂ ਸਾਫਟਵੇਅਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਕਾਫ਼ੀ ਦਿਆਲੂ ਬਣੋ - Adobe Media Server (AMS)।

2012 ਵਿੱਚ ਕੁਝ ਸਮੇਂ ਬਾਅਦ, Adobe ਨੇ ਲੋਕਾਂ ਨੂੰ "ਛੱਡ ਦਿੱਤਾ ਅਤੇ ਇਸਨੂੰ ਬਾਹਰ ਕੱਢ ਦਿੱਤਾ"। ਨਿਰਧਾਰਨ RTMP ਪ੍ਰੋਟੋਕੋਲ, ਜਿਸ ਵਿੱਚ ਤਰੁੱਟੀਆਂ ਸਨ ਅਤੇ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਅਧੂਰਾ ਸੀ। ਉਸ ਸਮੇਂ ਤੱਕ, ਡਿਵੈਲਪਰਾਂ ਨੇ ਇਸ ਪ੍ਰੋਟੋਕੋਲ ਦੇ ਆਪਣੇ ਖੁਦ ਦੇ ਲਾਗੂ ਕਰਨੇ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤੇ, ਅਤੇ Wowza ਸਰਵਰ ਪ੍ਰਗਟ ਹੋਇਆ. 2011 ਵਿੱਚ, Adobe ਨੇ RTMP-ਸਬੰਧਤ ਪੇਟੈਂਟਾਂ ਦੀ ਗੈਰ-ਕਾਨੂੰਨੀ ਵਰਤੋਂ ਲਈ Wowza ਦੇ ਖਿਲਾਫ ਇੱਕ ਮੁਕੱਦਮਾ ਦਾਇਰ ਕੀਤਾ; 4 ਸਾਲਾਂ ਬਾਅਦ, ਵਿਵਾਦ ਨੂੰ ਸੁਲਝਾਇਆ ਗਿਆ ਸੀ।

ਅਡੋਬ ਫਲੈਸ਼ ਪਲੇਟਫਾਰਮ 20 ਸਾਲ ਤੋਂ ਵੱਧ ਪੁਰਾਣਾ ਹੈ, ਜਿਸ ਦੌਰਾਨ ਕਈ ਗੰਭੀਰ ਕਮਜ਼ੋਰੀਆਂ ਖੋਜੀਆਂ ਗਈਆਂ ਹਨ, ਸਮਰਥਨ ਵਾਅਦਾ ਕੀਤਾ 2020 ਤੱਕ ਖਤਮ ਹੋਣ ਲਈ, ਸਟ੍ਰੀਮਿੰਗ ਸੇਵਾ ਲਈ ਕੁਝ ਵਿਕਲਪ ਛੱਡ ਕੇ।

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

ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਅਸਲ ਵੈਬਸਾਕੇਟ ਸਰਵਰ ਦੀ ਲੋੜ ਹੈ। ਮੈਲੋਡੀ ਗੋ ਪੈਕੇਜ ਦੇ ਅਧਾਰ ਤੇ ਮੈਂ ਸਭ ਤੋਂ ਸਰਲ ਬਣਾਇਆ ਹੈ:

ਸਰਵਰ ਕੋਡ

package main

import (
	"errors"
	"github.com/go-chi/chi"
	"gopkg.in/olahol/melody.v1"
	"log"
	"net/http"
	"time"
)

func main() {
	r := chi.NewRouter()
	m := melody.New()

	m.Config.MaxMessageSize = 204800

	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
		http.ServeFile(w, r, "public/index.html")
	})
	r.Get("/ws", func(w http.ResponseWriter, r *http.Request) {
		m.HandleRequest(w, r)
	})

         // Бродкастим видео поток 
	m.HandleMessageBinary(func(s *melody.Session, msg []byte) {
		m.BroadcastBinary(msg)
	})

	log.Println("Starting server...")

	http.ListenAndServe(":3000", r)
}

ਕਲਾਇੰਟ (ਸਟ੍ਰੀਮਿੰਗ ਸਾਈਡ) 'ਤੇ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਕੈਮਰੇ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਰਾਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ MediaStream API.

ਅਸੀਂ ਕੈਮਰੇ/ਮਾਈਕ੍ਰੋਫੋਨ ਤੱਕ ਪਹੁੰਚ (ਇਜਾਜ਼ਤ) ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ ਮੀਡੀਆ ਡਿਵਾਈਸ API. ਇਹ API ਇੱਕ ਢੰਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ MediaDevices.getUserMedia(), ਜੋ ਪੌਪਅੱਪ ਦਿਖਾਉਂਦਾ ਹੈ। ਇੱਕ ਵਿੰਡੋ ਜੋ ਉਪਭੋਗਤਾ ਤੋਂ ਕੈਮਰੇ ਅਤੇ/ਜਾਂ ਮਾਈਕ੍ਰੋਫੋਨ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਮੰਗਦੀ ਹੈ। ਮੈਂ ਨੋਟ ਕਰਨਾ ਚਾਹਾਂਗਾ ਕਿ ਮੈਂ ਗੂਗਲ ਕਰੋਮ ਵਿੱਚ ਸਾਰੇ ਪ੍ਰਯੋਗ ਕੀਤੇ ਹਨ, ਪਰ ਮੈਨੂੰ ਲਗਦਾ ਹੈ ਕਿ ਫਾਇਰਫਾਕਸ ਵਿੱਚ ਸਭ ਕੁਝ ਉਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰੇਗਾ।

ਅੱਗੇ, getUserMedia() ਇੱਕ ਵਾਅਦਾ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਇਹ ਇੱਕ ਮੀਡੀਆਸਟ੍ਰੀਮ ਆਬਜੈਕਟ ਪਾਸ ਕਰਦਾ ਹੈ - ਵੀਡੀਓ-ਆਡੀਓ ਡੇਟਾ ਦੀ ਇੱਕ ਸਟ੍ਰੀਮ। ਅਸੀਂ ਇਸ ਆਬਜੈਕਟ ਨੂੰ ਵੀਡੀਓ ਐਲੀਮੈਂਟ ਦੀ src ਵਿਸ਼ੇਸ਼ਤਾ ਲਈ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਾਂ। ਕੋਡ:

ਪ੍ਰਸਾਰਣ ਪਾਸੇ

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть себя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer');

// если доступен MediaDevices API, пытаемся получить доступ к камере (можно еще и к микрофону)
// getUserMedia вернет обещание, на которое подписываемся и полученный видеопоток в колбеке направляем в video объект на странице

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
          // видео поток привязываем к video тегу, чтобы клиент мог видеть себя и контролировать 
          video.srcObject = stream;
        });
}
</script>

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

ਅਸੀਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਏਨਕੋਡ ਕਰਦੇ ਹਾਂ, ਇਸਨੂੰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡਦੇ ਹਾਂ

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть себя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer');

// если доступен MediaDevices API, пытаемся получить доступ к камере (можно еще и к микрофону)
// getUserMedia вернет обещание, на которое подписываемся и полученный видеопоток в колбеке направляем в video объект на странице

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
          // видео поток привязываем к video тегу, чтобы клиент мог видеть себя и контролировать 
          video.srcObject = s;
          var
            recorderOptions = {
                mimeType: 'video/webm; codecs=vp8' // будем кодировать видеопоток в формат webm кодеком vp8
              },
              mediaRecorder = new MediaRecorder(s, recorderOptions ); // объект MediaRecorder

               mediaRecorder.ondataavailable = function(e) {
                if (e.data && e.data.size > 0) {
                  // получаем кусочек видеопотока в e.data
                }
            }

            mediaRecorder.start(100); // делит поток на кусочки по 100 мс каждый

        });
}
</script>

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

ਅਸੀਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਸਰਵਰ 'ਤੇ ਪ੍ਰਸਾਰਿਤ ਕਰਦੇ ਹਾਂ

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть себя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer');

// если доступен MediaDevices API, пытаемся получить доступ к камере (можно еще и к микрофону)
// getUserMedia вернет обещание, на которое подписываемся и полученный видеопоток в колбеке направляем в video объект на странице

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
          // видео поток привязываем к video тегу, чтобы клиент мог видеть себя и контролировать 
          video.srcObject = s;
          var
            recorderOptions = {
                mimeType: 'video/webm; codecs=vp8' // будем кодировать видеопоток в формат webm кодеком vp8
              },
              mediaRecorder = new MediaRecorder(s, recorderOptions ), // объект MediaRecorder
              socket = new WebSocket('ws://127.0.0.1:3000/ws');

               mediaRecorder.ondataavailable = function(e) {
                if (e.data && e.data.size > 0) {
                  // получаем кусочек видеопотока в e.data
                 socket.send(e.data);
                }
            }

            mediaRecorder.start(100); // делит поток на кусочки по 100 мс каждый

        }).catch(function (err) { console.log(err); });
}
</script>

ਪ੍ਰਸਾਰਣ ਪੱਖ ਤਿਆਰ ਹੈ! ਹੁਣ ਆਉ ਇੱਕ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੀਏ ਅਤੇ ਇਸਨੂੰ ਕਲਾਇੰਟ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੀਏ। ਸਾਨੂੰ ਇਸ ਲਈ ਕੀ ਚਾਹੀਦਾ ਹੈ? ਪਹਿਲਾਂ, ਬੇਸ਼ਕ, ਸਾਕਟ ਕੁਨੈਕਸ਼ਨ. ਅਸੀਂ WebSocket ਆਬਜੈਕਟ ਨਾਲ ਇੱਕ "ਸੁਣਨ ਵਾਲੇ" ਨੂੰ ਜੋੜਦੇ ਹਾਂ ਅਤੇ 'ਸੁਨੇਹਾ' ਇਵੈਂਟ ਲਈ ਗਾਹਕ ਬਣਦੇ ਹਾਂ। ਬਾਈਨਰੀ ਡੇਟਾ ਦਾ ਇੱਕ ਟੁਕੜਾ ਪ੍ਰਾਪਤ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਸਾਡਾ ਸਰਵਰ ਇਸਨੂੰ ਗਾਹਕਾਂ, ਯਾਨੀ ਗਾਹਕਾਂ ਨੂੰ ਪ੍ਰਸਾਰਿਤ ਕਰਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, 'ਸੁਨੇਹਾ' ਇਵੈਂਟ ਦੇ "ਸੁਣਨ ਵਾਲੇ" ਨਾਲ ਸੰਬੰਧਿਤ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਕਲਾਇੰਟ 'ਤੇ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦਾ ਹੈ; ਆਬਜੈਕਟ ਨੂੰ ਖੁਦ ਫੰਕਸ਼ਨ ਆਰਗੂਮੈਂਟ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ - vp8 ਦੁਆਰਾ ਏਨਕੋਡ ਕੀਤੇ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਦਾ ਇੱਕ ਟੁਕੜਾ।

ਅਸੀਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੇ ਹਾਂ

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть тебя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer'),
         socket = new WebSocket('ws://127.0.0.1:3000/ws'), 
         arrayOfBlobs = [];

         socket.addEventListener('message', function (event) {
                // "кладем" полученный кусочек в массив 
                arrayOfBlobs.push(event.data);
                // здесь будем читать кусочки
                readChunk();
            });
</script>

ਲੰਬੇ ਸਮੇਂ ਲਈ ਮੈਂ ਇਹ ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਕਿ ਪ੍ਰਾਪਤ ਕੀਤੇ ਟੁਕੜਿਆਂ ਨੂੰ ਤੁਰੰਤ ਪਲੇਬੈਕ ਲਈ ਵੀਡੀਓ ਤੱਤ ਨੂੰ ਭੇਜਣਾ ਅਸੰਭਵ ਕਿਉਂ ਹੈ, ਪਰ ਇਹ ਪਤਾ ਚਲਿਆ ਕਿ ਇਹ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ, ਬੇਸ਼ਕ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਟੁਕੜੇ ਨੂੰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਬਫਰ ਵਿੱਚ ਬੰਨ੍ਹਣਾ ਚਾਹੀਦਾ ਹੈ. ਵੀਡੀਓ ਤੱਤ, ਅਤੇ ਕੇਵਲ ਤਦ ਹੀ ਇਹ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਇਸ ਦੇ ਲਈ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇਗੀ ਮੀਡੀਆ ਸਰੋਤ API и FileReader API.

MediaSource ਮੀਡੀਆ ਪਲੇਬੈਕ ਆਬਜੈਕਟ ਅਤੇ ਇਸ ਮੀਡੀਆ ਸਟ੍ਰੀਮ ਦੇ ਸਰੋਤ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਕਿਸਮ ਦੇ ਵਿਚੋਲੇ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ। MediaSource ਆਬਜੈਕਟ ਵਿੱਚ ਵੀਡੀਓ/ਆਡੀਓ ਸਟ੍ਰੀਮ ਦੇ ਸਰੋਤ ਲਈ ਇੱਕ ਪਲੱਗ ਕਰਨ ਯੋਗ ਬਫਰ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਇਹ ਹੈ ਕਿ ਬਫਰ ਸਿਰਫ Uint8 ਡਾਟਾ ਰੱਖ ਸਕਦਾ ਹੈ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਅਜਿਹਾ ਬਫਰ ਬਣਾਉਣ ਲਈ ਇੱਕ FileReader ਦੀ ਲੋੜ ਪਵੇਗੀ। ਕੋਡ ਨੂੰ ਦੇਖੋ ਅਤੇ ਇਹ ਹੋਰ ਸਪੱਸ਼ਟ ਹੋ ਜਾਵੇਗਾ:

ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਚਲਾਇਆ ਜਾ ਰਿਹਾ ਹੈ

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть тебя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer'),
         socket = new WebSocket('ws://127.0.0.1:3000/ws'),
        mediaSource = new MediaSource(), // объект MediaSource
        vid2url = URL.createObjectURL(mediaSource), // создаем объект URL для связывания видеопотока с проигрывателем
        arrayOfBlobs = [],
        sourceBuffer = null; // буфер, пока нуль-объект

         socket.addEventListener('message', function (event) {
                // "кладем" полученный кусочек в массив 
                arrayOfBlobs.push(event.data);
                // здесь будем читать кусочки
                readChunk();
            });

         // как только MediaSource будет оповещен , что источник готов отдавать кусочки 
        // видео/аудио потока
        // создаем буфер , следует обратить внимание, что буфер должен знать в каком формате 
        // каким кодеком был закодирован поток, чтобы тем же способом прочитать видеопоток
         mediaSource.addEventListener('sourceopen', function() {
            var mediaSource = this;
            sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs="vp8"");
        });

      function readChunk() {
        var reader = new FileReader();
        reader.onload = function(e) { 
          // как только FileReader будет готов, и загрузит себе кусочек видеопотока
          // мы "прицепляем" перекодированный в Uint8Array (был Blob) кусочек в буфер, связанный
          // с проигрывателем, и проигрыватель начинает воспроизводить полученный кусочек видео/аудио
          sourceBuffer.appendBuffer(new Uint8Array(e.target.result));

          reader.onload = null;
        }
        reader.readAsArrayBuffer(arrayOfBlobs.shift());
      }
</script>

ਸਟ੍ਰੀਮਿੰਗ ਸੇਵਾ ਦਾ ਪ੍ਰੋਟੋਟਾਈਪ ਤਿਆਰ ਹੈ। ਮੁੱਖ ਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਵੀਡੀਓ ਪਲੇਬੈਕ 100 ms ਦੁਆਰਾ ਪ੍ਰਸਾਰਣ ਵਾਲੇ ਪਾਸੇ ਤੋਂ ਪਿੱਛੇ ਰਹਿ ਜਾਵੇਗਾ; ਅਸੀਂ ਇਸਨੂੰ ਸਰਵਰ 'ਤੇ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਵੰਡਣ ਵੇਲੇ ਆਪਣੇ ਆਪ ਸੈੱਟ ਕਰਦੇ ਹਾਂ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜਦੋਂ ਮੈਂ ਆਪਣੇ ਲੈਪਟਾਪ 'ਤੇ ਜਾਂਚ ਕੀਤੀ, ਸੰਚਾਰ ਕਰਨ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰਨ ਵਾਲੇ ਪਾਸਿਆਂ ਦੇ ਵਿਚਕਾਰ ਦੀ ਪਛੜਾਈ ਹੌਲੀ-ਹੌਲੀ ਇਕੱਠੀ ਹੋ ਗਈ, ਇਹ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਸੀ। ਮੈਂ ਇਸ ਨੁਕਸਾਨ ਨੂੰ ਦੂਰ ਕਰਨ ਦੇ ਤਰੀਕੇ ਲੱਭਣੇ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤੇ, ਅਤੇ... RTCPeerConnection API, ਜੋ ਤੁਹਾਨੂੰ ਸਟ੍ਰੀਮ ਨੂੰ ਟੁਕੜਿਆਂ ਵਿੱਚ ਵੰਡਣ ਵਰਗੀਆਂ ਚਾਲਾਂ ਤੋਂ ਬਿਨਾਂ ਵੀਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਕੱਠਾ ਹੋਣ ਵਾਲਾ ਪਛੜ, ਮੇਰੇ ਖਿਆਲ ਵਿੱਚ, ਇਸ ਤੱਥ ਦੇ ਕਾਰਨ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਪ੍ਰਸਾਰਣ ਤੋਂ ਪਹਿਲਾਂ ਹਰੇਕ ਟੁਕੜੇ ਨੂੰ ਵੈਬਮ ਫਾਰਮੈਟ ਵਿੱਚ ਮੁੜ-ਏਨਕੋਡ ਕਰਦਾ ਹੈ. ਮੈਂ ਹੋਰ ਖੋਦਾਈ ਨਹੀਂ ਕੀਤੀ, ਪਰ WebRTC ਦਾ ਅਧਿਐਨ ਕਰਨਾ ਸ਼ੁਰੂ ਕੀਤਾ। ਮੈਨੂੰ ਲੱਗਦਾ ਹੈ ਕਿ ਜੇਕਰ ਮੈਨੂੰ ਇਹ ਕਮਿਊਨਿਟੀ ਲਈ ਦਿਲਚਸਪ ਲੱਗੇ ਤਾਂ ਮੈਂ ਆਪਣੀ ਖੋਜ ਦੇ ਨਤੀਜਿਆਂ ਬਾਰੇ ਇੱਕ ਵੱਖਰਾ ਲੇਖ ਲਿਖਾਂਗਾ।

ਸਰੋਤ: www.habr.com

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

ਇੱਕ ਟਿੱਪਣੀ ਜੋੜੋ Отменить ответ