五、JAVA调用海康威视SDK实现摄像头内网转外网并前端展示

接上一章:四、JAVA调用海康威视SDK实现摄像头内网推流到阿里云

本章实现摄像头内网推流到阿里云服务器并再浏览器WEB前端展示。

环境准备

  1. 开发工具:eclipse

  2. Jdk版本:jdk1.8

  3. 开发语言:java,界面使用swing开发

  4. 摄像头:DS-2CD1221D-I3

  5. 海康威视SDK下载地址:海康威视开放平台

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

  7. EasyRTMPLive:EasyRTMPLive

  8. ckplayer:ckplayer

    将摄像头内网推流到阿里云直播服务器请参考尚一章。推流到阿里云服务器后再阿里云后台获取直播地址,通过该直播地址可以在浏览器端进行监控视频播放。
    
image

网页播放器使用ckplayer实现,下载地址:ckplayer

代码实现

player.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海康威视摄像头外网播放器</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',//播放函数名称
                    autoplay:true,
                    live:true,
                    video: $("#player_url").val()
                };
                var player = new ckplayer(videoObject);
            });
        });
    </script>
</body>

效果预览

image

项目源码

源码下载

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容