js調用pc攝像頭實現拍照、錄視頻等，新版Chrome無訪問http頁面無法打開麥克風、攝像頭

• • 新版Chrome配置
  • vue環境下的前端
  • function部分

##由于沒有https環境，只有http環境，各種測試后，找到的很實用的方法

新版Chrome配置

1、地址欄輸入：chrome://flags

2、搜索：unsafely-treat-insecure-origin-as-secure

vue環境下的前端

<template><div class="camera_outer"><video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video><div class="video_player"><video-player class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div><canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas><div v-if="imgSrc" class="img_bg_camera"><img :src="imgSrc" alt="" class="tx_img"></div><div v-else class="btn_camera">把您的臉至于圓圈中央</div><div><el-button @click="getCompetence()">打開攝像頭</el-button><el-button @click="setImage()">截圖</el-button><el-button @click="stopNavigator()">關閉攝像頭</el-button><el-button @click="startMakeVideo()">開始采集</el-button><el-button @click="stopMakeVideo()">停止采集</el-button> <!-- <el-button id = "a">停止采集</el-button>--></div></div>

function部分

 ```javascript <script>export default {data () {return {videoWidth: 500,videoHeight: 300,imgSrc: '',thisCancas: null,thisContext: null,thisVideo: null,showVidwo: null,mediaRecorder: null,validTip: '驗證中',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: [{type: "",src: 'http://image.shag.com/test.mp4'//url地址//src: 'https://vdept.bdstatic.com/463776704b6749576b58616c637a454b/3266636b32547758/5502ee323aee7f88fe6dbd07e1324d2a35be451791ae336808b3e9295590f235b71b33a199988feff0c4e6f3004ef63e.mp4?auth_key=1577424982-0-0-49bf477737a9380b56950ba68c667d47'//url地址// src: "" //url地址}],poster: "", //你的封面地址// width: document.documentElement.clientWidth,notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true //全屏按鈕}}}},computed: {},methods: {/**@author dandan li*@Time 2019/6/5 0005 17:35*@function 調用權限*****************************************/getCompetence () {var self = this;this.thisCancas = document.getElementById('canvasCamera');this.thisContext = this.thisCancas.getContext('2d');this.thisVideo = document.getElementById('videoCamera');// 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設置一個空對象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {}}// 一些瀏覽器實現了部分mediaDevices，我們不能只分配一個對象// 使用getUserMedia，因為它會覆蓋現有的屬性。// 這里，如果缺少getUserMedia屬性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {// 首先獲取現存的getUserMedia(如果存在)var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;// 有些瀏覽器不支持，會返回錯誤信息// 保持接口一致if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'))}// 否則，使用Promise將調用包裝到舊的navigator.getUserMediareturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject)})}}var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 舊的瀏覽器可能沒有srcObjectif ('srcObject' in self.thisVideo) {self.thisVideo.srcObject = stream;self.mediaRecorder = new MediaRecorder(stream, {audioBitsPerSecond : 128000, // 音頻碼率videoBitsPerSecond : 1000000, // 視頻碼率mimeType : 'video/webm;codecs=h264' // 編碼格式})} else {// 避免在新的瀏覽器中使用它，因為它正在被棄用。self.thisVideo.src = window.URL.createObjectURL(stream)}self.thisVideo.onloadedmetadata = function (e) {self.thisVideo.play()}}).catch(err => {console.log(err)})},/**@author wf_Huang*@Time 2019/6/5 0005 17:32*@function 繪制圖片*****************************************/setImage () {var self = this;// 點擊，canvas畫圖self.thisContext.drawImage(self.thisVideo, 0, 0, self.videoWidth, self.videoHeight);// 獲取圖片base64鏈接var image = this.thisCancas.toDataURL('image/png');self.imgSrc = image;this.$emit('refreshDataList', this.imgSrc)},/**@author wf_Huang*@Time 2019/6/5 0005 17:44*@function base64轉文件*****************************************/dataURLtoFile (dataurl, filename) {var arr = dataurl.split(',')var mime = arr[0].match(/:(.*?);/)[1]var bstr = atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},/**@author wf_Huang*@Time 2019/6/10 0010 3:41*@function 關閉攝像頭*****************************************/stopNavigator () {this.thisVideo.srcObject.getTracks()[0].stop()},/**@author bruce li*@Time 2019/6/5 0005 17:32*@function 采集視頻*****************************************/startMakeVideo () {this.mediaRecorder.start();console.log('開始采集')},/**@author bruce li*@Time 2019/6/5 0005 17:32*@function 停止采集視頻*****************************************/stopMakeVideo () {this.mediaRecorder.stop();// 事件this.mediaRecorder.ondataavailable = function (e) {console.log(e);// 下載視頻var blob = new Blob([e.data], {'type': 'video/mp4'});let a = document.createElement('a');a.href = URL.createObjectURL(blob);a.download = `test.mp4`;a.click();console.log('停止采集視頻')}}},mounted () {//this.getCompetence()},beforeDestroy () {//this.stopNavigator()}}</script>

總結

以上是生活随笔為你收集整理的js调用pc摄像头实现拍照、录视频等，新版Chrome无访问http页面无法打开麦克风、摄像头的全部內容，希望文章能夠幫你解決所遇到的問題。

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