首先，您需要设置媒体流服务器。您可以使用Wowza，red5或nginx-rtmp-module。在所需的操作系统上阅读其文档和设置。所有引擎都支持HLS（Apple开发的Http Live Stream协议）。您应该阅读有关config的文档。nginx-rtmp-module的示例：
rtmp {
server {
listen 1935;
chunk_size 4000;
application show {
live on;
hls on;
hls_path /mnt/hls/;
hls_fragment 3;
hls_playlist_length 60;
deny play all;
}
}
}
server {
listen 8080;
location /hls {
add_header Cache-Control no-cache;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers' 'Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /mnt/;
}
}
服务器设置和配置成功后。您必须使用某些rtmp编码器软件（OBS，有线广播...）开始流式传输，例如youtube或twitchtv。
在客户端（您的情况下为浏览器）中，您可以使用Videojs或JWplayer为最终用户播放视频。您可以对Videojs执行以下操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Streaming</title>
<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('#player');
</script>
</body>
</html>
您不需要添加其他插件（例如Flash）（因为我们使用HLS而不是rtmp）。该播放器可以在没有闪光灯的情况下跨浏览器正常工作。