iOS Safari 视频录制 Blob/FileReader 错误

Jak*_*era 5 javascript video blob mobile-safari filereader

我的问题是,我有脚本,可以从相机拍摄视频。在我的 iPhone 上,有问题,我不能使用 BLOB 作为 URL <video></video>,所以我使用了 FileReader,它从 BLOB 生成 base64。但我发现了另一个问题。当我以纵向模式拍摄视频时,捕获的视频处于横向模式,非常宽。我需要将该视频旋转到纵向模式。我不知道,如果我在 Blob 或 FileReader 代码中有错误。你能帮我吗?谢谢。

这是我的 HTML 代码:

<video autoplay="true" id="cameraVideo" playsinline webkit-playsinline>
Run Code Online (Sandbox Code Playgroud)

这是我的 Javascript 代码:

var video = document.querySelector("#cameraVideo");
var mode = "rear";
var mediaRecorder;
var chunks = [];
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({video: { facingMode: "environment" } }).then(function (stream) {
                video.srcObject = stream;
                mediaRecorder = new MediaRecorder(stream);
    }).catch(function (err0r) {
                alert("Something went wrong!");
    });
}
$(".camera").find(".take").on("touchstart mousedown", function() {
    mediaRecorder.start();
    mediaRecorder.ondataavailable = function(ev) {
        chunks.push(ev.data);
    }
});
$(".camera").find(".take").on("touchend mouseup", function() {
    mediaRecorder.stop();
    mediaRecorder.onstop = (ev)=>{
    var blob = new Blob(chunks, { 'type' : 'video/mp4' });
    chunks = [];
    var videoURL = webkitURL.createObjectURL(blob);
    if(video.srcObject) video.srcObject.getTracks().forEach(t => t.stop());
        var reader = new FileReader();
        reader.readAsDataURL(blob); 
        reader.onloadend = function() {
            document.getElementById("savevideo").src = reader.result;
            document.getElementById("savevideo").play();                
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

图片:

录制视频时: 录制视频时

录制视频时: 录制视频时