HTML5 获取摄像头和视频控制接口（navigator.getUserMedia API）使用示例

Camera and Video Control Demo with HTML5 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

html5, API

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 27716
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
// 设置事件监听器
window.addEventListener("DOMContentLoaded", function() {
if (navigator.mediaDevices === undefined) {
        var div = document.createElement("div"); 
        div.innerHTML = 'mediaDevices not supported'; 
        document.body.appendChild(div);    
}

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         alert("The following error occurred: " + err.name);
      }
   );
} else {
        var div = document.createElement("div"); 
        div.innerHTML = 'getUserMedia not supported'; 
        document.body.appendChild(div);
        alert("getUserMedia not supported");
}

}, false);

编译

CSS

HTML

Camera and Video Control Demo with HTML5 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

html5, API

编辑器支持Emmet

快捷键

Camera and Video Control Demo with HTML5 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

html5, API

HTML5 Web音频应用程序接口（Web Audio API）实例：参数均衡器

使用HTML5 AudioContext接口实现音频控制器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：