Ant Media Server 将视频旋转90度

Question

我在使用来自 iOS 的 Ant Media Server WebRTC 流式传输时遇到问题。当我在 iOS 中发布纵向模式的流时，在 HLS 播放器上可以看到它旋转了 90 度。旋转的视频也会发送到 RTMP 端点。我该如何解决这个问题？

Answer 1

如果视频作为 canvas 发送，则可以解决此问题。首先注释掉webRTCAdaptor初始化中的localVideoId.

        webRTCAdaptor = new WebRTCAdaptor({
            websocket_url : websocketURL,
            mediaConstraints : mediaConstraints,
            peerconnection_config : pc_config,
            sdp_constraints : sdpConstraints,
            localStream: localStream,
            //localVideoId : "localVideo",
            debug:true,
            bandwidth:900,

然后在 ID 为 localVideo 的视频正上方添加一个 canvas 并确保它已隐藏。

            <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,0,0,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);
    });

这将拍摄视频并作为 canvas 发送。

Ant Media Server 将视频旋转90度

Ant Media Server rotates video 90 degree

ant-media-server