Vue 莹石摄像头直播视频实例代码


Posted in Javascript onAugust 31, 2018

Vue 莹石摄像头直播视频代码。

HTML代码:

<div class="mainClass" v-show="rtmp_url!=''">
 <video id="myPlayer" controls playsinline webkit-playsinline autoplay>
  <source type="application/x-mpegURL" :src="http_url"/>
  <source :src="rtmp_url"/>
 </video>   
</div>

直播地址是调用接口获取的。

<script>
export default {
  data(){
   return{
    player:"",
    rtmp_url:"",
    http_url:"",
    message:'加载中...',
   }
  },
  mounted(){ 
   this.GetLiveUrl();
  },
  methods:{
   GetLiveUrl(){
    //异步获取直播地址,并赋值给rtmp_url,http_url
   }
  },
  updated() {
   if(this.rtmp_url!=""){
    //如果在mounted中声明,直播地址还未取到,导致视频不显示。所以放在了这里
    this.player = new EZUIPlayer('myPlayer'); 
   }
  }
}
</script>

补充:vue H5项目调用手机摄像头录像并上传

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>上传文件</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <style>
  input.file 
  {
   position: relative;
   -moz-opacity:0 ;
   filter:alpha(opacity: 0);
   opacity: 0;
   z-index: 2;
  } 
  .wrapper{
   color: #fff;
   background-color: #31b0d5;
   border-color: #269abc;
   margin-top: 5px;
   margin-bottom: 5px;
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
  }
 </style>
</head>
<body>
 <div id="app" v-cloak>
  <h4>上传视频demo</h4>
  <div>
   <span type="primary" class="wrapper">
    <label class="btn" for="fileUpload">上传视频demo</label>
   </span>
   <input type="file" accept="video/*" id="fileUpload" style="position:absolute; clip:rect(0 0 0 0);" @change="uploadVideo($event)">
  </div>
 </div>
 <script>
 var app = new Vue({
  el: '#app',
  data: {
  },
  methods: {
   uploadVideo(e) {
    //e.target.value文件名
    var file = e.target.files[0];
    var formdata = new FormData();
    formdata.append('fileStream', file);
    console.log('正在上传视频...')
    this.doUpload(formdata);
   },
   doUpload(formdata) {
    axios.post('/teacher/doUpload', formdata).then(res => {
     if (res.data.success) {
      console.log('上传成功');
     } else {
      console.log('上传失败');
     }
    }).catch(err => {
     console.log(err);
    })
   }
  }
 });
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue 莹石摄像头直播视频实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
You might like
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
会计出纳员的自我评价
2014/01/15 职场文书
校园环保标语
2014/06/13 职场文书
个人自我剖析材料
2014/09/30 职场文书
敬老院活动感想
2015/08/07 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python