Für das Video-Live-Streaming habe ich in der Anfangsphase viele Lösungen studiert, einschließlich Websocket. Aus verschiedenen Gründen habe ich diese Lösung letztendlich nicht übernommen, möchte aber trotzdem meine Lernerfahrung aufzeichnen.
WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung, das seit Beginn von HTML5 bereitgestellt wird.
In der WebSocket-API müssen der Browser und der Server lediglich eine Handshake-Aktion ausführen, und dann wird ein schneller Kanal zwischen dem Browser und dem Server gebildet. Daten können direkt zwischen beiden übertragen werden.
Der Browser sendet eine Anfrage an den Server, um über JavaScript eine WebSocket-Verbindung herzustellen. Nachdem die Verbindung hergestellt wurde, können der Client und der Server direkt Daten über die TCP-Verbindung austauschen.
Nachdem Sie die Web-Socket-Verbindung hergestellt haben, können Sie über die send()-Methode Daten an den Server senden und vom Server zurückgegebene Daten über das onmessage-Ereignis empfangen.
Während des Prozesses besteht die Hauptidee darin, setTimeout () auf der Aufnahmeseite zu verwenden, um das Video in festen Intervallen über die Leinwand in ein Einzelbildbild umzuwandeln, und dann die Bilddaten mit socket.send () von Websocket zu senden der Server. Auf der Live-Übertragungsseite erstellen Sie zunächst eine <img>-Struktur, rufen die Bilddaten über socket.onmessage() von Websocket ab und zeigen sie im <img>-Tag an, um eine Live-Übertragung zu erstellen.
Angehängter Code
HTML-Struktur der Videoseite
<video autoplay id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
Videoseite js
<script type=text/javascript charset=utf-8> //Erstelle eine + Instanz var socket = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); /Gibt eine Umgebung zum Zeichnen auf der Leinwand zurück. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var success = function(stream){ //Holen Sie sich den Videostream und konvertieren Sie ihn in die URL video.src = window. URL.createObjectURL(stream); //Socket öffnen socket.onopen = function(){ draw(open success) } // Zeichnen Sie Videobilder auf das Canvas-Objekt, und Canvas wechselt alle 100 ms die Bilder, um einen Videoeffekt mit bloßem Auge zu erzeugen. var draw = function(){ try{ backcontext.drawImage(video,0,0, back.width, back.height) ; }catch( e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(draw, 100 } } if(video.src){ //Der Inhalt von Canvas wird in PNG-Daten-URI konvertiert und an den Server gesendet, 0,5 ist der Komprimierungskoeffizient socket.send(back.toDataURL(image/jpeg, 0.5)); } setTimeout(draw , 100) ; } // Rufen Sie die Kamera des Geräts auf und fügen Sie die Ressource in das Video-Tag navigator.getUserMedia = navigator.getUserMedia || ein ||. navigator.mozGetUserMedia ||. navigator.msGetUserMedia({video:true, audio:false}, success, </script>);HTML-Struktur der Live-Seite:
<img id=receiver style=width:1600px;height:900px/>
Live-Seite JS
<script type=text/javascript charset=utf-8> //Socket-Instanz erstellen var Receiver_socket = new WebSocket(ws://+document.domain+:8008); Alert(ws://+document.domain+:8008) var image = document.getElementById('receiver'); // Auf Nachrichten warten Receiver_socket.onmessage = function(data) { image.src=data.data; ZusammenfassenDas Obige ist die Websocket-Implementierung in HTML5, die Ihnen der Herausgeber vorstellt. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!