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. Oracle Flashback(flashback table或drop)

    在Oracle 10g中,Flash back家族分为以下成员:Flashback DatabaseFlashback DropFlashback TableFlashback Query(分Flas ...

  2. Python学习-day6 面向对象概念

    开始学习面向对象,可以说之前的学习和编程思路都是面向过程的,从上到下,一步一步走完. 如果说一个简单的需求,用面向过程实现起来相对容易,但是如果在日常生产,面向对象就可以发挥出他的优势了. 程序的可扩 ...

  3. LR采用的Sigmoid函数与最大熵（ME) 的关系

    LR采用的Sigmoid函数与最大熵(ME) 的关系 从ME到LR 先直接给出最大熵模型的一般形式,后面再给出具体的推导过程. \[\begin{align*} P_w(y|x) &= \df ...

  4. linux基础（Vi编辑器）

    整理的linux vi编辑器命令 Vi编辑器,进入方式,输入vi file即可进入编辑模式 1.vi模式(Linux严格区分大小写) Vi所学到的几种模式 模式 主要用途 相应操作 对应命令 普通模式 ...

  5. learn资料

    老陈的CSDN博客: http://blog.csdn.net/qq_35587839 1.memcache 和 memcached的区别:http://www.phpweblog.net/fuyon ...

  6. php单一入口和多入口模式详细讲解

    php单一入口模式可谓是现在一种比较流行的大型web应用开发模式,比如当前比较流行的一些php开发框架,zend,thinkphp,qeephp,还有cakephp 等他们都是采用的单一入口模式的.本 ...

  7. centons7编译安装zabbix3.4【转https://www.cnblogs.com/kowloon/p/7771495.html】

    或者参考官方文档:https://www.zabbix.com/documentation/3.4/manual/installation/install 一.预编译环境准备 1.lamp安装和启动 ...

  8. 关于python数据类型的一些举例

    if True: name2=1 print(name2) 输出:1 if False: name1=1 print(name1) 报错: NameError: name 'name1' is not ...

  9. UVA 10003 Cutting Sticks(区间dp)

    Description    Cutting Sticks  You have to cut a wood stick into pieces. The most affordable company ...

  10. GridView主键列不让编辑时应该修改属性DataKeyNames

    原文发布时间为:2008-08-02 -- 来源于本人的百度文章 [由搬家工具导入] 为了防止GridView主键被编辑，应该在GridView属性DataKeyNames里面写上主键