my problem is, I have script, that take video from camera. On my iPhone, there is problem, I can't use BLOB as URL for <video></video>
, so I used FileReader, that makes base64 from BLOB. But I found another problem. When I take video in portrait mode, the captured video is in landscape mode, is so much wide. I need rotate that video to portrait mode. I don't know, if I have mistake in Blob or FileReader code. Can you help me please? Thanks.
This is my HTML Code:
<video autoplay="true" id="cameraVideo" playsinline webkit-playsinline>
This is my Javascript Code:
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();
}
}
});
Pictures: