1、编写好拍摄界面的样式
<template>
<div class="publish">
<div class="pub-top">
<span class="back" @click="goback">x</span>
<span class="iconfont icon-yinfu "></span>
<span class="music-text">选择音乐</span>
</div>
<div class="upload-box">
<!-- 中间显示的视频 -->
<video ref="video" style="width:100%;height:300px;object-fit:fill" src=""></video>
<!-- 下方上传按钮 -->
<div class="upload-bar">
<div class="bar-item">
<div class="icon"><img src="@/static/img/daoju.jpg"></div>
<p>道具</p>
<!-- <span></span> -->
</div>
<div class="bar-item">
<div class="pub-border">
<div class="pub" @click="getCamera"></div>
</div>
</div>
<div class="bar-item">
<div class="icon"><img src="@/static/img/xiangce.jpg"></div>
<p>上传</p>
<!-- <span></span> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
getCamera(){
navigator.mediaDevices.getUserMedia({video:true}).then
(
success=>
{
this.$refs['video'].srcObject=success
this.$refs['video'].play()
}
).catch(err=>{console.log(err)})
},
goback(){
// this.$emit('changeBack');
this.$router.push('/');
}
// toBack(){
// this.$router.push('/me')
// }
}
}
</script>
<style>
.publish{
color: #fff;
background-color: #cccccc;
}
.pub-top{
height: 44px;
line-height: 44px;
display: flex;
justify-content: center;
color: #fff;
font-size: 14px;
position: relative;
}
.pub-top .back{
position: absolute;
left: 20px;
font-size: 20px;
}
.upload-box{
/* background-color: #ccc; */
height: -webkit-fill-available;
}
.upload-box .upload-bar{
height: 100px;
width: 100%;
/* line-height: 100px; */
/* width: 100%; */
position: fixed;
/* left: 0; */
bottom: 0;
display: flex;
justify-content: space-between;
/* justify-items: center; */
padding:20px 30px 0px 30px;
box-sizing: border-box;
background-color:#cccccc;
z-index: 1000;
}
.upload-box .upload-bar .bar-item p{
font-size: 14px;
margin-top:-3px ;
margin-left: 12px;
}
.pub-border{
display: flex;
/* 内容居中 */
/* 居中对齐弹性盒的各项 <div> 元素 */
/* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
/* 提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。 */
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
border-radius: 50%;
border:2px #fe2c55 solid;
}
.pub{
height: 45px;
width: 45px;
border-radius: 50%;
padding: 0.5px;
background-color: #fe2c55;
}
.bar-item .icon img{
width: 35px;
height: 35px;
border-radius: 50%;
margin-bottom: 5px;
margin-top: 8px;
}
</style>
2、重点关注如何获取摄像头的代码
3、实现效果展示
