html5에서 렌더링 MJpeg 스트림

img 태그를 사용하여 HTML5에서 MJpeg 스트림을 렌더링하려고합니다. 나는 다음을 실행 해요 때, 모든 것이 큰 의미를 작동 비디오는 비디오가 끝날 때까지 재생이 시작됩니다 :html5에서 렌더링 MJpeg 스트림

<img src="http://[some ip]:[port]/mjpg">

내 질문은 I 프레임에 의해 스트림 프레임을 얻을 수있는 방법이다. 각 프레임에 대해, 나는 그것을 얻고, 무엇인가 (서버에 아약스 호출) 한 다음 프레임을 이미지로 표시하려고합니다.

감사합니다.

출처

2013-10-13 Lior Ohana

소스를 스트림하면 다른 주소 (http : // [some ip] : [port]/frame/XXX)의 프레임을 반환 할 수 없으며 서버에서 MJPEG 스트림 파서를 사용할 수 있습니다. 예를 들어 Paparazzo.js은 스트림을 파싱하고 단일 jpeg를 반환합니다. 실제로 이전에 저장하지 않고 마지막 프레임 만 반환하지만 변경 될 수 있습니다.

일부 플러그인과 서버가없는 j를 사용하는 브라우저에서만 문제를 해결할 수 없습니다.

출처

2013-10-14 22:05:21 Alex

카메라가 원시 JPEG 이미지 (.MJPEG 확장자가 아님)를 노출하는 경우 수동으로 다시로드해야합니다 (확장명이 .MJPEG 인 경우 브라우저는 모든 것을 처리하고 올바른 src를 넣음). .MJPEG가 있고 raw .JPEG를 사용하려면 카메라 설명서를 확인하십시오. 대부분의 카메라는 .MJPEG와 raw .JPEG 스트림을 (다른 URL에) 노출합니다.

아쉽게도 아약스를 통해 이미지를 쉽게 얻을 수 없지만 주기적으로 이미지의 src를 변경할 수 있습니다.

Date.getTime()을 사용하고 쿼리 문자열에 추가하여 브라우저가 이미지를 다시로드하도록하고 이미지가로드 될 때마다 반복 할 수 있습니다.

camera.html

<!DOCTYPE html> 
<html> 

<head> 
    <title>ipCam</title> 
</head> 

<body> 
    <h1>ipCam</h1> 
    <img id="motionjpeg" src="http://user:[email protected]:8080/" /> 
    <script src="motionjpeg.js"></script> 
    <script> 
     //Using jQuery for simplicity 

     $(document).ready(function() { 
      motionjpeg("#motionjpeg"); // Use the function on the image 
     }); 
    </script> 
</body> 

</html>

motionjpeg.js

function motionjpeg(id) { 
    var image = $(id), src; 

    if (!image.length) return; 

    src = image.attr("src"); 
    if (src.indexOf("?") < 0) { 
     image.attr("src", src + "?"); // must have querystring 
    } 

    image.on("load", function() { 
     // this cause the load event to be called "recursively" 
     this.src = this.src.replace(/\?[^\n]*$/, "?") + 
      (new Date()).getTime(); // 'this' refers to the image 
    }); 
}

주 내 예는 MotionJPEG 재생됩니다 : 당신이 jQuery를 사용하는 경우

코드는 다음과 같을 것 페이지로드시에는 재생/일시 중지/정지 기능을 허용하지 않습니다.

출처

2015-12-17 12:05:26 Zorgatone

스트림을 프레임 단위로 가져올 수는 없지만 캔버스에 그리는 방식으로 일정한 간격 또는 일정하지 않은 간격으로 프레임을 가져올 수 있습니다. 같은 것 canvas 및 img의 ID를 가정

: 물론

var ctx = canvas.getContext("2d"); 
canvas.width = img.width; 
canvas.height = img.height; 

(function loop() { 
    ctx.drawImage(img, 0, 0);   // grab frame 
    // extract frame here if needed 
    requestAnimationFrame(function() { 
    requestAnimationFrame(loop);  // updates per 1/30 fps 
    }); 
})();

, 루프가 필요로 할 때, 단순히 drawImage() "요구에"전화가 필요하지 않습니다. 그런 다음 캔버스를 사용하여 텍스트 (타임 스탬프 등)를 추가하십시오.) 또는 어떤 이미지로 추출 : IE에서 지원되지 약간 빠른

var dataURL = canvas.toDataURL("image/jpeg", 0.75); 
var img = new Image; 
img.onload = function() { 
    // image ready 
}; 
img.src = dataURL;

또는 메모리 친화적하지만, 비동기() :

canvas.toBlob(function(blob) { 
    var img = new Image; 
    img.onload = function() { 
    // image ready. 
    }; 
    img.src = (URL || webkitURL).createObjectURL(blob); 
}, "image/jpeg", 0.75);

당신이 추출 할 수 있습니다 캔버스에서 이미지/프레임을 반환하려면 Data-URI은 다음과 같습니다.

var uri = canvas.toDataURL("image/jpeg", 0.75);

출처

2016-06-19 01:04:06 K3N

html5에서 렌더링 MJpeg 스트림

답변

관련 문제