最近公司项目涉及到一个需求，调用电脑摄像头功能，经过在网上查找资料有以下三种方案实现。
- 通过浏览器API来getUserMedia来实现调用用户的摄像头，但有两点限制：部署到生产服务的时候要使用htts协议访问该项目，第二点限制就是第一次获取摄像头时要点击允许弹窗。
- 通过web端发送websocket请求给客户端，然后客户端调用摄像头应用程序，但每次初始打开摄像头应用时都有个初始化2~3秒左右，用户体验不免友好。
- 通过客户端获取摄像头的每一帧数据，并通过websocket返回给web端，具体步骤下面有代码讲解。
getUserMedia方式实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>调用摄像头录像</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="startRecord">开始录制</button>
<button id="stopRecord">停止录制</button>
<script>
var video = document.querySelector('#video');
var startRecord = document.querySelector('#startRecord');
var stopRecord = document.querySelector('#stopRecord');
var mediaRecorder;
var chunks = [];
navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(function (stream) {
video.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function (e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function (e) {
var blob = new Blob(chunks, { type: 'video/mp4' });
chunks = [];
var videoURL = window.URL.createObjectURL(blob);
video.src = videoURL;
};
});
startRecord.onclick = function () {
mediaRecorder.start();
};
stopRecord.onclick = function () {
mediaRecorder.stop();
};
</script>
</body>
</html>
客户端返回视频流方式实现代码
vue前端代码
前端接收到H264视频流，需要用JMuxer来转码才能在video标签里播放，需要执行npm install JMuxer来安装这个库。详细代码如下：
<template>
<video id="player" :controls="false" :muted="false" :autoplay="true"></video>
</template>
<script setup>
import JMuxer from 'jmuxer';
import { onMounted, onBeforeUnmount} from 'vue';
var ws = null;
var jmuxer = null;
const list = reactive([]);
const isDisable = ref(false);
onMounted(() => {
jmuxer = new JMuxer({
node: 'player',
// 可用值是:video、audio
mode: 'video',
// 最大延迟时间(毫秒), 默认为值是500毫秒
maxDelay: 100,
// 缓冲区刷新时间,默认为值是500毫秒
flushingTime: 0,
// 是否会自动清除播放的媒体缓冲区。默认为true
clearBuffer: true,
// 可选值。视频的帧率，如果它是已知的或固定值。如果所提供的媒体数据中没有块持续时间，它将用于查找帧持续时间。
fps: 30,
// 将从MP4轨道数据读取FPS，而不是使用(以上)FPS值。默认为false。
readFpsFromTrack: false,
// 将在浏览器控制台打印调试日志。默认为false
debug: false,
// 遇到任何丢失的视频帧将会被触发
onMissingVideoFrames: function (data) {
console.log('丢失的视频帧');
},
onError: function (data) {
if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
jmuxer.reset();
}
}
});
ws = new WebSocket('ws://127.0.0.1:12797');
ws.binaryType = 'arraybuffer';
ws.onmessage = function (event) {
jmuxer.feed({ video: new Uint8Array(event.data) });
};
ws.onopen = function () {
console.log('已连接');
ws.send('{"interfaceId":"100002","command":"1"}');
};
ws.onerror = function (err) {
console.log('出错--Socket Error', err);
};
ws.onclose = function () {
console.log('断开');
};
});
// 实现拍照功能
const toScan = () => {
const videoEl = document.getElementById('player');
const canvas = document.createElement('canvas');
canvas.width = videoEl.videoWidth;
canvas.height = videoEl.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(videoEl, 0, 0, videoEl.videoWidth, videoEl.videoHeight);
console.log(canvas.toDataURL('image/png'));
};
onBeforeUnmount(() => {
console.info('离开页面,关闭高拍仪');
ws.close();
jmuxer.destroy();
});
</script>
C++客户端
https://github.com/qiyingcong/vue-c-websocket点击下载客户端包
双击打开这个应用程序就可以访问本地的websocket的视频流了
image.png
