Vue 媒體處理（攝像頭，截圖，播放本地視頻）

一. 打開攝像頭

```javascriptthis.constraint = {// video屬性設置video: {width: 300,height: 300,},// audio屬性設置audio: true,}navigator.mediaDevices.getUserMedia(this.constraints).then((mediaStream) => {// 成功返回promise對象，接收一個mediaStream參數與video標簽進行對接this.mediaStream = mediaStream;//this.video = document.getElementById("video");this.video.srcObject = mediaStream;this.video.play();}

二. 實現拍照（截圖功能）

思路：利用 canvas 繪制圖片后轉圖片

let canvas = document.getElementById("canvas");let ctx = canvas.getContext("2d")ctx.drawImage(video, 0, 0, 300, 300);//獲取圖片的base64let imageBase64 = canvas.toDataURL("image/png");

三. 播放本地視頻

思路：利用 input 標簽選擇文件后，使用 FileReader 獲取 視頻的 Base64 后利用 video 播放

<!-- ref 用于 vue 選中該標簽 --> <input type="file" ref="file" /> if (this.$refs.file.files.length == 0) {this.warn = "還未選中文件";return;}let file = this.$refs.file.files[0];if (file.type != "video/mp4" && file.type != "video/mp3") {this.warn = "文件不為mp4或mp3";return;} var reader = new FileReader(); //將視頻轉為base64 reader.readAsDataURL(file); let that = this; reader.onload = function (e) {//e.target.result為視頻的base64// console.log(e.target.result);that.video.src = e.target.result;that.video.play();that.video.onended = function () {//視頻播放結束}; }

更多參考： MediaStream

總結

以上是生活随笔為你收集整理的Vue 媒体处理（摄像头，截图，播放本地视频）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。