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 莹石摄像头直播视频实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！