iOS MediaRecorder - 通過MediaRecorder和HTML5 Video通過攝像頭錄制視頻

Question

問題：

• 無法通過我的 web 應用程序錄制視頻或從 iOS 上的攝像頭獲取視頻 stream，這是運行 angular 並通過ng build

調查：

• 查看與 Apple iOS websockets 、 MediaRecorder和getUserDevices()有關的各種網站
• 規范和版本也支持規范。 我發現的所有文檔都說MediaRecorder是一項實驗性功能，需要手動啟用。

其他：

• 我的代碼在 Android Chrome、桌面 Chrome、Opera（PC/移動）和 firefox（PC/移動）上運行良好

可悲的是我不知道該怎么辦。 因為文檔說 iOS 不支持錄音 API。

• 我的站點正在使用具有有效證書的 https。

任何提示、鏈接、資源或代碼將不勝感激。

Answer 1

我想你已經找到了你問題的答案。

使用您當前的實現，您將無法支持 Safari 或任何 iOS 瀏覽器（它們都是引擎蓋下的 Webkit/Safari）。

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

您可以啟用一些標志來使其工作，但這不是您通常可以要求客戶做的事情:)

道格

Answer 2

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 && 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()和一個用於 MediaRecorder 的 canvas 元素。

另外（在 IOS 上）你一次只能聲明一個getUserMedia() stream ！ 因此最好使用this.video或this.localStream使視頻元素或 stream 全局化，以防其他元素想要訪問 stream。

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()而無需 go 盡管設置 canvas 元素的痛苦。
通常也推薦使用video/webm 。

重要的提示
如果您不打算以任何方式編輯視頻，直接將localStream傳遞給 MediaRecorder 也可以，並且還可以讓您錄制用戶的音頻。

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