整合trtc遇到的坑:<ERROR> navigator.mediaDevices is undefined

时间:2024-03-27 13:06:58

整合trtc到项目中遇到的坑。

  • 最近在做云视频会议项目,公司用的是trtc。准备先把网页端demo整合到项目里面去,然后修修改改就是自己的东西了!这也算是知识盲区吧。本以为很简单的事硬生生卡了我两天。为啥以为很简单呢、因为trtc的demo在本地文件夹打开index.html都能直接用。一放进项目就不行。想想都好气哎。
  • 看我的访问路径,划重点!后面要考

整合trtc遇到的坑:<ERROR> navigator.mediaDevices is undefined


  • 遇到的就是下面这个错,这个错直接导致的就是无法调用摄像头获取视频流。
  • 这个是谷歌webrtc的问题。无法收集到navigator.mediaDevices和ice信息。之所以会遇到这个问题卡我这么久,想来也是国内做wertc的也是今年刚兴起的。网上仅有的也是说必须用https。至于原因无人解答!
  • 对相关问题的介绍也是少之又少。可能也是我的坏毛病吧、文档看少了。(自行抽自己三鞭子–活该!活该!活该!)特别是前段时间,云视频、云通话、云会议现在也算是炙手可热。

整合trtc遇到的坑:<ERROR> navigator.mediaDevices is undefined


  • 言归正传、错误导致结果就是这样。结果就是这样,没视频画面,还一堆错:

整合trtc遇到的坑:<ERROR> navigator.mediaDevices is undefined


重点来了,原因解析:

最后自己真的去申请了个ssl证书,这个也是知识盲区、对着文档搞,各种问题都能遇到。搞了一天,把http转成了https真能用。但是本地调试都要nima搞个ssl,那得多麻烦。心中真的是一万只羊驼。最后不甘心,继续google才得知了完整版的答案,为啥本地能行,放进项目就不行。
原因:

  • 通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境:

  • 1、localhost 域

  • 2、开启了 HTTPS 的域

  • 3、使用 file:/// 协议打开的本地文件(难怪我特么本地直接开也能用!)

  • 其他情况下,比如在一个 HTTP 站点上,navigator.mediaDevices 的值都为 undefined。

  • 得知真相的我:“localhost域?????????。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。”

  • 可以看到我一开始的访问路径,由于开发习惯,我一直都是用的ip访问自己本地项目。最后成了禁锢我两天的枷锁。


直接用127.0.0.1访问。可以看到画面已经出来了,之前报的错也没有了。看到图上的线了没,这是我此刻的心情。

整合trtc遇到的坑:<ERROR> navigator.mediaDevices is undefined


  • 三种方案,一直不务正业的Java后端博主亲测可靠。可放心使用。理解比较浅薄。深层次的东西就不太清楚。
  • 有时间写一篇关于http转https的吧,ssl证书安装。个人觉得装逼必备。手动滑稽!