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. Leetcode24--->Swap Nodes in Pairs(交换单链表中相邻的两个节点)

    题目:给定一个单链表,交换两个相邻的节点,且返回交换之后的头节点 举例: Given 1->2->3->4, you should return the list as 2-> ...

  2. 鼠标在窗口中的坐标转换到 canvas 中的坐标

        鼠标在窗口中的坐标转换到 canvas 中的坐标 由于需要用到isPointInPath函数,所以必须得将鼠标在窗口中的坐标位置转换到canvas画布中的坐标,今天发现网上这种非常常见的写法其 ...

  3. [python学习篇][书籍学习][python standrad library][内建函数]之[all,any,basestring,isinstance,bin,bool,@classmethod,@staticmethod,cmp,enumerate

    Python 解释器内置了一些函数,它们总是可用的.这里将它们按字母表顺序列出.     Built-in Functions     abs() divmod() input() open() st ...

  4. CodeM初赛B轮

    做什么啊,我这么菜,应该弃赛的 [编程|1500分] 子串 时间限制:3秒空间限制:32768K 题目描述 给出一个正整数n,我们把1..n在k进制下的表示连起来记为s(n,k),例如s(16,16) ...

  5. 利用Solr的post工具对核心my_core执行删除操作

    <delete> <query>*:*</query> </delete> 将上面代码保存到delete_all.xml文件中,并使用Solr的post ...

  6. API生命周期第二阶段——设计：采用swagger进行API描述、设计

    本篇博客主要是以swagger为依托,介绍API生命周期的第二个阶段--设计!在详细介绍之前,我必须声明一点:如果是想了解swagger和项目框架的集成的,这里没有.我要介绍的swagger进行的AP ...

  7. 顺序表ans链性表

    #include<stdio.h>#include<malloc.h>#include<string.h>typedef int ElemType;typedef ...

  8. python相关——如何安装pip

    今天在新的一台电脑上安装了pip.流程有点忘记了,在这里再次记录下来. 本教程基于python3.4,并且需要连接互联网,总共需要两步. 1.要安装pip,首先要安装setuptools,链接:htt ...

  9. 【Luogu】P2445动物园（最大流）

    题目链接 题目本身还是比较水的吧……容易发现是最大流套上dinic跑一遍就好了,并不会超时. 比较不偷税的一点是关于某动物的所有目击报告都符合才能连边……qwqqwqqwq #include<c ...

  10. CentOS7 Failed to start iptables.解决方法

    Shit, CentOS怎么这么多bug.... 公司机房周日突然掉电,之前的Openstack环境就不能用了. 重新Run了一遍安装脚本,发现这个错误: iptables 咋又起不来了呢..... ...