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实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
JS常用知识点整理
Jan 21 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
原生js实现自定义滚动条组件
Jan 20 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
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
传媒专业推荐信范文
2013/11/23 职场文书
个人自我评价范文
2014/02/05 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
小学中等生评语
2014/12/29 职场文书
祝酒词范文
2015/08/12 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Python OpenCV实现图像模板匹配详解
2022/04/07 Python