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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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 Server的两个日期处理函数
2006/10/09 PHP
php 分页函数multi() discuz
2009/06/21 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
Python 除法小技巧
2008/09/06 Python
python求素数示例分享
2014/02/16 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
应届生法律求职信
2013/10/22 职场文书
教师节促销活动方案
2014/02/14 职场文书
出纳会计岗位职责
2014/03/12 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2014年建筑工作总结
2014/11/26 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
2016新年感言
2015/08/03 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
使用feign服务调用添加Header参数
2021/06/23 Java/Android
MySQL开启事务的方式
2021/06/26 MySQL