接上一章：四、JAVA調(diào)用?？低昐DK實(shí)現(xiàn)攝像頭內(nèi)網(wǎng)推流到阿里云
本章實(shí)現(xiàn)攝像頭內(nèi)網(wǎng)推流到阿里云服務(wù)器并再瀏覽器WEB前端展示。
環(huán)境準(zhǔn)備
開發(fā)工具：eclipse
Jdk版本：jdk1.8
開發(fā)語言：java，界面使用swing開發(fā)
攝像頭：DS-2CD1221D-I3
海康威視SDK下載地址：?？低曢_放平臺(tái)
SDK版本：CH-HCNetSDKV6.0.2.35_build20190411_Win64
EasyRTMPLive：EasyRTMPLive
-
ckplayer:ckplayer
將攝像頭內(nèi)網(wǎng)推流到阿里云直播服務(wù)器請參考尚一章。推流到阿里云服務(wù)器后再阿里云后臺(tái)獲取直播地址，通過該直播地址可以在瀏覽器端進(jìn)行監(jiān)控視頻播放。
image
網(wǎng)頁播放器使用ckplayer實(shí)現(xiàn)，下載地址：ckplayer
代碼實(shí)現(xiàn)
player.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>?？低晹z像頭外網(wǎng)播放器</title>
<script type="text/javascript" src="./resource/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./resource/ckplayer/ckplayer/ckplayer.js"></script>
</head>
<body>
<div>
<span>播放地址：</span>
<input id="player_url" placeholder="請輸入播放地址">
<button id="plat_btn">播放</button>
</div>
<div id="video" style="width: 800px; height: 600px;margin: 0 auto;"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#plat_btn").click(function(){
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函數(shù)名稱
autoplay:true,
live:true,
video: $("#player_url").val()
};
var player = new ckplayer(videoObject);
});
});
</script>
</body>
效果預(yù)覽
image
