iOS MediaRecorder-通过MediaRecorder和HTML5视频通过摄像头录制视频

Question

问题：

• 无法通过我的网络应用程序在iOS上录制视频或从相机获取视频流，这是通过ng build运行的

调查：

• 查看了与Apple iOSwebsockets、MediaRecorder和getUserDevices()相关的各种网站
• 还有规范和版本支持的规范。我找到的所有文档都说MediaRecorder是一个实验性功能，需要手动启用

其他：

• 我的代码在Android Chrome、桌面Chrome、Opera(PC/Mobile(和firefox(PC/Mobile(上运行良好

遗憾的是，我不知道该怎么办。因为文档说iOS不支持录制API。

• 我的网站正在使用具有有效证书的https

任何提示、链接、资源或代码都将不胜感激。

Answer 1

我想您已经找到了问题的答案。

根据您目前的实现，您将无法支持Safari或任何iOS浏览器(它们都是Webkit/Safari(。

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

有一些标志可以让它发挥作用，但这不是你通常可以要求客户做的事情：(

Doug

Answer 2

2022适用于IOS的MediaRecorder

从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的画布元素

此外(在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()，而不必经历设置画布元素的痛苦
此外，一般建议使用video/webm。

重要提示
如果您不打算以任何方式编辑视频，直接将localStream传递到MediaRecorder也可以，它还允许您录制用户的音频。

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