我需要知道HLS 或 DASH 是否支持实时360 度视频。这个功能对我来说真的很重要。
问问题
1007 次
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 回答