Socket.io 如何进行在线视频直播-JavaScript中文网-JavaScript教程资源分享门户

Socket.io 如何进行在线视频直播

Socket.io 是一个面向实时 web 应用的库，可以让我们非常方便地实现实时通讯。本文将介绍如何使用 Socket.io 实现在线视频直播功能。

建立 Socket.io 连接首先我们需要建立 Socket.io 的连接，可以使用 Socket.io 的客户端库来进行连接，可以使用 <script> 标签或者引入 npm 包的方式引入，假如我们在前端页面中使用，在 HTML 文件中加入如下代码即可引入 Socket.io：</li> </ol> <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script> var socket = io(); </script>
1. 发送视频流为了发送视频流，我们需要使用 WebRTC 技术，它是一种实时通讯的技术，可以让我们在浏览器中进行视频通话。WebRTC 使用 Peer-to-Peer 的方式进行通讯，所以我们需要找到一些可以搭建 Peer-to-Peer 服务器的第三方服务来帮助我们完成。
假设我们使用的是 Thruway 这个服务，我们可以使用以下代码来发送流：

// 初始化本地媒体流 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video');

if (navigator.getUserMedia) { navigator.getUserMedia({audio: true, video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); socket.emit('stream', stream); }, function(err) { console.log('Unable to get user media', err); }); }

socket.on('stream', function(stream) { var peer = new SimplePeer({initiator: true, trickle: false, stream: stream});

peer.on('signal', function(data) { socket.emit('signal', data); });

peer.on('stream', function(stream) { var video = document.createElement('video');
```
video.src = window.URL.createObjectURL(stream);
document.body.appendChild(video);
```
});

socket.on('signal', function(data) { peer.signal(data); }); });

我们可以在前端通过 getUserMedia 获取本地的媒体流，然后将流通过 Socket.io 发送给服务端，最后服务端可以将流再次发送给指定的客户端。在客户端接收到流之后使用 SimplePeer 这个库来处理信令和数据流的传输。
1. 接收视频流接收视频流的过程和发送类似，只不过我们需要对信令做出响应，这里我们需要使用 signal 事件来传递给对方相应的信令。
socket.on('stream', function(stream) { var peer = new SimplePeer({initiator: false, trickle: false, stream: stream});

peer.on('signal', function(data) { socket.emit('signal', data); });

peer.on('stream', function(stream) { var video = document.createElement('video');
```
video.src = window.URL.createObjectURL(stream);
document.body.appendChild(video);
```
});

socket.on('signal', function(data) { peer.signal(data); }); });
1. 总结通过以上步骤，我们可以很方便地使用 Socket.io 实现在线视频直播功能。尽管我们需要使用一些第三方服务来帮助我们完成 Peer-to-Peer 的通讯，但是这一步骤已经被抽象到了服务端，对于前端开发者而言只需要使用点点鼠标即可完成实时通讯的功能。同时 WebRTC 技术也可以应用在很多其他的场景中，如音频通话、数据传输等等。
来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64521814675af4061b5c3ed1