Vue 莹石摄像头直播视频实例代码
更新时间：2018年08月31日 14:10:58 作者：happygirlnan
本文通过实例代码给大家介绍了vue 莹石摄像头直播视频功能，文章还给大家提到了vue h5项目调用手机摄像头录像并上传的功能，需要的朋友可以参考下
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 莹石摄像头直播视频实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了如何使用vue实现一个自定义颜色选择器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要为大家详细介绍了vue实现聊天框发送表情，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题
这篇文章主要介绍了Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了uni-app 的模板语法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了vue实现文件上传和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了解决VUE打包后与nginx代理出现加载速度超级慢的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
本篇文章主要介绍了基于vue实现swipe分页组件实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了el-tree懒加载的实现以及局部刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
使用vue/cli出现defineConfig is not function错误解决办法
这篇文章主要给大家介绍了关于使用vue/cli出现defineConfig is not function错误的解决办法,当我们在做打包配置的时候,出现了这个错误,需要的朋友可以参考下2023-11-11
最新评论