Pour le streaming vidéo en direct, j'ai étudié de nombreuses solutions au début, y compris websocket. Pour diverses raisons, je n'ai finalement pas adopté cette solution, mais je souhaite quand même enregistrer mon expérience d'apprentissage.
WebSocket est un protocole de communication full-duplex sur une seule connexion TCP que HTML5 a commencé à fournir.
Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de négociation, puis un canal rapide est formé entre le navigateur et le serveur. Les données peuvent être transmises directement entre les deux.
Le navigateur envoie une demande au serveur pour établir une connexion WebSocket via JavaScript. Une fois la connexion établie, le client et le serveur peuvent échanger directement des données via la connexion TCP.
Après avoir obtenu la connexion Web Socket, vous pouvez envoyer des données au serveur via la méthode send() et recevoir les données renvoyées par le serveur via l'événement onmessage.
Pendant le processus, l'idée principale est la suivante : utilisez setTimeout() sur la page d'enregistrement pour convertir la vidéo en une image image par image via le canevas à intervalles fixes, puis utilisez le socket.send() de websocket pour envoyer les données d'image à le serveur. Sur la page de diffusion en direct, vous créez d'abord une structure <img>, obtenez les données d'image via socket.onmessage() de websocket et affichez-les sur la balise <img> pour former une diffusion en direct.
Code ci-joint
Structure HTML de la page vidéo
<video autoplay id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
Page vidéo js
<script type=text/javascript charset=utf-8> //Créer une instance + var socket = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); /Renvoie un environnement pour dessiner sur le canevas. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var success = function(stream){ //Obtenir le flux vidéo et le convertir en url video.src = window.URL.createObjectURL(stream); } //Ouvrir le socket socket.onopen = function(){ draw(); Dessinez des images vidéo sur l'objet Canvas et Canvas change d'image toutes les 100 ms pour former un effet vidéo à l'œil nu 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); else { throw e; if(video.src){ //Le contenu de Canvas est converti en URI de données PNG et envoyé au serveur, 0,5 est le coefficient de compression socket.send(back.toDataURL(image/jpeg, 0.5) } setTimeout(draw) , 100) ; } //Appelle la caméra de l'appareil et place la ressource dans la balise vidéo navigator.getUserMedia = navigator.getUserMedia || || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia({vidéo:true, audio:false}, succès, console.log);Structure HTML de la page en direct :
<img id=style du récepteur=largeur:1600px;hauteur:900px/>
Page en direct JS
<script type=text/javascript charset=utf-8> //Créer une instance de socket var Receiver_socket = new WebSocket(ws://+document.domain+:8008); var image = document.getElementById('receiver'); // Écouter les messages récepteur_socket.onmessage = fonction(données) { image.src=data.data } </script> RésumerCe qui précède est l'implémentation de websocket en HTML5 que l'éditeur vous présente. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !