简单使用萤石云，实时直播，监控回放

骑猪看日落 2023-02-18 08:11 17阅读 0赞

## 实时直播 ##

这个我直接使用的视频播放标签

**用直播地址**  
ps：高清好像要转码，后端搞得我不清楚

如果不可以用可以试着执行下面这个命令再试试

npm install ezuikit
    
    cordova + vue 时使用的

**ps : 浏览器调试时用可能不能播放，但手机h5却可以**

## 监控回放 ##

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200616155013211.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0c][https_img-blog.csdnimg.cn_20200616155013211.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c]  
到这个界面拿到代码示例

将iframe组件的src直接换成你的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70]

[对于视频播放url的分析][url]

剩下的js部分也可以直接复制  
我是用的是vue所以我将所有代码放到了mounted方法里面

这时候就可以直接查看监控历史了

对于视频组件的解读  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70 1]

[https_img-blog.csdnimg.cn_20200616155013211.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c]: https://img-blog.csdnimg.cn/20200616155121794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616155936935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1,size_16,color_FFFFFF,t_70
[url]: https://open.ys7.com/bbs/article/20
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200616160541630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1,size_16,color_FFFFFF,t_70