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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
javascript中常用编程知识
Apr 08 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
微信小程序云开发之数据库操作
May 18 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中的一个中文字符串截取函数
2007/02/14 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
javascript parseInt 大改造
2009/09/27 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
javascript轮播图算法
2016/10/21 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
基于Python的PIL库学习详解
2019/05/10 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
2015年大学班主任工作总结
2015/04/30 职场文书
法定代表人身份证明书
2015/06/18 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python基础之hashlib模块详解
2021/05/06 Python
总结Python常用的魔法方法
2021/05/25 Python