HTML

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>recorded</title>

 </head>

 <body>

     <video id="gum" autoplay muted></video>

     <video id="recorded" autoplay loop></video>

     <div>

       <button id="opencamera">Open camera</button>

       <button id="record" disabled>Start Recording</button>

       <button id="play" disabled>Play</button>

       <button id="download" disabled>Download</button>

     </div>

 </body>

 </html>

JavaScript

'use strict';

var mediaRecorder;

var recordedBlobs;

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

var recordedVideo = document.querySelector('video#recorded');

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

var playButton = document.querySelector('button#play');

var downloadButton = document.querySelector('button#download');

recordButton.onclick = toggleRecording;

playButton.onclick = play;

downloadButton.onclick = download;

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: true

};

function handleSuccess(stream) {

  recordButton.disabled = false;

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

  window.stream = stream;

  if (window.URL) {

    gumVideo.src = window.URL.createObjectURL(stream);

  } else {

    gumVideo.src = stream;

  }

}

function handleError(error) {

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

}

document.querySelector('#opencamera').onclick = function(){

  this.disabled = true;

  navigator.mediaDevices.getUserMedia(constraints).

    then(handleSuccess).catch(handleError);

};

recordedVideo.addEventListener('error', function(ev) {

  console.error('MediaRecording.recordedMedia.error()');

  alert('Your browser can not play\n\n' + recordedVideo.src

    + '\n\n media clip. event: ' + JSON.stringify(ev));

}, true);

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 === 'Start Recording') {

    startRecording();

  } else {

    stopRecording();

    recordButton.textContent = 'Start Recording';

    playButton.disabled = false;

    downloadButton.disabled = false;

  }

}

function startRecording() {

  recordedBlobs = [];

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

  if (!MediaRecorder.isTypeSupported(options.mimeType)) {

    console.log(options.mimeType + ' is not Supported');

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

    if (!MediaRecorder.isTypeSupported(options.mimeType)) {

      console.log(options.mimeType + ' is not Supported');

      options = {mimeType: 'video/webm'};

      if (!MediaRecorder.isTypeSupported(options.mimeType)) {

        console.log(options.mimeType + ' is not Supported');

        options = {mimeType: ''};

      }

    }

  }

  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 = 'Stop Recording';

  playButton.disabled = true;

  downloadButton.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);

  recordedVideo.controls = true;

}

function play() {

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

  recordedVideo.src = window.URL.createObjectURL(superBuffer);

}

function download() {

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

  var url = window.URL.createObjectURL(blob);

  var a = document.createElement('a');

  a.style.display = 'none';

  a.href = url;

  a.download = 'test.webm';

  document.body.appendChild(a);

  a.click();

  setTimeout(function() {

    document.body.removeChild(a);

    window.URL.revokeObjectURL(url);

  }, 100);

}

javascript原生调用摄像头的更多相关文章

  1. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  2. 用NativeScript创建JavaScript原生移动应用

    Telerik公开了用于创建安卓.iOS和Windows Universal跨平台原生应用的框架,NativeScript的公共访问权限. NativeScript既不是一种新型的JavaScript ...

  3. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  4. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  5. [转] 有趣的JavaScript原生数组函数

    在JavaScript中,可以通过两种方式创建数组,Array构造函数和 [] 便捷方式, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘obj ...

  6. Hybrid App开发模式中, IOS/Android 和 JavaScript相互调用方式

    IOS:Objective-C 和 JavaScript 的相互调用 iOS7以前,iOS SDK 并没有原生提供 js 调用 native 代码的 API.但是 UIWebView 的一个 dele ...

  7. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  8. JavaScript原生Array常用方法

    JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...

  9. 有趣的JavaScript原生数组函数

    本文由 伯乐在线 - yanhaijing 翻译.未经许可,禁止转载!英文出处:flippinawesome.欢迎加入翻译小组. 在JavaScript中,可以通过两种方式创建数组,Array构造函数 ...

随机推荐

  1. day01_05.数学运算符

    数学运算符 $zhang = 100; $lisi = 50; echo $zhang+$lisi; 答案:150 $zhang = 50; $lisi = 40; echo $zhang - $li ...

  2. day03_01 Python历史、32bit和64bit系统的区别

    先看一下讲师的笔记,有python介绍 在python2.6版本之后,想清理一些东西,追求简单明了,就直接升级到了python3.0 但是python3.0导致很多企业都不更新,因为有很多企业的网站代 ...

  3. 【mysql 优化 5】左连接和右连接优化

    原文地址:8.2.1.8 Left Join and Right Join Optimization mysql以下列方式实现一个A left join B 连接条件: 1,表B设置为依赖于表A和A所 ...

  4. CentOS 6.3下安装腾达USB无线网卡遇到的问题及解决方法

    前言:centos 6.3 下,安装腾达W311M型号Usb无线网卡的步骤.究竟折腾及同事的先前帮助,后来搞定. centos6.3 为64位.安装步骤及顺序: 1.在当前版本下安装W311M usb ...

  5. 【bzoj4247】挂饰 背包dp

    题目描述 JOI君有N个装在手机上的挂饰,编号为1...N. JOI君可以将其中的一些装在手机上. JOI君的挂饰有一些与众不同——其中的一些挂饰附有可以挂其他挂件的挂钩.每个挂件要么直接挂在手机上, ...

  6. [BZOJ4260] Codechef REBXOR (01字典树,异或前缀和)

    Description Input 输入数据的第一行包含一个整数N,表示数组中的元素个数. 第二行包含N个整数A1,A2,-,AN. Output 输出一行包含给定表达式可能的最大值. Sample ...

  7. cf524C The Art of Dealing with ATM

    ATMs of a well-known bank of a small country are arranged so that they can not give any amount of mo ...

  8. ideaaaaaaaaa

    数据库proxy:可以用作自动化数据逆向SQL test4j/jtester:

  9. elasticsearch优酷教程

    犹学达的教程,可以用youku搜索一下,很不错

  10. 标准C程序设计七---46

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...