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

html代码：

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

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');

}

}

}

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

上传文件

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;

}

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);

})

}

}

});

总结

以上所述是小编给大家介绍的vue 莹石摄像头直播视频实例代码，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！