iot/projects/IoT/IoTServices/ONVIFService/Views/Home/Index.cshtml

@model List<Device>
@section styles{
    <style>
        .video {
            max-width: 100%;
            margin: 0 auto;
            display: block;
        }

        .modal-dialog {
            width: 670px;
        }
    </style>
}
@if (Model != null && Model.Count > 0)
{
    <div class="row">
        @foreach (var item in Model)
        {
            var url = "/images/empty.png";
            var needAuth = item.GetDataValue("NeedAuth") == "是";
            var hasAuth = item.GetDataValue("hasAuth") == "是";
            if (!needAuth || hasAuth)
            {
                url = Url.Action("Image", "Home", new { id = item.Number });
            }
            <div class="col-lg-3">
                <div class="row camera">
                    <div class="box-header">
                        <p style="white-space:nowrap; text-overflow:ellipsis;overflow:hidden;" title="@item.GetDataValue("StreamUri")">@item.GetDataValue("StreamUri")</p>
                    </div>
                    <div class="box-body">
                        <a class="fancybox" href="@url"><img style="width:100%;height:100%;" src="@url" /></a>
                    </div>
                    <div class="box-body">
                        <span>PTZ支持：@item.GetDataValue("SubPtz3DZoomSupport")</span>
                        <span>需认证：@Html.DisplayFor(o => needAuth)</span>
                        @if (needAuth)
                        {
                            <span>已认证：@Html.DisplayFor(o => hasAuth)</span>
                        }
                    </div>
                    <div class="box-body">
                        <a class="btn btn-default btn-sm rtmp" href="@item.GetDataValue("mainrtmp")">mainrtmp</a>
                        <a class="btn btn-default btn-sm flv" href="@item.GetDataValue("mainflv")">mainflv</a>
                        <a class="btn btn-default btn-sm hls" href="@item.GetDataValue("mainhls")">mainhls</a>
                        <br />
                        <a class="btn btn-default btn-sm rtmp" href="@item.GetDataValue("subrtmp")">subrtmp</a>
                        <a class="btn btn-default btn-sm flv" href="@item.GetDataValue("subflv")">subflv</a>
                        <a class="btn btn-default btn-sm hls" href="@item.GetDataValue("subhls")">subhls</a>
                        <br />
                        <a class="btn btn-default btn-sm api" href="/Home/Restart/@item.Number">重启推流</a>
                        <a class="btn btn-default btn-sm" target="_blank" href="/Home/Image/@item.Number">截图</a>
                    </div>
                    <div class="ptz" style="display:none;">
                        @if (item.GetDataValue("Ptz3DZoomSupport") == "是")
                        {
                            <div class="box-body" style="text-align:center;">
                                <a class="btn btn-default btn-sm cmd" href="/camera/21zoomin/?id=@item.Number">放大</a>
                                <a class="btn btn-default btn-sm cmd" href="/camera/22zoomout/?id=@item.Number">缩小</a>
                                <a class="btn btn-default btn-sm cmd" href="/camera/23stop/?id=@item.Number">停止</a>
                                <a class="btn btn-default btn-sm cmd" href="/camera/24left/?id=@item.Number">左</a>
                                <a class="btn btn-default btn-sm cmd" href="/camera/25right/?id=@item.Number">右</a>
                                <a class="btn btn-default btn-sm cmd" href="/camera/26up/?id=@item.Number">上</a>
                                <a class="btn btn-default btn-sm cmd" href="/camera/27down/?id=@item.Number">下</a>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
}
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">
                    网页播放器
                </h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script src="~/lib/clappr/clappr.min.js"></script>
    <script src="~/lib/clappr/clappr-rtmp-plugin/rtmp.min.js"></script>
    <script src="~/lib/flv.js/flv.min.js"></script>
    <script src="~/lib/hls.js/hls.min.js"></script>
    <script>
        var rtmpPlayer;
        var flvPlayer;
        var hlsPlayer;
        var timer;
        var decodedFrames;
        $('.rtmp').click(function () {
            var id = 'rtmpPlayer';
            var url = $(this).attr('href');
            if (!navigator.plugins['Shockwave Flash']) {
                $('.modal-body').html('<a href="http://www.adobe.com/go/getflashplayer" rel="nofollow" target="_blank" title="启用Flash" class="btn btn-default btn-sm flash">启用Flash</a>');
            }
            else {
                $('.modal-body').html('<div id="rtmpPlayer" class="video"></div>');
                var videoElement = document.getElementById(id);
                if (rtmpPlayer != null) {
                    closePlayer();
                }

                rtmpPlayer = new Clappr.Player({
                    source: url,
                    autoPlay: true,
                    mute: true,
                    parentId: "#" + id,
                    plugins: { 'playback': [RTMP] },
                    rtmpConfig: {
                        swfPath: '/lib/clappr/clappr-rtmp-plugin/assets/RTMP.swf',
                        scaling: 'stretch',
                        playbackType: 'live',
                        bufferTime: 1,
                        startLevel: 0
                    },
                });
            }
            $('#modal-default').modal('show');
            return false;
        });
        $('.flv').click(function () {
            $('.modal-body').html('<video id="flvPlayer" class="video" muted controls autoplay></video>');
            $('.modal-body').append($(this).parents('.camera').find('.ptz').html());
            try {
                if (flvPlayer != null) {
                    closePlayer();
                }
                var url = $(this).attr('href');
                playFlv(url);
            } catch (e) {
                console.log('error:');
                console.log(e);
            }
            $('#modal-default').modal('show');
            return false;
        });
        function playFlv(url) {
            var id = 'flvPlayer';
            var videoElement = document.getElementById(id);
            flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: url,
                isLive: true,
                cors: true
            }, {
                    enableWorker: true,
                    enableStashBuffer: false,
                    stashInitialSize: 1,
                    fixAudioTimestampGap: false,
                    //lazyLoad: false
                });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            timer = setInterval(function () {
                console.log('.');
                if (flvPlayer.statisticsInfo.speed == 0) {
                    console.log('reload1');
                    closePlayer();
                    playFlv(url);
                }
                else if (decodedFrames && flvPlayer.statisticsInfo.decodedFrames <= decodedFrames) {
                    console.log('reload2');
                    closePlayer();
                    playFlv(url);
                }
                else if (flvPlayer.buffered.end(0) - flvPlayer.currentTime > 1) {
                    console.log('reset currentTime');
                    flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.001;
                }
                decodedFrames = flvPlayer.statisticsInfo.decodedFrames;
            }, 10 * 1000);
        }

        $('.hls').click(function () {
            try {
                var id = 'hlsPlayer';
                var url = $(this).attr('href');
                $('.modal-body').html('<video id="hlsPlayer" class="video" muted controls autoplay></video>');
                $('.modal-body').append($(this).parents('.camera').find('.ptz').html());
                if (hlsPlayer != null) {
                    closePlayer();
                }
                var video = document.getElementById(id);
                hlsPlayer = new Hls();
                hlsPlayer.loadSource(url);
                hlsPlayer.attachMedia(video);
                hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function () {
                    video.play();
                });
                $('#modal-default').modal('show');
            } catch (e) {
                console.log(e);
            }
            return false;
        });
        $('.ios').click(function () {
            try {
                var id = 'hlsPlayer';
                $('.modal-body').html('<video id="hlsPlayer" class="video" muted controls autoplay></video>');
                $('.modal-body').append($(this).parents('.camera').find('.ptz').html());
                var video = document.getElementById(id).src = $(this).attr('href');
                $('#modal-default').modal('show');
            } catch (e) {
                console.log(e);
            }
            return false;
        });
        $('.close').click(function () {
            closePlayer();
        });
        function closePlayer() {
            console.log('close player');
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            if (rtmpPlayer != null) {
                rtmpPlayer.destroy();
                rtmpPlayer = null;
            }
            if (flvPlayer != null) {
                flvPlayer.pause();
                flvPlayer.unload();
                flvPlayer.detachMediaElement();
                flvPlayer.destroy();
                flvPlayer = null;
            }
            if (hlsPlayer != null) {
                hlsPlayer.destroy();
            }
            $('#callback .page-content .block').html('');
        }
        $('.api').click(function () {
            $.getJSON($(this).attr('href'), function (response) {
                alert(response);
            }).fail(function (jqxhr, textStatus, error) {
                var err = textStatus + ", " + error;
                alert(err);
            });
            return false;
        });
        $('body').on('click', '.cmd', function () {
            $.getJSON($(this).attr('href'), function (response) {
                console.log(response);
            }).fail(function (jqxhr, textStatus, error) {
                var err = textStatus + ", " + error;
                alert(err);
            });
            return false;
        });
    </script>
}