如何解决Ant Media Server将视频旋转90度
我遇到了来自iOS的Ant Media Server WebRTC流媒体的问题。当我在iOS中以纵向模式发布流时,可以在HLS播放器上将其旋转90度查看。旋转后的视频也将发送到RTMP端点。我该如何解决?
解决方法
如果视频作为画布发送,则可以解决此问题。
首先在webRTCAdaptor的初始化中注释掉 webRTCAdaptor = new WebRTCAdaptor({
websocket_url : websocketURL,mediaConstraints : mediaConstraints,peerconnection_config : pc_config,sdp_constraints : sdpConstraints,localStream: localStream,//localVideoId : "localVideo",debug:true,bandwidth:900,
。
canvas
然后在其ID为localVideo
的视频上方添加一个 <div class="col-sm-12 form-group">
<canvas id="canvas" hidden></canvas>
<video id="localVideo" autoplay muted controls playsinline></video>
</div>
,并确保其隐藏。
initWebRTCAdaptor(false,autoRepublishEnabled);
然后在脚本末尾删除 var canvas = document.getElementById('canvas');
var vid = document.getElementById('localVideo');
var ctx = canvas.getContext('2d');
function draw() {
if (canvas.getContext) {
if(vid.videoHeight!==0){
canvas.height=vid.videoHeight;
canvas.width=vid.videoWidth;
}
ctx.drawImage(vid,vid.videoWidth,vid.videoHeight);
}
}
//update canvas for every 25ms
setInterval(function() { draw(); },50);
//capture stream from canvas
var localStream = canvas.captureStream(25);
navigator.mediaDevices.getUserMedia({video: true,audio:true}).then(function
(stream) {
var video = document.querySelector('video#localVideo');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
localStream.addTrack(stream.getAudioTracks()[0]);
//initialize the WebRTCAdaptor
initWebRTCAdaptor(false,autoRepublishEnabled);
});
并替换为以下代码段:
-append
这将拍摄视频并作为画布发送。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。