1

我需要知道HLS 或 DASH 是否支持实时360 度视频。这个功能对我来说真的很重要。

4

1 回答 1

0

Ant Media Server 支持 360 视频直播。您可以将 HLS 和 WebRTC 与 360 度实时视频一起使用。

这是 WebRTC 360 实时视频示例页面:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ant Media Server</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githubusercontent.com/ant-media/StreamApp/master/src/main/webapp/js/webrtc_adaptor.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        setTimeout(function(){
            $(".a-enter-vr-button").click();
        },3000);
        AFRAME.registerComponent('vr-mode-on',{
            schema:{
                tagName:{type:'string',default:"video"}
            },
            init:function(){
                this.el.addEventListener("click",function() {
                    $(".a-enter-vr-button").click();
                });
            }
        });

    </script>
</head>
<body>

<a-scene inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js">
    <a-box position="-10 -3 -6" rotation="45 45 45" color="red" id="play" vr-mode-on
    >
    </a-box>
    <video id="remoteVideo" autoplay controls playsinline></video>
    <a-text position="-8 3 -8" value="Hello, World!" color="red" scale="3 3 3"></a-text>

    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-entity distance="0.0" video-controls="src:#video"></a-entity>
    <a-camera>
        <a-cursor color="#FF0000"></a-cursor>
    </a-camera>


    <a-videosphere src="#remoteVideo" rotation="0 180 0" style="background-color: antiquewhite"></a-videosphere>
</a-scene>


<script>

    let video ;
    var playOrder = ["webrtc"];


    var name = "antmedia";
    var token = "null";

    var webRTCAdaptor = null;
    var streamsFolder = "streams";

    initializeWebRTCPlayer(name, token);


    function initializeWebRTCPlayer(name, token, noStreamCallback) {

        video =document.getElementById("remoteVideo");
        document.getElementById("remoteVideo").style.display = "block";

        var pc_config = null;

        var sdpConstraints = {
            OfferToReceiveAudio: true,
            OfferToReceiveVideo: true

        };
        var mediaConstraints = {
            video: false,
            audio: false
        };

        var appName = location.pathname.substring(0, location.pathname.lastIndexOf("/") + 1);
        var path = location.hostname + ":" + location.port + appName + "websocket";
        var websocketURL = "ws://localhost:5080/LiveApp/websocket";


        webRTCAdaptor = new WebRTCAdaptor({
            websocket_url: websocketURL,
            mediaConstraints: mediaConstraints,
            peerconnection_config: pc_config,
            sdp_constraints: sdpConstraints,
            remoteVideoId: "remoteVideo",
            isPlayMode: true,
            debug: true,
            callback: function (info, description) {
                if (info == "initialized") {
                    console.log("initialized");
                    webRTCAdaptor.getStreamInfo(name);
                } else if (info == "streamInformation") {
                    console.log("stream information");
                    webRTCAdaptor.play(name, token);
                } else if (info == "play_started") {
                    //joined the stream
                    console.log("play started");
                   // document.getElementById("video_info").style.display = "none";
                   // playWebRTCVideo();
                } else if (info == "play_finished") {
                    //leaved the stream
                    console.log("play finished");
                    //check that publish may start again
                    setTimeout(function () {
                        webRTCAdaptor.getStreamInfo(name);
                    }, 3000);
                } else if (info == "closed") {
                    //console.log("Connection closed");
                    if (typeof description != "undefined") {
                        console.log("Connecton closed: " + JSON.stringify(description));
                    }
                }

            },
            callbackError: function (error) {
                //some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError

                console.log("error callback: " + JSON.stringify(error));

            }
        });
    }
</script>

</body>
</html>

这是 HLS 360 实时视频示例页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
    <title>Title</title>
</head>
<body>

<a-scene inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js">
    <a-box position="-10 -3 -6" rotation="45 45 45" color="red" id="play"
         >
    </a-box>
    <video id="video" autoplay loop crossorigin="anonymous" muted controls src="http://localhost:5080/LiveApp/streams/antmedia.m3u8">
    </video>
    <a-text  position="-8 3 -8" value="Hello, World!" color="red" scale="3 3 3"></a-text>

    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-entity distance="0.0" video-controls="src:#video"></a-entity>
    <a-camera>
        <a-cursor color="#FF0000"></a-cursor>
    </a-camera>


    <a-videosphere src="#video" rotation="0 180 0" style="background-color: antiquewhite"></a-videosphere>
</a-scene>
</body>
</html>


<script>
    let video = document.getElementById('video');
    if(Hls.isSupported()) {

        var hls = new Hls({
            debug: true
        });
        hls.loadSource('http://localhost:5080/LiveApp/streams/antmedia.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function() {
            video.muted = true;
            video.play();
        });
    }
        // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
        // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
    // This is using the built-in support of the plain video element, without using hls.js.
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'http://localhost:5080/LiveApp/streams/antmedia.m3u8';
        video.addEventListener('canplay',function() {
            video.play();
        });
    }
    let box = document.getElementById("play");
    box.addEventListener("mouseenter",function(){
        box.setAttribute("scale",{
            x:3,
            y:3,
            z:3
        })
    });

    box.addEventListener("click",function(){
        box.setAttribute("color","blue");
        video.pause();

    });
</script>

这些示例由antmediaStream ID 和LiveApp应用程序名称配置。您可以根据您的 Stream ID 和 Application 进行更改。

于 2020-08-08T20:57:28.417 回答