Vue莹石摄像头直播视频实例代码_vue3做直播网站 - CSDN文库

1星 55 浏览量更新于2023-05-04 收藏 37KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Vue 莹石摄像头直播视频实例代码莹石摄像头直播视频实例代码

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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38548394

粉丝: 2
资源: 913

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈