【开发记录】TSINGSEE青犀视频使用Vue.js搭建前端启动后共享屏幕无法获取音视频流问题解决

TSINGSEE青犀视频云边端架构产品的前端搭建大多是通过Vue来完成的，Vue的核心库只关注视图层，非常容易与其它库或已有项目整合，并且有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

TSINGSEE青犀视频在开发基于webrtc架构的新产品，前端也是用到Vue.js，但是测试时在使用vue运行本地浏览时，点击播放视频的按钮，出现报错：“getDisplayMedia” of undefined，导致无法调用浏览器原生api，出现不了获取屏幕流。

分析问题

1、使用navigator.getDisplayMedia仅在chrome74和firefox68及以上版本中可用；
2、报错时使用的是http，导致环境不安全问题，是没有navigator.getDisplayMedia方法，请使用https加密证书。

因此我们可以得知本次问题因为使用的是VUE运行本地服务，导致没有https加密证书；要解决上述问题，必须启动https或者localhost服务。所以要找到vue的配置项，改成locahost服务。

解决问题：

1、升级浏览器到最新版
2、vue中配置项修改

如下图：

添加host为本地。最终效果如下，出现共享屏幕：

TSINGSEE青犀视频开发了很多优秀的视频平台，比如EasyNVR、EasyGBS等，其中特别讲一下EasyGBS，EasyGBS的前端同样依托于Vue框架搭建，能够支持GB28181协议，并且可以通过GB28181协议进行级联，获取第三方平台的全部或者部分能力。

如果大家有兴趣，可以联系我们了解，TSINGSEE青犀视频云边端架构视频平台都提供为期30天的免费试用时间，欢迎大家测试！