🥇(Paene) inutilem webcam ex pasco exundans. Media Stream and Websockets

In hoc articulo volo communicare conatus meos ut video per interretiales telas sine usura tertia-pars navigatoris plugins sicut Adobe Flash Players. Legere invenire quo ea.

Adobe Flash, olim Macromedia Flash, suggestum est creandi applicationes quae in navigatro interretiali currunt. Ante introductionem Fluminis API Mediae, solum fere suggestum erat ut infuso video ac voce e webcam, tum pro variis generibus colloquiorum et confabulationum in navigatro creando. Protocollum tradendi instrumentorum informationum RTMP (Protocol Verus Time Nuntius) actu diu clausus erat, quod significabat: si vis profusum munus tuum boost, satis benevole ut programmata ab ipsis Adobe - Adobe Media Servo (AMS).

Post aliquod tempus in MMXII, Adobe "emisit et exspuit" in publicum. specificatio RTMP protocollum, quod errores continebat et per se incompletum erat. Protocollo hoc tempore tincidunt suas actiones facere coeperunt, et Wowza ministrator apparuit. Anno 2011, Adobe lite contra Wowza inlata de diplomatibus RTMP relatis illegale usus est, post annos quattuor, certamen amicabiliter resolutum est.

In suggestu Adobe Flash plus quam XX annos natus est, in quo tempore multae vulnerationes criticae detectae sunt, subsidium promisit ad finem per 2020 pauca alia pro effusis servitutis relinquens.

Ad propositum meum, statim decrevi usum Flash in navigatro penitus deserere. Causam principalem supra indicavi, Flash etiam omnino in suggestis mobilibus non sustinetur, et ego vere noluit Adobe Flash explicandi in Fenestra (emulator vini). Sic constitui in JavaScript scribere clientem. Hoc prototypum iustus erit, cum postea intellexi fluentem multo efficacius in p2p fieri posse, solum mihi erit paris-servis-paribus, sed magis in illo alio tempore, quia nondum paratus est.

Ut incipias, re paginarum interretialium indigemus. Ire sarcina melodiae simplicissimae fundatur;

Servo codice

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)
}

In cliente (latere fluente) primum debes cameram accedere. Hoc fit per MediaStream API.

Nos aditum (permission) ad cameram / tortor ligula, facilisis per Media machinae API. Hoc API modum praebet MediaDevices.getUserMedia()quod ostendit populus. per fenestram petens utentem ad licentiam accedere ad cameram et / vel tortor ligula. Notare velim me omnia experimenta in Google Chrome perfecisse, sed omnia in Firefox eadem fere facturum esse puto.

Deinde, getUserMedia() redit promissionem, cui objectum MediaStream transit - rivus notitiae video-auditionis. Hoc obiectum src proprietati video elementi assignamus. Codicis:

Radiophonica parte

<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>

Ut video rivum per bases spargere, necesse est alicubi encode, opponere et in partes transmittere. Rudis video rivus per interretiales traduci non potest. Haec ubi advenit MediaRecorder API. Hoc API te encode et rivum in frusta permittit. Modum comprimere facio ut rivum video ut pauciores bytes super retia mittas. Fracto in frusta, singulas partes ad nervum mittere potes. Codicis:

Encodemus rivum video, in partes frangimus

<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>

Iam transmissionem per telas addamus. Mire, omne opus hoc est WebSockets. Duos tantum modos habet mittendi ac prope. Nomina pro se loquuntur. Addidit codicem:

Nos amnis video transmittere ad server

<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>

Passim parata est! Nunc agamus ut video rivum recipere et in clientelam ostendere. Quid hoc opus est? Uno scilicet nexu nervus. Applicamus "auditorem" ad obiectum WebSocket et subscribimus eventum "nuntii". Accepto nummo datae binariae, minister noster eam signatoribus transmittit, id est, clientibus. In hoc casu, munus callback associatum "auditoris" "nuntii" in clientis eventu urget, ipsum obiectum in munus argumentum transitur - particulam video amnis ab vp8 encoded.

Accipimus video stream

<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>

Diu intellegere studui cur impossibilis sit receptas partes statim mittere ad elementum videndi pro playback, sed evenit ut hoc fieri non possit, utique oportet primum particulam in speciali quiddam tendere ad ligatum. elementum video, ac nisi tunc incipiet ludere video amnis. Hoc enim tibi opus est MediaSource API и FileReader API.

MediaSource agit quasi quoddam medium inter obiectum ludibrii instrumenti et fontem huius instrumenti rivi. Obiectum MediaSource pluggabile quiddam continet ad fontem fluminis video/audii. Unum pluma est ut quiddam solum notitias Uint8 tenere possit, ergo tabulario legere debes ut tale quiddam creet. Vide in codice et eo clarius fiet;

Ludens video amnis

<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>

Prototypum muneris effusis parata est. Praecipuum incommodum est quod playback video post transmittentem latus per 100 ms pigebit, nos hoc nos proposuimus, cum amnis video scindens antequam id servo transmitteret. Praeterea, cum in laptop meo deprimebam, pigra inter transmittentes et recipiendos partes sensim cumulatas, hoc clare conspicuum erat. Ego quaerebam vias ut hoc incommodum vincerem, et trans RTCPeerConnection APIquae sino vos ut rivum video sine technis transmittere ut in frusta scindamus. Aggregatio pigri, ut opinor, ob hoc accidit quod navigatrum re-encribit singulas partes in forma telae antequam transmissionem. Non amplius fodere, sed WebRTC studere coepi. Puto te singula articulum de exitu investigationis meae scribere, si communitati studium invenero.

Source: www.habr.com

(fere) inutilem webcam ex pasco exundans. Media Fluvius et Websockets

Add a comment Отменить ответ