海康威视视频在页面中展示

使用到三个后台插件,一个前端插件

VLC :用于测试视频流地址是否可用,使用方法:

  1. 官网下载对应版本安装
  2. 打开应用,选择《媒体》-> 《打开网络串流》->《网络》->输入你的流地址->点击播放 (可能会有延时,但不会太长1分钟以内)

nginx-rtmp:用于配置rmtp流输出地址,下载地址:https://github.com/illuspas/nginx-rtmp-win32; 使用方法:

  1. 直接下载后解压
  2. 运行 nginx.exe,此时会闪出一个控制台(这个并不是闪退),网页打开localhost:8080,能正常访问表示启动成功。
  3. 关于端口可以在. conf->niginx.conf中自行配置

FFmpeg:用于将rstp流转换成rsmp流,因为rstp很多浏览器不支持无法直接使用。使用方法:

  1. 官网下载安装
  2. 配置环境变量, E:\ffmpeg\bin加入到path,完成后再控制台输入ffmpeg -version看到正常输出表示成功。
  3. 测试流转换,语法:
    ffmpeg [全局选项] {[输入文件选项] -i 输入文件} … {[输出文件选项] 输出文件}
    示例: ffmpeg -i “rtsp://username:password@ip:port/Streaming/Channels/101?transportmode=unicast” -vcodec copy -acodec copy -f flv “rtmp://localhost:1935/live/”

video.js: 用于网页播放rtmp流,示例代码:(可以直接使用,但是需要放在服务器启动不能直接打开,你只需要修改对应的rmtp地址即可):


<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试rtmp直播源title>
    <script src="http://vjs.zencdn.net/5.5.3/video.js">script>
    <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>
<div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">视频无法正常播放,请点击下方启用flashdiv>
<video id="my-video" style="color:black;width:750px;height:350px;float:left;" class="video-js" autoplay controls
       preload="auto" width="750" height="350" data-setup="{}">

    <source src='rtmp://localhost:1935/live/1' type='rtmp/flv'/>
video>
<video id="my-video1" style="color:black;width:750px;height:350px;float:left;" class="video-js" autoplay controls preload="auto"
       width="750" height="350" data-setup="{}">
    <source src='rtmp://localhost:1935/live/1' type='rtmp/flv'/>
video>
<video id="my-video2" style="color:black;width:750px;height:350px;float:left;" class="video-js" autoplay controls preload="auto"
       width="750" height="350" data-setup="{}">
    <source src='rtmp://localhost:1935/live/2' type='rtmp/flv'/>
video>
<video id="my-video3" style="color:black;width:750px;height:350px;float:left;" class="video-js" autoplay controls preload="auto"
       width="750" height="350" data-setup="{}">
    <source src='rtmp://localhost:1935/live/2' type='rtmp/flv'/>
video>


<embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;" type="application/x-shockwave-flash">
<script type="text/javascript" language="JavaScript">
    function flashChecker() {
        var hasFlash = 0;         //是否安装了flash
        var flashVersion = 0; //flash版本
        var isIE = /*@cc_on!@*/0;      //是否IE浏览器

        if (isIE) {
            var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if (swf) {
                hasFlash = 1;
                VSwf = swf.GetVariable("$version");
                flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
            }
        } else {
            if (navigator.plugins && navigator.plugins.length > 0) {
                var swf = navigator.plugins["Shockwave Flash"];
                if (swf) {
                    hasFlash = 1;
                    var words = swf.description.split(" ");
                    for (var i = 0; i < words.length; ++i) {
                        if (isNaN(parseInt(words[i]))) continue;
                        flashVersion = parseInt(words[i]);
                    }
                }
            }
        }
        return {f: hasFlash, v: flashVersion};
    }

    var fls = flashChecker();
    var s = "";
    if (fls.f) {
        document.getElementsByClassName("openFlash")[0].style.display = "none";
        document.getElementsByClassName("openFlashTips")[0].style.display = "none";
//        document.write("您安装了flash,当前flash版本为: " + fls.v + ".x");
    }
    else {
        document.getElementsByClassName("openFlash")[0].style.display = "block";
        document.getElementsByClassName("openFlashTips")[0].style.display = "block";
//        document.write("您没有安装flash");
    }
script>
body>
html>

这里通过JAVA方式来控制转码的方法

主要思想就是通过JAVA代码来控制命令行执行,下面提供一个开源示例

  1. 源码地址:https://github.com/eguid/FFCH4J
  2. 导入项目,里面有测试用例可以直接使用,需要修改你的rtsp和rtmp地址以及配置文件中ffmpeg的地址。
  3. 我在本地运行丢包率比较高,但是能正常显示,他会提示很多丢包重连,这个没关系多让他运行一会就好。

你可能感兴趣的:(工作记录)