问题描述
我遇到了来自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这将拍摄视频并作为画布发送。