在上一節搭建流媒體服務器中已經講述了簡單實現推流拉流的過程。由於如果我們直接設置流名稱不添加限制可能會導致任何人都可以訪問我們的直播平臺。之前我們的地址可能是如下:
rtmp://localhost/live/STREAM_NAME
http://localhost:8000/live/STREAM_NAME.flv
因此我們需要將地址修改成如下：
rtmp://hostname:port/appname/stream?sign=expires-HashValue
http://hostname:port/appname/stream.flv?sign=expires-HashValue
ws://hostname:port/appname/stream.flv?sign=expires-HashValue
換言之，我們需要將原始推流地址進行加密設置。需要設置如下兩部：
- 設置服務器允許加密驗證
- 更新加密驗證地址
- 拉流端更新加密地址
服務器允許加密驗證
const config = {
rtmp: {
port: 1935,
chunk_size: 60000,
gop_cache: true,
ping: 60,
ping_timeout: 30
},
http: {
port: 8000,
allow_origin: '*'
},
auth: {
play: true, //表示拉流的時候是開啓鑑權驗證
publish: true, //表示推流的時候開啓鑑權驗證
secret: 'nodemedia2020privatekey'
}
}
更新加密驗證地址
url地址加密驗證需要通過md5加密
var streamName='haizhengzheng';
var expireData=parseInt((Date.now()+1000000)/1000)
var HashValue=md5(`/live/${streamName}-${expireData}-${appconfig.secret}`)
var sign=`${expireData}-${HashValue}`;
var rtmpurl =`rtmp://192.168.0.105/live/${streamName}?sign=${sign}`
更新拉流地址
- 使用http-flv方式拉流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
<video id="videoElement" style="width: 80%;" controls="controls"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url:'http://192.168.0.105:8000/live/haizhengzheng.flv?sign=1580268103-5913170300c794f918bb4e7341a80b8e'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
- 使用rtmp方式拉流
特別注意！！！！是用這種方式拉流需要在服務器端發佈才能訪問
<html>
<head>
<title>RTMP 視頻直播</title>
<meta charset="utf-8">
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>
<body>
<h1>直播間</h1>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="300"
poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449
.jpg" data-setup="{}">
<source src="rtmp://192.168.0.105:1935/live/haizhengzheng?sign=1580270005-98e02f954775e63c9fee6135d38c0710" type="rtmp/flv">
<p class="vjs-no-js">播放視頻需要啓用JavaScript，推薦使用支持HTML5 的瀏覽器訪問。
To view this video please enable JavaScript, and consider upgrading to a web browser
that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
</body>
</html>
