Safari支不支持HTML5录音？ 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。...

最新推荐文章于 2025-07-10 14:52:06 发布
转载 最新推荐文章于 2025-07-10 14:52:06 发布 · 2.4k 阅读 · 0
文章标签：

#前端 #ViewUI

本文探讨了Safari浏览器对于HTML5录音功能的支持情况，发现Safari并不直接支持HTML5录音API。最佳实践建议使用WebRTC技术或者作为备选方案采用Flash。文章还讨论了如何通过检测浏览器API支持来实现技术的平滑切换。

先放结论：Safari支不支持HTML5录音？ ——据我调查，不支持。

现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。

可是当使用Can I use查看兼容性的时候，我发现

不过这个是有历史原因的，我记得RTC是在去年，2013，才刚刚由思科提出并且确定下来的（没记错的话）。但Audio标签在制定初就是HTML5规范的一部分，兼容性如下，因此你的陈述有误。

所以，我在做相关Application时候，就不得不得考虑退化，然而多媒体方面的能做的退化的最好的方案就是Flash。

因此我就顺着思路又用AS3实现了一遍，在前端做分状态异步加载，当我检测到浏览器支持相关API(getUserMedia)，我直接切换到HTML5模式，Div中装载Canvas、WebWorker等等；反之，就加载Flash控件。


至于你说的Safari支持音频，但音频!=录音，事实上Audio和Video标签是Safari 3.1以后开始支持的，至于之前的Safari基本上就靠Quicktime了。

另外支不支持HTML5 API，取决的是浏览器实现，和系统关系不大。一会儿Safari，一会儿Windows的.....你要么就写IE，谁说windows上不能跑chrome的？

相关引用：
Safari HTML5 Audio and Video Guide: About HTML5 Audio and Video
Can I use... Support tables for HTML5, CSS3, etc
H5通过navigator.mediaDevices.getUserMedia调用手机摄像头
行知
04-26 2万+
navigator.mediaDevices.getUserMedia 应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单，最终却写的怀疑人生。 API环境 问题一：（为什么不管...
MediaDevices html5,HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
weixin_36173034的博客
06-15 2268
navigator.mediaDevices.getUserMedia应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia看上去很简单，最终却写的怀疑人生。API环境问题一：(为什么不管怎么配置都...
Vue中使用js-audio-recorder实现录音时提示:浏览器不支持getUserMedia!
BADAO_LIUMANG_QIZHI的博客
09-21 6064
上面在进行web端录音时在本地使用127.0.0.1或者localhost运行时可以正常录音，但是在通过ip访问进行录音时提示：浏览器不支持getUserMedia!http请求的 chrome，edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法，所以就不能够访问用户的媒体设备。注：博客：关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。
getUserMedia浏览器获取视频/音频流
最新发布
qq_44741577的博客
07-10 1247
HTML5的getUserMedia API允许网页访问用户设备的摄像头和麦克风，为Web应用提供音视频交互能力。该API支持视频聊天、在线面试等功能，相比传统插件更轻量安全。使用时需注意浏览器兼容性（仅支持https和localhost环境）和权限管理，通过constraints对象配置媒体参数。常见错误包括用户拒绝授权、设备不可用等。开发时需进行兼容性检查，并通过示例代码实现本地视频流播放。随着Web技术发展，该API有望支持更多AR/VR应用场景。
获取 navigator.mediaDevices.getUserMedia 失败
timczm的博客
06-07 6835
在开发的时候调用下面这段代码是正常工作的，但是用其他设备（如ios，safari，android等任何非本机设备）打开我本地开发环境运行的dev环境就无法调用。
http：IP开头的路径使用js-audio-recorder报浏览器不支持getUserMedia
Lucky_girl_wan的博客
11-10 3114
因为浏览器不支持http:IP开头的路径，认为安全性不高 只支持浏览器：file:，https:，http://localhost 解决办法： 在谷歌浏览器的地址栏中输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure就好了，或者用http: 域名也可以解决 ...
使用js-audio-recorder报浏览器不支持getUserMedia
YRY_LIKE_YOU的博客
02-07 7169
其实这是因为浏览器不支持http：IP开头的路径，认为这个路径不安全 浏览器只支持file:,https:,http://localhost， 解决办法： chrome 地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure 然后就ok了 ...
MediaDevices html5,HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头
weixin_42186579的博客
06-15 1274
HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头发布时间：2021-05-23 15:03:11来源：亿速云阅读：76作者：小新这篇文章主要介绍了HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家...
uniapp调用手机摄像头_HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题...
weixin_39820173的博客
12-19 7400
navigator.mediaDevices.getUserMedia应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia看上去很简单，最终却写的怀疑人生。API环境问题一：(为什么不管怎么配置都...
navigator.mediaDevices.getUserMedia is not a function
06-20
我们正在解决`navigator.mediaDevices.getUserMedia`不可用的问题，即当出现`navigator.mediaDevices.getUserMediaisnotafunction`错误时的替代方案。根据引用[1][2][3][4][5]，我们可以总结以下几点：1.首先，确保...
Recorder,HTML5、javascript getusermedia、PC安卓、iOS测试.zip
09-26
在线测试，支持大部分已实现getUserMedia的移动端、PC 端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯 Android X5 内核(QQ、微信)；不支持：UC 系内核（典型的支付宝，大部分国产手机厂商的浏览器），IOS 上除 Safari 外的其他任何形式的浏览器（含 PWA、WebClip）。快捷方式: 【RecordApp 测试】，【Android、IOS App Demo】，【工具】Recorder 代码运行和静态分发，【工具】裸(RAW、WAV)PCM 转 WAV 播放测试和转码 ，查看 caniuse 浏览器支持情况。
使用js-audio-recorder报浏览器不支持getUserMedia解决办法
码出精彩
12-24 8163
原因 其实这是因为浏览器不支持http：IP开头的路径，认为这个路径不安全 浏览器只支持file:,https:,http://localhost， 解决办法 地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure 输入应用的ip和端口 enable激活 重新启动浏览器 参考：https://blog.csdn.net/YRY_LIKE_YOU/article/details/113745273 ...
getUserMedia报错：新版本Chrome中getUserMedia接口在http下不再支持
程序员老狼专注开发aigc或客服系统应用
10-17 1943
新版本Chrome中getUserMedia接口在http下不再支持，请使用https来访问 比较兼容的就是需要判断一下 var media=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia); if(!medi...
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）（转）
xionghao009的专栏
11-17 3051
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）
ios html5 录音功能,HTML5 Audio 在 iOS Safari 上的有关问题
weixin_32691939的博客
06-05 709
HTML5 Audio 在 iOS Safari 上的问题最近接触一个移动短项目，做摇一摇的功能，然后摇的时候要有声音，摇中奖的时候也有声音，问题来了，iOS 5 不能用代码去触发播放声音，其实 Android 4.0+ 也有一样的问题，因为目前只折腾了 iOS，所以这里就以 iOS Safari 的情况为例，其他应该是类似的，大家可以自己验证。以下的 Safari 都是指 iOS 下的。iOS ...
H5录音功能，但只支持PC，安卓，ios的safari
眾K的博客
09-07 1010
https://github.com/2fps/recorder
【webrtc】getUserMedia不同浏览器适配（11）
沛沛呀、
09-20 1599
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值