在javascript

时间:2017-06-01 22:51:43

标签: javascript html5 video canvas webcam

我需要捕获网络摄像头视频数据并在流式传输到另一台服务器时发送。现在我可以逐帧发送它来计算帧速率,但不确定它是否是最佳实践。

我面临的另一个问题是,如果我无法通过DOM访问来创建html5视频元素,那么如何管理它。现在我正在使用捕获功能获取画布信息,但假设不是DOM,或者甚至不能显示它。

 navigator.getMedia = ( navigator.getUserMedia ||
       navigator.webkitGetUserMedia ||
       navigator.mozGetUserMedia);

       navigator.getMedia (
         {
              video: true,
              audio: false
            },
            function(localMediaStream) {   
              var video = document.getElementById('video');
              video.src = window.URL.createObjectURL(localMediaStream);
              video.onloadedmetadata = function(e) {
                 var stream = capture(video);
                 $.post( "another-server.com/sendvideo", function(stream ) {
                (...)


capture  = function(video, scaleFactor) {
      //scaleFactor: optional param to resize the img if needed
      if(scaleFactor == null){
        scaleFactor = 1;
      } 
      var w = video.videoWidth * scaleFactor;
      var h = video.videoHeight * scaleFactor;
      var canvas = document.createElement('canvas');
        canvas.width  = w;
          canvas.height = h;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, w, h);

      return canvas;
    } 

0 个答案:

没有答案