html视频拍照图片存储,H5视频录制+拍照.html

视频录制+拍照

开始录制

播放

拍照

var mediaSource = new MediaSource();

mediaSource.addEventListener('sourceopen', handleSourceOpen, false);

var mediaRecorder;

var recordedBlobs;

var sourceBuffer;

var gumVideo = document.querySelector('video#gum');

var recordButton = document.querySelector('button#record');

var uploadButton = document.querySelector('button#upload');

var capButton = document.querySelector('button#cap');

var canvas = document.querySelector('canvas#showcap');

let context = canvas.getContext('2d');

recordButton.onclick = toggleRecording;

uploadButton.onclick = upload;

capButton.onclick = capphoto

// window.isSecureContext could be used for Chrome

var isSecureOrigin = location.protocol === 'https:' || location.hostname === 'localhost';

// if (!isSecureOrigin) {

// alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' + '\n\nChanging protocol to HTTPS');

// location.protocol = 'HTTPS';

// }

var constraints = {

audio: true,

video: {

width: 480,//视频宽度

height: 480,//视频高度

frameRate: 60,//每秒60帧

}

};

// navigator.mediaDevices.getUserMedia(constraints).

// then(handleSuccess).catch(handleError);

if (navigator.mediaDevices.getUserMedia) {

//最新的标准API

navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

} else if (navigator.webkitGetUserMedia) {

//webkit核心浏览器

navigator.webkitGetUserMedia(constraints, handleSuccess, handleError)

} else if (navigator.mozGetUserMedia) {

//firfox浏览器

navigator.mozGetUserMedia(constraints, handleSuccess, handleError);

} else if (navigator.getUserMedia) {

//旧版API

navigator.getUserMedia(constraints, handleSuccess, handleError);

}

function handleSourceOpen(event) {

console.log('MediaSource opened');

sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');

console.log('Source buffer: ', sourceBuffer);

}

function handleSuccess(stream) {

recordButton.disabled = false;

console.log('getUserMedia() got stream: ', stream);

window.stream = stream;

gumVideo.srcObject = stream;

}

function handleError(error) {

console.log('navigator.getUserMedia error: ', error);

}

function handleDataAvailable(event) {

if (event.data && event.data.size > 0) {

recordedBlobs.push(event.data);

}

}

function handleStop(event) {

console.log('Recorder stopped: ', event);

}

function toggleRecording() {

if (recordButton.textContent === '开始录制') {

startRecording();

} else {

stopRecording();

recordButton.textContent = '开始录制';

uploadButton.disabled = false;

}

}

function startRecording() {

recordedBlobs = [];

var options = { mimeType: 'video/webm;codecs=h264' };

try {

mediaRecorder = new MediaRecorder(window.stream, options);

} catch (e) {

console.error('Exception while creating MediaRecorder: ' + e);

alert('Exception while creating MediaRecorder: '

+ e + '. mimeType: ' + options.mimeType);

return;

}

console.log('Created MediaRecorder', mediaRecorder, 'with options', options);

recordButton.textContent = '结束录制';

uploadButton.disabled = true;

mediaRecorder.onstop = handleStop;

mediaRecorder.ondataavailable = handleDataAvailable;

mediaRecorder.start(10); // collect 10ms of data

console.log('MediaRecorder started', mediaRecorder);

}

function stopRecording() {

mediaRecorder.stop();

console.log('Recorded Blobs: ', recordedBlobs);

}

function upload() {

//保存在本地，通过post请求

//还可以用append方法添加一些附加信息参数为(name,value)，如下面的代码：

var blob = new Blob(recordedBlobs, { type: 'video/mp4' });

console.log(blob);

let src = window.URL.createObjectURL(blob);

document.getElementById('playvideo').src = src

}

function capphoto() {

context.drawImage(gumVideo, 0, 0, 480, 480);

let dd = canvas.toDataURL('image/jpg');

console.log(776, dd)

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史