唤日映雪 2019-04-21 20:29 采纳率: 0%
浏览 4796
已结题

如何在谷歌浏览器使用RTSP视频流

如何在谷歌浏览器导入RTSP的视频流，要求：
1）不要说什么vlc插件了，不可以的
2）Streamedian可能成功，最好是这个
3）最好详细一点，博客的东西看了，模棱两可的看不懂
4）其他方法也可以

  • 写回答

7条回答

  • 启明星在这里 2019-04-22 15:35
    关注

    官网实例，下载个Streamedian.js就可以用
    https://streamedian.com/#downloads

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Streamedian RTSP player example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sourcesNode"></div>
<div>
    <input  id="stream_url" size="36">
    <button id="set_new_url">Set</button>
</div>
<div>
    <p style="color:#808080">Enter your rtsp link to the stream, for example: "rtsp://192.168.1.1:554/h264"</p>
</div>

<div>
    <input id="buffer_duration" type="range" min="10" max="200" style="width:40%;">
    <span  id="buffer_value">120sec.</span>
</div>

<div>
    <p style="color:#808080">Change buffer duration</p>
</div>

<video id="test_video" controls autoplay>
    <!--<source src="rtsp://192.168.10.205:554/ch01.264" type="application/x-rtsp">-->
    <!--<source src="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" type="application/x-rtsp">-->
</video>

<div class="controls form">
    <div>
        Playback rate:&nbsp;
        <input id="rate" class="input" type="range" min="0.5" max="5.0" value="1.0" step="0.5">
        <output for="rate" id="rate_res">live</output>
    </div>
    <div>
        <button id="to_end" class="btn btn-success">live</button>
    </div>
</div>

<p><br>Have any suggestions to improve our player? <br>Feel free to leave comments or ideas email: streamedian.player@gmail.com</p>
<p>View HTML5 RTSP video player log</p>
<div id="pllogs" class="logs"></div>
<button class="btn btn-success" onclick="cleanLog(pllogs)">clear</button>
<button class="btn btn-success" onclick="scrollset(pllogs, true)">scroll up</button>
<button class="btn btn-success" onclick="scrollset(pllogs, false)">scroll down</button>
<button id="scrollSetPl" class="btn btn-success" onclick="scrollswitch(pllogs)">Scroll off</button>
<br/><br/>

<script src="streamedian.min.js"></script> <!-- Path to player js-->

<script>
    var scrollStatPl = true;
    var scrollStatWs = true;
    var pllogs = document.getElementById("pllogs");
    var wslogs = document.getElementById("wslogs");

    // define a new console
    var console=(function(oldConsole){
        return {
            log: function(){
                oldConsole.log(newConsole(arguments, "black", "#A9F5A9"));
            },
            info: function () {
                oldConsole.info(newConsole(arguments, "black", "#A9F5A9"));
            },
            warn: function () {
                oldConsole.warn(newConsole(arguments, "black", "#F3F781"));
            },
            error: function () {
                oldConsole.error(newConsole(arguments, "black", "#F5A9A9"));
            }
        };
    }(window.console));

    function newConsole(args, textColor, backColor){
        let text = '';
        let node = document.createElement("div");
        for (let arg in args){
            text +=' ' + args[arg];
        }
        node.appendChild(document.createTextNode(text));
        node.style.color = textColor;
        node.style.backgroundColor = backColor;
        pllogs.appendChild(node);
        autoscroll(pllogs);
        return text;
    }

    //Then redefine the old console
    window.console = console;

    function cleanLog(element){
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
    }

    function autoscroll(element){
        if(scrollStatus(element)){
            element.scrollTop = element.scrollHeight;
        }
        if(element.childElementCount > 1000){
            element.removeChild(element.firstChild);
        }
    }

    function scrollset(element, state){
        if(state){
            element.scrollTop = 0;
            scrollChange(element, false);
        } else {
            element.scrollTop = element.scrollHeight;
            scrollChange(element, true);
        }
    }

    function scrollswitch(element){
        if(scrollStatus(element)){
            scrollChange(element, false);
        } else {
            scrollChange(element, true);
        }
    }

    function scrollChange(element, status){
        if(scrollStatus(element)){
            scrollStatPl = false;
            document.getElementById("scrollSetPl").innerText = "Scroll on";
        } else {
            scrollStatPl = true;
            document.getElementById("scrollSetPl").innerText = "Scroll off";
        }
    }

    function scrollStatus(element){
        if(element.id === "pllogs"){
            return scrollStatPl;
        } else {
            return scrollStatWs;
        }
    }


</script>

<script>
    if (window.Streamedian) {
        let errHandler = function(err){
            alert(err.message);
        };

        let infHandler = function(inf) {
            let sourcesNode = document.getElementById("sourcesNode");
            let clients = inf.clients;
            sourcesNode.innerHTML = "";

            for (let client in clients) {
                clients[client].forEach((sources) => {
                    let nodeButton = document.createElement("button");
                    nodeButton.setAttribute('data', sources.url + ' ' + client);
                    nodeButton.appendChild(document.createTextNode(sources.description));
                    nodeButton.onclick = (event)=> {
                        setPlayerSource(event.target.getAttribute('data'));
                    };
                    sourcesNode.appendChild(nodeButton);
                });
            }
        };

        var playerOptions = {
            socket: "你的websocket",            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };
            console.log(playerOptions)
        var html5Player  = document.getElementById("test_video");
        var urlButton    = document.getElementById("set_new_url");
        var urlEdit      = document.getElementById("stream_url");
        var bufferRange  = document.getElementById("buffer_duration");
        var bufferValue  = document.getElementById("buffer_value");

        var player = Streamedian.player('test_video', playerOptions);
        console.log(player)
        var nativePlayer = document.getElementById('test_video');
        var range = document.getElementById('rate');
        var set_live = document.getElementById('to_end');
        var range_out = document.getElementById('rate_res');

        range.addEventListener('input', function () {
            nativePlayer.playbackRate = range.value;
            range_out.innerHTML = `x${range.value}`;
        });
        set_live.addEventListener('click', function () {
            range.value = 1.0;
            range_out.innerHTML = `live`;
            nativePlayer.playbackRate = 1;
            nativePlayer.currentTime = nativePlayer.buffered.end(0);
        });

        var updateRangeControls = function(){
            bufferRange.value     =  player.bufferDuration;
            bufferValue.innerHTML = bufferRange.value + "sec.";
        };

        bufferRange.addEventListener('input', function(){
            var iValue = parseInt(this.value, 10);
            player.bufferDuration = iValue;
            bufferValue.innerHTML = this.value + "sec.";
        });

        bufferRange.innerHTML = player.bufferDuration + "sec.";
        updateRangeControls();

        urlButton.onclick = ()=> {
            setPlayerSource(urlEdit.value);
        };

        function setPlayerSource(newSource) {
            player.destroy();
            player = null;
            html5Player.src = newSource;
            player = Streamedian.player("test_video", playerOptions);
            updateRangeControls();
        }
    }
</script>
<style>
body {
    max-width: 720px;
    margin: 50px auto;
}

#test_video {
    width: 720px;
}

.controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
input.input, .form-inline .input-group>.form-control {
    width: 300px;
}
.logs {
    overflow: auto;
    width: 720px;
    height: 150px;
    padding: 5px;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
}
button {
    margin: 5px
}
</style>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元