HTML
<div id="bo">
<div align="center" >
<input type="hidden" name="imgValue" id="imgValue" />
<button id="btnOpen1" class="btn btn-default" type="button" >
<!-- href为注册表的值 -->
<a href="aClient://" onclick="return luzhi()">录制视频</a></button>
<span>选择摄像头:<select id="videoSource"></select></span>
</div>
<div id="vdoOne" align="center" style="width: 1300px;height: 750px;margin: 10px 17%">
<video id="video" controls autoplay style="width: 100%; height:100%; object-fit: fill"></video>
</div>
<canvas id="canvasPreview" style="margin-top:15px;" width="1" height="1"></canvas>
<canvas id="canvasUpload" style="display:none;" width='1' height='1'></canvas>
</div>
JS
Elements for taking the snapshot
var canvasPreview = document.getElementById('canvasPreview');
var canvasUpload = document.getElementById('canvasUpload');
var contextPreview = canvasPreview.getContext('2d');
var contextUpload = canvasUpload.getContext('2d');
var funId=$("#funId").val();
$("#afunId").val(funId);
//#################### Video Source #######################3
var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');
navigator.mediaDevices.enumerateDevices()
.then(gotDevices).then(getStream).catch(handleError);
videoSelect.onchange = getStream;
function gotDevices(deviceInfos) {
for (var i = 0; i < deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
var option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label ||
'camera ' +
(videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Found ome other kind of source/device: ', deviceInfo);
}
}
}
var _streamCopy = null;
function getStream() {
if (_streamCopy != null) {
try {
_streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
} catch (e) {
_streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream
}
}
var constraints = {
audio:false,
video: {
optional: [
{
sourceId: videoSelect.value
}
]
}
};
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
}
function gotStream(stream) {
_streamCopy = stream; // make stream available to console
videoElement.srcObject = stream;
}
function handleError(error) {
alert(error.name + ": " + error.message);
}
结束
以上为获取摄像头,如果摄像头自带话筒,话筒跟随摄像头走
以下为html根据注册表打开本地文件
…
- 待补充