需求:需要在iframe中嵌入第三方url,该url需要访问视频和音频
以为只需要 <iframe src="url" style="width:100%; height:99%" frameborder="0"></iframe>,然后使用http://lan-ip:port就万事大吉了,没想到出现了如下两个问题:
问题1:F12查看错误提示:Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)?
提示指出“只有安全的来源才能被允许访问"音视频,即如下情况下才能进行http访问:
-
(https, *, *)
-
(wss, *, *)
-
(*, localhost, *)
-
(*, 127/8, *)
-
(*, ::1/128, *)
-
(file, *, —)
- (chrome-extension, *, —)
实践中发现通过localhost和127.0.0.1访问的时候没有该错误提示,因此若不使用这些安全来源,那么,就需要使用https,进行访问,通过搭建https环境,也没有这类错误出现
问题2:F12 出现:permission denied,伴随着警告Video Capture permission has been blockedbecause of a Feature Policy applied to the current document?
这里就是一些权限问题了,给iframe添加allow属性:
属性值:
geolocation
microphone
camera
midi
encrypted-media
这里只用到了音频和视频,添加camera和midi,如下
<iframe src="url" style="width:100%; height:99%" allow="camera;midi" frameborder="0"></iframe>
最后完美的实现了要求。
总结:需要安全来源才能访问音视频;需要设置权限
参考文章: