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

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

在这里插入图片描述


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

在这里插入图片描述


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

在这里插入图片描述


重点来了,原因解析:

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

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

  • 1、localhost 域

  • 2、开启了 HTTPS 的域

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

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

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

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


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

在这里插入图片描述


  • 三种方案,一直不务正业的Java后端博主亲测可靠。可放心使用。理解比较浅薄。深层次的东西就不太清楚。
  • 有时间写一篇关于http转https的吧,ssl证书安装。个人觉得装逼必备。手动滑稽!
这个页面主要是用来检测用户设备是否支持WebRTC功能,同时展示了一个视频预览的效果。以下是该页面的CSS样式分析: 1. 整体布局: ```css body { margin: 0; padding: 0; } #main { display: flex; justify-content: center; align-items: center; height: 100vh; } ``` 这段CSS代码主要用于设置整个页面的布局。其中,`body`元素的`margin`和`padding`都被设置为`0`,以去除浏览器默认的外边距和内边距。`#main`元素被设置为`display: flex;`,以便使用Flex布局,展示居中的视频预览区域。 2. 视频预览区域: ```css #preview { width: 640px; height: 480px; border: 2px solid #ccc; border-radius: 4px; background-color: #000; } ``` 这段CSS代码用于设置视频预览区域的大小、边框、圆角和背景颜色。其中`width`和`height`属性分别设置为`640px`和`480px`,以展示一个标准的视频预览画面。`border`属性被设置为`2px`的实线边框,`border-radius`属性被设置为`4px`,以使视频预览区域看起来更加圆润。`background-color`属性被设置为黑色,以便在视频预览区域没有内容时显示一个黑色背景。 3. 检测结果区域: ```css #info { margin-top: 20px; font-size: 18px; color: #333; } ``` 这段CSS代码用于设置检测结果区域的样式。其中`margin-top`属性被设置为`20px`,以使检测结果区域与视频预览区域之间留出一定的空隙。`font-size`属性被设置为`18px`,以使文字显示的大小适中。`color`属性被设置为`#333`,以使文字颜色更加清晰易读。 4. 按钮样式: ```css .button { display: inline-block; padding: 10px 20px; margin-top: 20px; font-size: 16px; font-weight: bold; color: #fff; background-color: #1e90ff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .button:hover { background-color: #187bcd; } ``` 这段CSS代码用于设置按钮的样式。其中`display`属性被设置为`inline-block`,以便让按钮水平排列,同时具有块级元素的特性。`padding`属性被设置为`10px 20px`,以使按钮的内边距适中。`margin-top`属性被设置为`20px`,以使按钮与检测结果区域之间留出一定的空隙。`font-size`属性被设置为`16px`,以使按钮文字显示的大小适中。`font-weight`属性被设置为`bold`,以使按钮文字显示的粗细适中。`color`属性被设置为白色,以使按钮文字颜色与背景色形成对比。`background-color`属性被设置为蓝色,以使按钮颜色鲜明。`border`属性被设置为无边框,以使按钮看起来更加简洁。`border-radius`属性被设置为`4px`,以使按钮的边角更加圆润。`cursor`属性被设置为`pointer`,以使鼠标在按钮上悬停时显示手型光标。`transition`属性被设置为`all 0.2s ease`,以使按钮在鼠标悬停时有一个平滑的过渡效果。`button:hover`选择器用于设置鼠标悬停时按钮的样式,其中`background-color`属性被设置为更深的蓝色,以使按钮看起来更加醒目。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

private_static

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值