Блог

Проблема:

• Не удается записать видео или получить видеопоток с камеры на iOS через мое веб-приложение, оно работает под управлением angular и строится через ng build

Расследование:

• Просмотр различных веб-сайтов, связанных с Apple iOS websockets , MediaRecorder , и getUserDevices()
• Также поддерживаются спецификации и версии. во всех документах, которые я нашел, говорится, что MediaRecorder это экспериментальная функция, которую необходимо включить вручную.

Другое:

• Мой код отлично работает на Android Chrome, Desktop Chrome, Opera (ПК / мобильный) и firefox (ПК / мобильный)

К сожалению, я не уверен, что делать. поскольку в документах говорится, что iOS не поддерживает API записи.

• Мой сайт использует https с действительными сертификатами.

Любые советы, ссылки, ресурсы или код будут оценены.

Я думаю, вы уже нашли ответ на свой вопрос.

С вашей текущей реализацией вы не сможете поддерживать Safari или ЛЮБОЙ браузер iOS (все они представляют собой Webkit / Safari под капотом).

https://caniuse.com/?search=MediaRecorder

Есть флаги, которые вы можете включить, чтобы заставить его работать, но это не то, что вы обычно можете попросить своих клиентов сделать 🙂

Даг

2022 MediaRecorder для IOS

Начиная с Safari 14.5, вы можете использовать MediaRecorder API.
Вот рабочий пример использования MediaRecorder и getUserMedia() .

     startIOSVideoRecording: function() {
        console.log("setting up recorder");
        let self = this;
        this.data = [];

        if (MediaRecorder.isTypeSupported('video/mp4')) {
            // IOS does not support webm! So you have to use mp4.
            var options = {mimeType: 'video/mp4', videoBitsPerSecond : 1000000};
        } else {
            // video/webm is recommended for non IOS devices
            console.error("ERROR: Is this really an IOS device??");
            var options = {mimeType: 'video/webm'};
        }

        // this has to be a canvas element (not video!)
        let stream = document.getElementById('self-canvas').captureStream(15);
        this.recorder = new MediaRecorder(stream, options);

        this.recorder.ondataavailable = function(evt) {
            if (evt.data amp;amp; evt.data.size > 0) {
                self.data.push(evt.data);
                console.log('chunk size: '   evt.data.size);
            }
        }

        this.recorder.onstop = function(evt) {
            console.log('recorder stopping');
            var blob = new Blob(self.data, {type: "video/mp4"});
            // do something with the blob
        }
        this.recorder.start(1000);
        looper();
    },
  

Имейте в виду, что IOS по-прежнему не поддерживает video.captureStream() или video/webm вообще не поддерживает, поэтому вам нужно будет настроить видеоэлемент для подключения navigator.mediaDevices.getUserMedia() и элемент canvas для MediaRecorder.

Кроме того (на IOS) вы можете объявлять только один и только один getUserMedia() поток одновременно! Поэтому лучше всего сделать видеоэлемент или поток глобальными с this.video или this.localStream на случай, если другие элементы захотят получить доступ к потоку.

 this.localStream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {width: 430, height: 430, facingMode: "user"}
});

let self = this;
self.video = document.createElement('video');
self.video.srcObject = this.localStream;
const canvas = document.getElementById("self-canvas");
const ctx = canvas.getContext('2d');

function draw_2DCanvas(){
    ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.drawImage(self.video, 0, 0, 430, 430);
    }
    requestAnimationFrame(draw_2DCanvas);
}
draw_2DCanvas();
  

На любом другом устройстве вы можете просто использовать video.captureStream() , не испытывая трудностей при настройке элемента canvas.
Также video/webm рекомендуется в целом.

Важное замечание
Если вы не планируете каким-либо образом редактировать видео, прямая передача localStream на MediaRecorder также будет работать, и это также позволит вам записывать аудио пользователя.

 this.recorder = new MediaRecorder(this.localStream, options);