navigator.mediaDevices.getUserMedia在iphone chrome中不起作用
navigator.mediaDevices.getUserMedia是WebRTC（Web实时通信）API的一部分，用于在网页中访问设备的摄像头和麦克风，实现音视频通信。
然而，在iPhone上使用Chrome浏览器时，navigator.mediaDevices.getUserMedia可能无法正常工作。这是因为在iOS上，苹果限制了浏览器的功能，不允许使用WebRTC API进行原生的音视频通信。只有使用Safari浏览器才能正常访问设备的摄像头和麦克风。
为了解决这个问题，可以考虑以下几种方案：
- 使用Safari浏览器：如果你的应用程序或网站需要在iOS上使用摄像头和麦克风，建议用户在Safari浏览器中打开，这样可以正常使用navigator.mediaDevices.getUserMedia函数。
- 使用Cordova或React Native等跨平台开发框架：这些框架可以将网页应用封装成原生应用，通过调用原生API实现音视频功能。这样可以规避iOS上浏览器的限制。
- 使用第三方库或服务：有一些第三方库或服务可以在iOS上实现音视频通信功能，例如Agora、Twilio等。通过使用这些库或服务，可以绕过iOS浏览器的限制。
需要注意的是，在给出具体的腾讯云产品和链接时，不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等品牌商。
相关·内容
我使用navigator.mediaDevices.getUserMedia获取媒体 在iPhone的chrome中，但不工作 Chrome版本: 87 我的代码： // alert fine on safari and error on chrome
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
alert('fine')
} else {
alert('error')
}
浏览 191提问于2021-04-27得票数 0
1回答
我测试过https://webrtc.github.io/samples/src/content/getusermedia/record/，但它在iPhone、Safari或Chrome上似乎无法运行，出现了getUserMedia错误。 错误发生在默认情况下，我没有更改设置，以前从未尝试过，并且它从不提示摄像头访问。 单击启动摄像机： iPhone Safari: navigator.getUserMedia错误:错误:无效约束 iPhone Chrome: navigator.getUserMedia错误:类型错误:未定义的不是对象(计算'navigator.mediaDevic
浏览 44提问于2020-07-24得票数 0
我在条形码扫描器插件上出错了。它可以在chrome上工作，但在Firefox中不起作用。控制台出现错误：
navigator.mozGetUserMedia已被navigator.mediaDevices.getUserMedia取代
我的演示网址：
任何人请让我知道这个问题。
浏览 3提问于2017-08-14得票数 1
我正在尝试在getUserMedia的帮助下访问iOS Safari上的麦克风。下面你可以找到我的代码片段。
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// First get ahold of the legacy getUser
浏览 7提问于2018-11-05得票数 7
下面的代码在android移动设备上运行良好，但是在Chrome浏览器上的IOS (iPhone)上，下面的代码并不像预期的那样工作。我在IOS设备上看到了很多关于这个问题的问题。有人知道怎么解决这个问题吗？
customCamera.js：
this.Play = function (_this, stream) {
_this.stream = stream;
console.log(stream)
videoElement.srcObject = stream;
videoEleme
浏览 21提问于2022-01-16得票数 2
navigator.mediaDevices.getUserMedia()无法运行iOS 11独立应用程序。在Safari 11浏览器页面中工作。
这是故意的吗？暂时的？
此外，我甚至不能让Safari11 web inspector (MacOS sera10.12.6)识别在装有IOS11的iPhone 7上运行的任何独立web应用程序。它能够识别iOS11 iPhones之前的独立应用程序。此外，try{}catch{}显示，在运行iOS 11的iPhone 7中，navigator.mediaDevices.getUserMedia()不是来自独立应用的有效调用。
浏览 5提问于2017-10-06得票数 3
我有以下约束，这些约束在桌面(模拟移动分辨率)的Chrome上非常好地工作。
const constraints = {
audio: false,
video: {
width: screen.width,
height: screen.height
}
};
navigator.mediaDevices.getUserMedia(constraints).then(stream => {})
然而，当实际在iPhone / Safari上尝试这一点时，相机根本不尊重这一点，并且变得非常小或扭曲--从约束中去掉宽度/高度使其更好
浏览 3提问于2020-06-23得票数 4
回答已采纳
我想知道是否有一种方法可以检查不使用navigator.mediaDevices.getUserMedia的火狐对麦克风或摄像头的访问。例如，这段代码navigator.permissions.query({name : 'camera'})在Chrome上运行得很好，但火狐不支持permission.query中的camera和microphone。我不想使用navigator.mediaDevices.getUserMedia的原因是，如果我这样做，摄像头的权限模式和麦克风的权限模式会分开显示，摄像头的navigator.mediaDevices.getUserMedia(
浏览 0提问于2020-03-23得票数 1
我正试着从我的网络摄像头上得到一段视频。我的代码在Firefox和Microsoft中运行得很好，但在Chrome中却不起作用。我还在HTTPS服务器上托管我的代码，但没有工作。
我的守则：
<html>
<body>
<script>
navigator.mediaDevices.getUserMedia({video: true})
.then( stream => console.log("success") )
.catch( err => console.log(e
浏览 21提问于2022-05-05得票数 0
1回答
我试图在Javascript和网页中实现对麦克风的访问，
同时使用navigator.getUserMedia({audio: true})或navigator.mediaDevices.getUserMedia({audio:true})
(并实现对供应商前缀的检查：
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; )
，它响应于页面上按钮的单击事件而调用。
在IOS
浏览 0提问于2018-12-24得票数 4
我正在尝试使用webrtc实现屏幕共享功能。在火狐中，它是工作的，，但在chrome中，它显示“中止错误”。
var constraints = {
video: {
mandatory: {
chromeMediaSource: 'screen'
},
optional: []
},
audio: true,
};
if(navigator.mediaDevices.getUserMedia) {
navigator.med
浏览 0提问于2018-09-05得票数 1
在开发带有角度的视频聊天的同时，我也面临着这个问题。
ngOnInit() {
navigator.mediaDevices && navigator.mediaDevices.getUserMedia({audio:true, video: true})
.then(res=> console.log(res))
.catch(err => console.log("err: ", err));
}
控制台结果：
错误: DomException:无法启动视频源
这在桌面/Chrome上工作得很好，但在Android/C
浏览 7提问于2021-12-07得票数 0
麦克风许可被授予。
当我试图运行这个代码DOMException时，我得到了错误“await navigator.mediaDevices.getUserMedia({audio: true})”，没有任何详细的描述。
即使在console<中，当我运行此代码navigator.mediaDevices.getUserMedia({audio:true}) .then(stream => video.srcObject = stream) .catch(e => console.error(e));时，也会出现"DOMException“错误。
为什么
浏览 1提问于2019-06-20得票数 3
我在我的javascript中使用navigator.mediaDevices.getUserMedia来调用摄像头。它适用于chrome，但不适用于safari。我知道，safari不支持navigator.mediaDevices.getUserMedia。
但是，有没有办法解决safari的这个问题呢？
谢谢，纳雷什。
浏览 96提问于2017-01-23得票数 7
1回答
我使用navigator.mediaDevices.getUserMedia并使用<video>元素显示本地媒体。它工作得很好，除了在我的iPhone上我看到视频后面有一个黑色的矩形。如何隐藏/删除黑色矩形？
有些事我试过了：
视频elementbackground: transparent和background-color: transparentoverflow: hidden的调整尺寸
但都没起作用。我的iPhone正在运行iOS 15.0.2，但它也发生在iOS 14上。
全部资料来源：
<html>
<head>
<met
浏览 2提问于2021-11-07得票数 0
回答已采纳
如文章所示，按以下方式调用navigator.mediaDevices.getUserMedia()应授予缩放权限：
const stream = await navigator.mediaDevices.getUserMedia({
video: { zoom: true }
});
此外，如同一条所述：
MediaStreamTrack.getCapabilities()返回一个具有支持功能和范围或允许值的字典。相应地，MediaStreamTrack.getSettings()返回当前设置。
根据上面的信息，我已经在Chrome和安卓WebView的安卓设备上做了一些测
浏览 3提问于2021-06-17得票数 3
回答已采纳
在我的html代码中，我有3个视频标签，在桌面上，视频工作得很好，但当我在移动设备中尝试时，只有前两个摄像头有效，当我在最后一个中指定"user“摄像头时，android中的下一个错误"Notreadableerror: not‘t start video source”。
function enableCam() {
video = document.getElementById('video');
// Get access to the camera!
if(navigator.mediaDevices && navigator.medi
浏览 1提问于2019-10-31得票数 0
试图在JavaScript和WebRTC中获得从返回的的引用/承诺。
JavaScript在Chrome上运行，Safari在iOS和Android上运行。
navigator.mediaDevices.getUserMedia(session, initRec , onErr);
这会抛出TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')
好吧，让我们试一试稍微老一点的方法：
navigator.getUserMedia(parms,initfunc,
浏览 7提问于2017-06-15得票数 3
回答已采纳
我一直在使用webkitGetUserMedia方法(从getUserMedia到adapter.js)在我的web应用程序上获取webRTC的摄像头nad microhpone。我的服务器不安全(没有SSL证书)。一切都很好，直到我开始收到一个错误："getUserMedia()不再在不安全的源上工作。要使用这个特性，你应该考虑将你的应用程序切换到一个安全的源，比如HTTPS.有关更多细节，请参阅。“
我用谷歌搜索了一下，发现现在在Chrome中我需要使用navigator.mediaDevices.getUserMedia()。我使用的是Chrome47.0.2526.80m，在这
浏览 19提问于2015-12-09得票数 31
1回答
我正在尝试使用HTML5 API录制视频。我希望这个解决方案是跨平台的，它至少应该在Chrome，Firefox和Edge浏览器上工作。我尝试使用以下代码
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then((mediaStream) => {
const video = document.querySelector('video');
const url = window.URL.createObjectURL(mediaStream);
video.src
浏览 0提问于2018-05-10得票数 2
当我使用WebRTC (simple-peer)编写基本的React示例时：
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
setStream(stream);
if (userVideo.current) {
userVideo.current.srcObject = stream;
}
})
我得到的错误如下：
我看到navigator.mediaDevices.getUserMedia和安卓上的
浏览 9提问于2020-08-18得票数 0
我试图在安卓v6.0.1三星Galaxy A5上的UC Browser v12.13上的html页面上显示摄像头输出。输出只是一个黑色的背景。这也适用于同一台设备上的其他浏览器，即Chrome和Stock浏览器。
我尝试在成功块中播放视频，而不是添加autoplay标记，并添加了一些debug；video元素正在播放。
<video class="video-element" autoplay muted playsinline></video>
navigator.mediaDevices.getUserMedia = navigator.mediaD
浏览 45提问于2019-09-02得票数 0
火狐在尝试使用NS_ERROR_NOT_INITIALIZED时出现错误“navigator.mediaDevices.getUserMedia”
代码：
navigator.mediaDevices.getUserMedia({ audio: true })
.then ...
.error ...
在里面执行
$( document ).ready( function () {
...
});
给出不规则误差
[Exception... "Component not initialized" nsresult: "0xc1f30001 (NS_ERROR_NOT_
浏览 18提问于2020-07-28得票数 0
我正在建立一个扩展，记录我的屏幕和麦克风音频以及。
概述：
我有content.js，它试图连续地获得navigator.mediaDevices.getUserMedia({...的访问权限，我向background.js发送消息，后者再次尝试在这里访问navigator.mediaDevices.getUserMedia({...，我正在录制音频流。除此之外，我还有popup.html，它在点击我正在录制的屏幕上的按钮上有一个开始按钮。但是在整个过程中，我得到了错误的DOMException: Failed due to shutdown。
而且，我知道上面的错误(著名的)有一些问题，但对
浏览 6提问于2021-09-01得票数 2
Chrome 81.0.4044.138 (当前版本)尝试使用navigator.mediadevices.getUserMedia()访问麦克风失败。默认弹出窗口允许麦克风永远不会显示在屏幕上。有同样问题的人？谢谢
浏览 54提问于2020-05-20得票数 0
我想访问摄像头和音频设备，以记录视频使用WebRTC。然而，它只在Chrome和Firefox上工作。
有趣的是，它并不适用于Edge和Safari。它请求相机使用权限，当我们授予权限时，相机不加载，我在控制台中得到以下错误。
Safari和Edge上的错误消息
navigator.getUserMedia错误: ReferenceError
我的代码看起来像这个
async init(constraints) {
try {
if (navigator.mediaDevices && navigator.mediaDevices.getUser
浏览 1提问于2020-05-20得票数 0
回答已采纳
4回答
在我的示例ReactJs应用程序中，我使用 --它使用navigator.mediaDevices.getUserMedia和MediaRecorder API记录视频。
我可以从Chrome录制视频，但在Safari，我无法捕捉到视频。这个错误就像
未定义MediaRecorder。
有人能帮我一下吗？
Safari支持基本的视频捕获吗？
浏览 0提问于2019-01-24得票数 5
我正在尝试使用JQuery显示/隐藏微调器。基本上我有这样的代码：
function unLoader(e) {
$(".site-content").hide();
$(".loading").show();
}
$(window).on('load', function() {
$(".loading").hide();
$(".site-content").show();
window.onbeforeunload
浏览 9提问于2019-10-22得票数 0
我在本地主机上尝试在Chrome中使用MediaDevices.getUserMedia方法。我收到标题为的错误。我知道在Chrome中，这个函数只能用于安全的源，而localhost被认为是安全的源。此外，这也适用于Firefox。
这就是我是如何使用它的，如谷歌开发者网站所示
var constraints = window.constraints = {
audio: false,
video: true
};
navigator.mediaDevices.getUserMedia(constraints).then(function(
浏览 1提问于2016-05-19得票数 18
我想用麦克风录制销售人员的声音，在这样的开发环境下，us :9090/#/聊天室navigator.mediaDevices工作得很好。但是在生产环境中，导航器没有mediaDevices对象，它是undefined.Could --有人告诉我为什么吗？
Mozilla/5.0 (Macintosh；Intel 10_14_5) AppleWebKit/537.36 (KHTML，类似壁虎) Chrome/75.0.3770.90 Safari/537.36
let stream = null;
const constraints = {
audio: true,
};
try {
浏览 0提问于2019-07-12得票数 4
回答已采纳
我已经在网络和S/O上寻找答案，为什么下面的代码不能工作，但到目前为止还没有骰子。它应该只是简单地流式传输用户的视频和音频。我正在用Chrome查看它。 <html>
<body>
<video width="400" height="400" id="userVideo"></video>
<script>
var userStream;
if(navigator.mediaDevices.getUserMedia) {
//both video
浏览 50提问于2020-04-20得票数 0
我正在编写一个C代码，它与硬件(一个外部USB设备)交互，并实时输出视频帧，它最终被构建为一个DLL文件：
int get_frame() {
// interacts with hardware and
// generates video frames
}
在DLL中是否有特定的函数可以导出，以便在Chrome中用作视频源，如果可以，如何将这个DLL加载到Chrome中？
如何在Chrome中将此代码识别为视频源/摄像头，以便将其集成到包含<video> 元素的页面中？
navigator.mediaDevices.getUserMedia({ video: t
浏览 7提问于2022-09-30得票数 0
我正在尝试navigator.MediaDevices.getUserMedia() webrtc在调用过程中切换设备摄像头。这一功能在桌面浏览器上运行良好，但在mozilla android上却不起作用。以下是我正在使用的代码。
var front=false;
var myConstraints = { video: { facingMode: (front? "user" : "environment")} };
navigator.mediaDevices.getUserMedia(myConstraints).then(function(stre
浏览 2提问于2016-11-30得票数 7
在从Chrome 73升级到74之后，navigator.getUserMedia和navigator.webkitGetUserMedia返回未定义的内容。
在这里，我看到getUserMedia实际上是反对navigator.mediaDevices.getUserMedia()的，但在我的例子中，navigator.mediaDevices也是未定义的，所以我不能使用它。
有人知道它是Chrome最新版本中的一个bug，还是我需要使用其他东西？
浏览 5提问于2019-05-06得票数 8
回答已采纳
有没有一种方法可以让我们在使用MediaRecorder的同时，用Chrome录制ogg格式？我相信，Chrome默认支持WebM。以下是我所做的
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.stat
浏览 1提问于2017-11-16得票数 8
1回答
我正在尝试从Chrome Android的web应用程序中以60 FPS的速度捕捉视频。我为getUserMedia调用设置了适当的video.frameRate约束。Chrome识别frameRate设置，并通过视频轨道设置报告它以60FPS拍摄的视频，但视觉上视频仅为30FPS，而不是60。在同一台设备上，通过现有的Android相机应用程序，它可以捕捉到流畅的60FPS视频，分辨率与我尝试使用web应用程序的分辨率相同。 我正在用Pixel 3a上的Chrome Android 84进行测试。我还在其他手机上进行了测试，这些手机支持60FPS的分辨率，但无论如何，它只能在30FPS的分
浏览 39提问于2020-08-02得票数 8
我知道以前有人问过这个问题，但这些答案有点过时，苹果公司一直在改变。我有一个PWA应用程序，在mac (safari，chrome)，windows (Chrome，edge)，android (chrome，edge)上运行良好。但不适用于ios safari或chrome
我正在运行IOS15.4的IPad上进行测试
不知道navigator.mediaDevices.GetUserMedia，navigator.getUserMedia，navigator.webKitGetUSerMedia.是否需要从HTTPS获得服务？在任何IOS浏览器上都可以工作(我可以不使用它，但更喜欢使用)。
浏览 1提问于2022-03-25得票数 1
我有在chrome，safari和firefox的桌面上工作的slicknav。当我在iphone6上运行时，它可以在chrome上运行，但在safari下就不行了。我的js函数看起来像这样：
$(document).ready(function() {
$("#nav_lat").slicknav({prependTo:"#mobile_menu"});
});
IPhone6的safari控制台上写道：
$("#nav_lat").slicknav({prependTo:"#mobile_menu"});
不是函数。不知
浏览 3提问于2016-02-22得票数 2
我正面临一些关于css差距的问题。为什么它在iphone上不起作用？ ? 下面是我的代码 <div className="flex flex-col gap-2"> 在桌面上 ? 在iphone chrome上 ?
浏览 36提问于2020-11-01得票数 4
1回答
现在，如果我使用我的iPhone或iPad并尝试显示两个流，一个是黑色的，另一个是工作的。我该怎么做才能让两个人都工作呢？这在我的笔记本电脑的所有浏览器上都能正常工作。
<script>
navigator.mediaDevices.getUserMedia({ audio: true, video: true})
.then(function(camera) { document.getElementById("video1").srcObject = camera;})
.catch(function(error) { console.
浏览 6提问于2022-03-31得票数 0
回答已采纳
1回答
navigator.mediaDevices.getUserMedia({video: true})挂在我的标签上，没有任何错误。预期:提示权限
以前有人遇到过这个问题吗？这只发生在我的Chrome隐匿模式。Firefox专用浏览器按预期工作
浏览 10提问于2022-02-15得票数 0
在活动媒体流(语音)期间，当连接到内部麦克风时，navigator.mediaDevices.getUserMedia工作正常，只要我切换到蓝牙设备并重新运行相同的接口来获取最新的媒体流，我就会收到错误"NotReadableError: Concurrent mic process limit."
我浏览了许多论坛，因为许多人建议这个错误通常发生在Firefox，Mac OS中，当多个标签试图访问麦克风或/和摄像头时。
我确保在Firefox浏览器中只打开了一个选项卡，但仍然看到相同的错误。
任何关于这方面的线索都将不胜感激。
下面是代码片段
constraints = {
浏览 594提问于2019-11-27得票数 11
回答已采纳
1回答
为了从清单v2中的选项卡中捕获输出音频流，可以在后台脚本中使用chrome.tabCapture.capture API来获取流。但是，在清单中，v3 tabCapture已移到前台，并且在后台脚本中不可用。它在内容脚本中都不可用。
在尝试了一些东西之后，我终于可以让tabCapture在弹出脚本中工作了。但是，在我的用例中，弹出窗口不能在很长一段时间内保持打开状态，才能捕获流。相反，我偶然发现了tabCapture的tabCapture方法，它给了我一个streamId。所以，我想到了这个：
chrome.tabs.query({
active: true,
currentWin
浏览 3提问于2022-01-06得票数 4
当试图通过Chrome中的JS枚举所有媒体设备时，只显示了第一个摄像头。chrome://settings/content/camera同时显示了两个摄像头，我使用了以下代码(在火狐中运行得很好)：
if (navigator.mediaDevices.getUserMedia) {
console.log('getUserMedia supported.');
console.log(navigator.mediaDevices.getUserMedia({video:true, audio:true}));
navigator.mediaDevice
浏览 2提问于2021-08-15得票数 0
我对现在可用的getUserMedia api在WKWebView中有一些问题(从iOS 14.3开始)。
在the视图中的一个页面上，我将使用以下代码访问摄像机：
navigator.mediaDevices.getUserMedia({
video: {
facingMode: "user"
},
audio: false
}).then(function(webcamStream) {
document.querySelector("#video").srcObject = webcamStream; /*
浏览 6提问于2021-01-21得票数 3
回答已采纳
自从苹果公司的iOS 11 webRTC和getUserMedia推出以来，我就可以将相机的输入输入到<video>元素中，但不能使用传统的方法来设置尺寸(height和width)。
这样做是可行的：
var constraints = {
audio: false,
video: { facingMode: 'user' }
};
navigator.mediaDevices.getUserMedia(constraints).then(
function success(stream) {
video.srcObje
浏览 4提问于2017-08-21得票数 5
回答已采纳
2回答
@媒体规则无效
、、
我试图将一些CSS应用于仅在移动设备上工作，下面是我的代码：
@media all and (max-width: 1081px;) {
#messageText
{
font-size:6px !important;
}
}
这里的一些文字
但是，它似乎不起作用，当我在Chrome工具中选择messageText div元素时，font-size不会出现在任何地方，甚至不会被删除。这使我认为元素不是出于某种原因而被应用，而是被覆盖。有人能说出原因吗？我试着在Safari中查看我的IPhone 6，并在Chrome中模拟IPhone 4。
浏览 6提问于2016-01-22得票数 0
回答已采纳
在移动设备上使用固定列的datatables.js水平滚动有什么窍门吗？这在桌面或chrome-dev上运行得很好，尺寸和iphone差不多，但在iphone上实际查看时，水平滚动会移动整个表格，固定的列不起作用。
浏览 20提问于2019-08-28得票数 0
1回答
我正在尝试开发一个移动设备和计算机之间的webrtc视频通话系统。移动设备将his的视频流发送到计算机。
在移动设备中，UI只显示它通过摄像头录制的视频，在安卓系统中，这一切都很好用，但在iOS (我用2部不同的iphones和最新的iOS版本进行了测试)中，视频无法启动，它显示为黑色，认为它可以顺利地传输到电脑上。
我尝试了我在网上找到的所有方法，添加控件到视频元素，删除控件，添加自动播放在线播放...，请求getUserMedia卸载和基于用户手势再现流，但似乎什么都不起作用，甚至在手机的控制台上也没有收到任何错误。我在不同的浏览器safari和chrome上进行了测试。更奇怪的是，有时它
浏览 10提问于2021-04-03得票数 3
使用dhtmlx 5.0和wijmo grid开发了一个webapp。该应用程序在chrome(android)上运行良好。上下文菜单是通过触摸来打开的--‘按住’，但在iphone的safari浏览器中使用时，同样的功能就不起作用了。在iphone中，上下文菜单不会打开任何触摸事件。请帮助事件或库，任何需要它的工作。
浏览 4提问于2021-04-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
