五、JAVA調(diào)用海康威視SDK實(shí)現(xiàn)攝像頭內(nèi)網(wǎng)轉(zhuǎn)外網(wǎng)并前端展示

接上一章:四、JAVA調(diào)用??低昐DK實(shí)現(xiàn)攝像頭內(nèi)網(wǎng)推流到阿里云

本章實(shí)現(xiàn)攝像頭內(nèi)網(wǎng)推流到阿里云服務(wù)器并再瀏覽器WEB前端展示。

環(huán)境準(zhǔn)備

  1. 開發(fā)工具:eclipse

  2. Jdk版本:jdk1.8

  3. 開發(fā)語言:java,界面使用swing開發(fā)

  4. 攝像頭:DS-2CD1221D-I3

  5. 海康威視SDK下載地址:??低曢_放平臺(tái)

  6. SDK版本:CH-HCNetSDKV6.0.2.35_build20190411_Win64

  7. EasyRTMPLive:EasyRTMPLive

  8. 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

項(xiàng)目源碼

源碼下載

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容