前端流媒体播放 从入门到入坑
2023-10-12 08:26:51
前言
随着流媒体技术的不断发展，我们已经习惯于在浏览器中观看视频。但您可曾想过，这些视频是如何在浏览器中播放的呢？在本文中，我们将深入探讨前端流媒体播放技术，揭示流媒体播放背后的秘密。
一、基础知识
1. 媒体流
媒体流是指包含音频、视频和图像等时序数据的集合，可以是实时的或预先录制好的。这些数据流可以通过互联网或其他网络传输到不同设备上进行播放。
2. 媒体容器
媒体容器是一种文件格式，用于存储媒体流数据。它规定了媒体流数据的存储方式，包括音频流、视频流、字幕流等。常见的媒体容器格式有 MP4、FLV、MOV 和 AVI。
3. 媒体编解码器
媒体编解码器是一种软件或硬件，用于对媒体流数据进行编码或解码。编码是指将媒体流数据压缩成更小的体积，解码是指将压缩后的数据还原成原始数据。常见的编解码器有 H.264、H.265、VP9、AAC 和 MP3。
4. 媒体播放器
媒体播放器是一种软件或硬件，用于播放媒体流数据。它可以播放不同格式的媒体文件，并支持各种操作，例如暂停、快进、快退和音量调节。常见的媒体播放器有 Windows Media Player、VLC Media Player、KMPlayer 和 PotPlayer。
二、前端流媒体播放技术
1. HTML5 视频标签
HTML5 视频标签是前端流媒体播放最常用的方式。它支持多种媒体容器格式和编解码器，并且可以播放实时的媒体流。
<video src="video.mp4" controls></video>
2. Media Source Extensions (MSE)
MSE 是 HTML5 视频标签的一个扩展，允许在视频标签中播放分段式媒体流。分段式媒体流是指将媒体流分成多个小的片段，然后依次播放这些片段。MSE 可以很好地支持直播流的播放。
3. WebRTC
WebRTC 是一个开源的实时通信框架，支持在浏览器中进行视频通话、音频通话和数据传输。它可以用来构建流媒体播放器和流媒体推流器。
4. WebSocket
WebSocket 是一种双向通信协议，允许在浏览器和服务器之间建立持久的连接。它可以用来构建流媒体播放器和流媒体推流器。
三、常见流媒体协议
1. HTTP Live Streaming (HLS)
HLS 是苹果公司开发的流媒体协议，用于在互联网上传输视频流。它将媒体流分成多个小的片段，然后依次下载这些片段并播放。HLS 是目前最常用的流媒体协议之一，被广泛应用于视频网站和流媒体平台。
2. MPEG-DASH
MPEG-DASH 是一个国际标准的流媒体协议，用于在互联网上传输视频流。它与 HLS 类似，也将媒体流分成多个小的片段，然后依次下载这些片段并播放。MPEG-DASH 的优势在于它支持自适应比特率流，可以根据网络情况自动调整比特率，从而保证流畅的播放体验。
3. RTMP
RTMP 是 Adobe 公司开发的流媒体协议，用于在互联网上传输实时视频流。它是最常用的流媒体推流协议之一，被广泛应用于直播平台和视频会议系统。
四、基于 Websocket 实现流媒体直播
1. 服务端
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
// 收到客户端发送的媒体流数据
const data = JSON.parse(message);
// 将媒体流数据转发给其他客户端
wss.clients.forEach((client) => {
if (client !== ws) {
client.send(JSON.stringify(data));
}
});
});
});
2. 客户端
<video id="video" controls></video>
<script>
const video = document.getElementById('video');
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
// 连接成功后，发送一条消息给服务端
ws.send('hello');
};
ws.onmessage = (event) => {
// 收到服务端发送的媒体流数据
const data = JSON.parse(event.data);
// 将媒体流数据添加到视频标签中
video.srcObject = new Blob([data], { type: 'video/webm' });
};
</script>
五、如何把 RTMP 流拉到前端播放
1. 使用 flv.js
<script src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js"></script>
<video id="video" controls></video>
<script>
const video = document.getElementById('video');
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'rtmp://localhost:1935/live/stream'
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
flvPlayer.play();
</script>
2. 使用 video-js-contrib-hls
<script src="https://cdn.jsdelivr.net/npm/video.js@latest/dist/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@latest/dist/videojs-contrib-hls.min.js"></script>
<video id="video" controls></video>
<script>
const video = document.getElementById('video');
const player = videojs(video, {
techOrder: ['html5', 'flash'],
sources: [{
src: 'https://example.com/hls/manifest.m3u8',
type: 'application/x-mpegURL'
}]
});
</script>
六、基于 WebRTC 的流媒体推流与播放
1. 服务端
const WebSocket = require('ws');
const PeerServer = require('peer-server');
const wss = new WebSocket.Server({ port: 8080 });
const peerServer = new PeerServer({ port: 9000 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
// 收到客户端发送的媒体流数据
const data = JSON.parse(message);
// 将媒体流数据转发给其他客户端
wss.clients.forEach((client) => {
if (client !== ws) {
client.send(JSON.stringify(data));
}
});
});
});
peerServer.on('connection', (client) => {
client.on('stream', (stream) => {
// 收到客户端推流
wss.clients.forEach((ws) => {
ws.send(JSON.stringify({
type: 'stream',
stream: stream
}));
});
});
});
2. 客户端
<video id="video" controls></video>
<script>
const video = document.getElementById('video');
const ws = new WebSocket('ws://localhost:8080');
const peerConnection = new RTCPeerConnection();
ws.onopen = () => {
// 连接成功后，发送一条消息给服务端
ws.send('hello');
};
ws.onmessage = (event) => {
// 收到服务端发送的媒体流数据
const data = JSON.parse(event.data);】
if (data.type === 'stream') {
// 将媒体流添加到视频标签中
video.srcObject = data.stream;
}
};
</script>
结论
通过本文的介绍，您已经对前端流媒体播放技术有了全面的了解。您不仅掌握了基础知识，还学会了如何使用不同的技术来播放和推流媒体流。随着流媒体技术的发展，前端流媒体播放技术也将不断进化，为我们带来更加流畅、清晰的观看体验。
常见问题解答
1. HTML5 视频标签和 MSE 有什么区别？
HTML5 视频标签是一个基本的视频播放器，而 MSE 是 HTML5 视频标签的一个扩展，允许播放分段式媒体流。MSE 可以很好地支持直播流的播放。
2. HLS 和 MPEG-DASH 有什么区别？
HLS 和 MPEG-DASH 都是流媒体协议，用于在互联网上传输视频流。它们都将媒体流分成多个小的片段，然后依次下载这些片段并播放。
