使用RecordRTC能调用苹果摄像头但是看不到画面
试过好多方法了，无论是兼容性的代码，苹果都是不能调用摄像头的，我使用了RecordRTC，但是调用了摄像头，我看到苹果那里有个绿点，就是显示不出来画面，看很多人都说这个库对ios不兼容，ios到底能不能做兼容呀
//网上复制的代码
```javascript
var scale = 1;
var recorder;
var video = document.getElementById("video");
var video_width = 1280;
var video_height = 720;
var video_fps = 60;
var timer = null;
var start_time;
var now_time;
//默认编码
let mimeType = "video/webm\;codecs=h265";
let recorderType = MediaStreamRecorder;
//加入对支持的编码格式进行测试的代码
isMimeTypeSupported("video/webm\;codecs=h265"); //H26四，把5改成4 因为有审核发不出来
isMimeTypeSupported("video/x-matroska;codecs=avc1"); //MKV
isMimeTypeSupported("video/webm\;codecs=vp9"); //VP9
isMimeTypeSupported("video/webm\;codecs=vp8"); //VP8
isMimeTypeSupported("video/mpeg"); // video/mp4;codecs=avc1
isMimeTypeSupported("video/mp4;codecs=avc1"); // video/mp4;codecs=avc1
isMimeTypeSupported("video/webm"); // do NOT pass any codecs (vp8 by default)
//自行切换编码格式
if (isMimeTypeSupported(mimeType) === false) {
mimeType = "video/x-matroska;codecs=avc1"; // MKV
if (isMimeTypeSupported(mimeType) === false) {
mimeType = "video/webm\;codecs=vp9"; // VP9
if (isMimeTypeSupported(mimeType) === false) {
mimeType = "video/webm\;codecs=vp8"; // VP8
if (isMimeTypeSupported(mimeType) === false) {
mimeType = "video/webm"; // 不使用任何编码器 (默认vp8)
if (isMimeTypeSupported(mimeType) === false) {
//切换到Whammy编码器 (WebP+WebM)
mimeType = "video/webm";
recorderType = WhammyRecorder;
}
}
}
}
}
function isMimeTypeSupported(mimeType) {
if (typeof MediaRecorder === "undefined") {
console.log(mimeType, "is *** NOT *** supported.");
return false;
}
if (typeof MediaRecorder.isTypeSupported !== "function") {
console.log(mimeType, "is supported.");
return true;
}
var ret = MediaRecorder.isTypeSupported(mimeType);
if (ret === false) {
console.log(mimeType, "is *** NOT *** supported.");
} else {
console.log(mimeType, "is supported.");
}
return ret;
}
//开启摄像头之后显示底部信息
function show_bottom() {
document.getElementById("overlay-bottom-left-text").style.display = "";
document.getElementById("overlay-bottom-right-text").style.display = "";
document.getElementById("div_logo").classList.add("fade");
document.getElementById(
"overlay-bottom-right-text"
).innerText = `${video_width} x ${video_height}`;
document.getElementById(
"overlay-bottom-left-text"
).innerText = `${video_fps} FPS`;
}
//开始为录像时间计时
function start_count() {
document.getElementById("overlay-top-left-text").style.display = "";
document.getElementById("overlay-top-right-text").style.display = "";
document
.querySelector(".overlay")
.style.setProperty("--border-style", "2px solid red");
//计时器并不准确，所以使用内置时钟的当前时间减去之前时间的差值来表示录像时间
let dt = new Date();
start_time = dt.getTime();
timer = setInterval(function () {
let d = new Date();
let now_time = d.getTime();
let diff_time = now_time - start_time;
let mini_sec = Math.floor((diff_time % 1000) / 10)
.toString()
.padStart(2, "0"); //秒数后面两位
let sec = Math.floor((diff_time % 60000) / 1000)
.toString()
.padStart(2, "0"); //秒数
let minute = Math.floor((diff_time % 360000) / 60000)
.toString()
.padStart(2, "0"); //分钟数
document.getElementById(
"overlay-top-right-text"
).innerText = `${minute}:${sec}:${mini_sec}`;
}, 10);
}
//停止计时
function stop_count() {
document.getElementById("overlay-top-left-text").style.display = "none";
document.getElementById("overlay-top-right-text").style.display =
"none";
document
.querySelector(".overlay")
.style.setProperty("--border-style", "2px solid white");
clearInterval(timer);
}
async function open_camera() {
//录像功能使用RecordRTC https://github.com/muaz-khan/RecordRTC
//官网 https://recordrtc.org/
//RecordRTC是WebRTC-Experiment的一部分 https://github.com/muaz-khan/WebRTC-Experiment/tree/master
//获取分辨率部分代码参考 https://usefulangle.com/post/355/javascript-get-camera-resolution
//没有直接的方法获取相机支持的最大分辨率。所以只能指定一个最大的理想值，如果可用则设为理想值
//如果理想值不可用，则浏览器将使用最接近理想值的值。
//WebRTC获取相机分辨率的一个实例代码 https://webrtc.github.io/samples/src/content/getusermedia/resolution/ *****值得参考!!!****
navigator.mediaDevices
.getUserMedia({
audio: true,
video: {
width: {
ideal: 3840
},
height: {
ideal: 2160
},
frameRate: {
ideal: 60
},
},
})
.then(async function (stream) {
let settings = stream.getVideoTracks()[0].getSettings();
video_width = settings.width;
video_height = settings.height;
video_fps = settings.frameRate;
//console.log("视频实际宽度: " + width + "px");
//console.log("视频实际高度: " + height + "px");
//console.log("视频实际FPS: " + video_fps);
//设置video 宽度 高度 和 视频流
video.width = video_width;
video.height = video_height;
video.srcObject = stream;
recorder = RecordRTC(stream, {
type: "video",
mimeType: "video/mp4",
recorderType: recorderType,
});
show_bottom();
//禁用open按钮，启用录像和截图按钮
document.getElementById("record").disabled = false;
//document.getElementById("photo").disabled = false;
//document.getElementById("open").disabled = true;
})
.catch(function (e) {
console.log(e);
alert("分辨率无效，请重新选择并开启摄像头");
});
}
//是跟我的导入有关系嘛 下面两个包我没有，因为看了其他文档只需要导一个包就好了，火狐浏览器可以显示画面
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<!-- use 5.5.6 or any other version on cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.5.6/RecordRTC.js"></script>
<!-- NPM i.e. "npm install recordrtc" -->
<script src="node_modules/recordrtc/RecordRTC.js"></script>
<!-- bower -->
<script src="bower_components/recordrtc/RecordRTC.js"></script>
```
【相关推荐】
- 这篇博客: RecordRTC的视频录制，回放，截图，下载中的 RecordRTC的视频录制及播放 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
recordRTC是前端的一个视频录制的工具，用于音频+视频+屏幕+画布（2D+3D动画）录制的WebRTC JavaScript库。
最下面会贴出所有相关代码。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^