vue调⽤pc端本地摄像头、麦克风实现拍照、录视频、录⾳并上传到服务器指定
树⽂件夹
vue 调⽤pc端本地摄像头、麦克风实现拍照、录视频、录⾳ 并上传
⾃⼰写blog只是为了下次⽅便使⽤ 过程确实很烦 ，⾃⼰摸索加各⼤⽹站cv查看
可以直接使⽤
1、调⽤摄像头拍照录屏
⾸先是npm i vue-video-player -D 安装依赖
在main.js⾥⾯引⼊
import VideoPlayer from'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
此处代码主要是⽤来覆盖video的播放按钮样式
require(’./styles/video.css’)；具体内容如下
.video-js .vjs-big-play-button {
width:72px;
height:72px;
border-radius:100%;
z-index:100;
2021年国考面试时间
background-color: #ffffff;
border: solid 1px #979797;
}
<template>
<div class="main ">
<div class="left">
<div class="vedio">
<div class="shexiang">
<!--图⽚展⽰-->
<video
ref="video"
width="350px"
height="265px"
autoplay
长春招聘信息2022年最新招聘></video>
<div class="btnsBackground">
<el-popover
placement="top-start"
width="160"
trigger="click"
>
北京研究生考试院<div >
<div >
间隔<input
v-model="everyTime"
type="text"
id="everyTime"
>
秒拍⼀次；</div>
<div >
最长拍照时间<input
v-model="allTime"
type="text"
type="text"
id="allTime"
>秒</div>
<el-checkbox
v-model="checked"
>连拍模式</el-checkbox>
</div>
<el-image
slot="reference"
class="photo1"
:src="require('@/assets/images/luxiang/setting.png')"
fit="cover"
></el-image>
</el-popover>
<el-image
class="photo2"
@click="recordMedia"
:src="require('@/assets/images/luxiang/video.png')"
fit="cover"
></el-image>
<el-image
@click="takephoto"
class="photo3"
:src="require('@/assets/images/luxiang/photo.png')"
fit="fill"
></el-image>
</div>
</div>
<span class="greySpan">注：1、录制视频⽂件时，⼀个视频时长不能超过⼀分钟；</span> <span
class="greySpan"
>2、点击设置按钮，可选择连拍模式</span>
</div>
</div>
<div class="right">
//通过canvas绘画 <!--canvas截取流-->
<canvas
width="350px"
height="265px"
ref="canvas"
v-show="false"
></canvas>
<div class="right1">
<div
class="box"
v-for="(item, index) in dataList"
:key="'photo-' + index"
>
<div
v-if="pe=='vedio'"
@click="preVideo(item.src)"
>
<video
:src="item.src"
></video>
<div class="player">
<img
:src="require('@/assets/images/luxiang/player.png')"
alt=""
>
>
</div>
</div>
<el-image
v-if="pe=='photo'"
:preview-src-list="prephotoList"
:src="item.src"
华图教育事业编培训班多少钱fit="cover"
></el-image>
<div class="del-icon"><i
class="el-icon-delete "
@click="deletePhoto(index)"
></i></div>
</div>
</div>
//⼿动分页
<el-pagination
small
v-if="al>18"
:pager-count="5"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:current-page.sync="pagation.currentPage"
:page-size="pagation.pagesize"
layout="prev, pager, next,total"
:total="al"
>
</el-pagination>
</div>
<div class="text-center margin-b10 subBtn">
<el-button
@click="closeContent"
class="width-80 margin-r20"
>取消</el-button>
<el-button
type="primary"
@click="submitContent"
class="width-80"
>确定</el-button>
</div>
//点击视频预览
<el-dialog
modal
class="videoShowDialog"
destroy-on-close
close-on-press-escape
close-on-click-modal
:visible.sync="preVideoShow"
>
<video-player
onPlayerPlay
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
:x5-video-player-fullscreen="true"
></video-player>
</el-dialog>
</div>
</template>
<script>
import"video.js/dist/video-js.css";
import"vue-video-player/src/custom-theme.css";
import{ videoPlayer }from"vue-video-player";
import{
dataDetailApi,
showFloderApi,
addFolderApi,
}from"@/services/api/apply.js";
import Bus from"@/assets/js/bus";
import UploadBigFile from"./vedioUpload.vue";
import{ getUserInfo,UUID}from"@/utils/helpers.js";
import{ addDataFileApi }from"@/services/api/apply.js";
import{ uploadFileApi, uploadMoreFileApi }from"@/services/api/common.js";
export default{
components:{ UploadBigFile, videoPlayer },
props:["dragShow","name","datasetId"],
data(){
return{
time:null,
time1:null,
time2:null,
preVideoShow:false,
pagation:{
pagesize:18,
total:0,
currentPage:1,
},
本地58同城checked:false,
recordType:0,//0 未录制 1 录制中
mediaRecorder:null,
photoAndVedioList:[],
photoList:[],
prephotoList:[],
everyTime:"",
allTime:"",
list:[],
remotePath:"",
inputName:"",
editorNameShow:false,
addPathData:{},
id:"",
addPath:"",
data:[],
defaultProps:{
children:"children",
label:"name",
},
backFloader:[{}],
firstPath:"",
nowPath:"",
lastPath:"",
fileData:{ listDirectory:[], listFile:[], fileServer:""},
playerOptions:{
playbackRates:[0.7,1.0,1.5,2.0],//播放速度
autoplay:false,//如果true，浏览器准备好时开始回放。
muted:false,// 默认情况下将会消除任何⾳频。
loop:false,// 导致视频⼀结束就重新开始。
preload:"auto",// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳⾏为,⽴即开始加载视频（如果浏览器⽀持）
language:"zh-CN",
aspectRatio:"16:9",// 将播放器置于流畅模式，并在计算播放器的动态⼤⼩时使⽤该值。值应该代表⼀个⽐例 - ⽤冒号分隔的两个数字（例如"16:9"或"4:3 "）
fluid:true,// 当true时，Video.js player将拥有流体⼤⼩。换句话说，它将按⽐例缩放以适应其容器。
sources:[
sources:[
{
type:"video/mp4",//这⾥的种类⽀持很多种：基本视频格式、直播、流媒体等，具体可以参看git⽹址项⽬
src:"",//url地址
},
],
poster:"",//你的封⾯地址
// width: document.documentElement.clientWidth, //播放器宽度
notSupportedMessage:"此视频暂⽆法播放，请稍后再试",//允许覆盖Video.js⽆法播放媒体源时显⽰的默认信息。        controlBar:{
timeDivider:true,
durationDisplay:true,
remainingTimeDisplay:false,
fullscreenToggle:true,//全屏按钮
},
},
};
},
methods:{
//弹窗预览视频
preVideo(url){
this.preVideoShow =true;
this.playerOptions.sources[0].src = url;
},
handleSizeChange(size){
this.pagation.pagesize = size;
},
//切换页码
handleCurrentChange(currentPage){
this.pagation.currentPage = currentPage;
},
/
/视频录制按钮控制
莱芜教育信息网recordMedia(){
dType ==0){
this.startMakeVideo();
}else{
this.stopMakeVideo();
}
},
// 调⽤摄像头
callCamera(){
// H5调⽤电脑摄像头API
.getUserMedia({
video:true,
// audio: true,
})
.then((success)=>{
// 摄像头开启成功
this.$refs["video"].srcObject = success;
//因为视频和⾳频分开录制这⾥直接注释了
// audioBitsPerSecond: 128000, // ⾳频码率
videoBitsPerSecond:1000000,// 视频码率
mimeType:"video/webm;codecs=h264",// 编码格式
});
// 实时拍照效果
this.$refs["video"].play();
})
.catch((error)=>{
<("摄像头开启失败，请检查摄像头是否可⽤！");
});