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);