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. Leetcode34--->Search for a Range(在排序数组中找出给定值出现的范围)

    题目:给定一个排序数组,找出给定的target值出现的范围:算法复杂度要求在O(logn);如果没有找到,则返回[-1, -1]; 举例: For example,Given [5, 7, 7, 8, ...

  2. day05_02 IDE介绍及设置

    notepad++比较麻烦,使用IDE工具进行程序开发 集成开发环境(IDE,Integrated Development Environment) VIM #经典的linux下的文本编辑器 Emac ...

  3. js常见的方法

    Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ ...

  4. [git 学习篇] 创建公钥

    http://riny.net/2014/git-ssh-key/ 1 安装 windows gitbash    msysgit是Windows版的Git,从https://git-for-wind ...

  5. JQuery常用的HTML页控制取值、赋值

    1,关于tab页签 获取当前页签的属性: var tabsSelect=$("#easytabs").tabs("getSelected"); var titl ...

  6. 【Luogu】P3211XOR和路径（高斯消元）

    题目链接 唉我个ZZ…… 首先考虑到异或是可以每一位分开算的 好的以后再碰见位运算题我一定先往按位开车上想 然后设f[i]为从i点出发到终点是1的概率 高斯消元解方程组即可. #include< ...

  7. mybatis学习（十二）——mybatis逆向工程

    MyBatis Generator (MBG)是一个mabatis的代码生成器,能够根据表自动生成mapper接口,mapper.xml文件,javaBean文件. 1.MBG的下载 打开https: ...

  8. poj3311Hie with the Pie

    Hie with the Pie Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7599   Accepted: 4088 ...

  9. [转] Makefile 基础 (4) —— Makefile 书写命令

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客:(最原始版本) http://blog.csdn.net/haoel/article/details/2886 我转自 ...

  10. POJ3928 Ping pong

      Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu Description N(3<= ...