html - 동적으로 Base64 이미지를 변경하는 방법

라이브 비디오 스트림을 서버로 전송하고 웹 페이지에 표시하려고합니다. 음, html 페이지에 내 이미지를 성공적으로 보여 주지만 이미지가 정지되었습니다. 브라우저에서 새로 고침 버튼을 누르면 이미지가 변경됩니다. 비디오 스트림처럼 보이게 만드는 방법? 양해html - 동적으로 Base64 이미지를 변경하는 방법

var socket = io(); 
 

 
socket.on('liveCam', function(url) { 
 

 
    var old_url = ''; 
 
    var diff = strcmp(url , old_url); 
 
    old_url = url; 
 

 
    console.log('diff =', diff); 
 
    var src_url = 'data:image/jpeg;base64,' + url; \t 
 
    setInterval(setimagesrc(src_url), 50); 
 

 
}); 
 

 
function setimagesrc(uurl){ 
 
    $('#image').attr('src', uurl); 
 
} 
 

 
function strcmp (str1, str2) { 
 
    return str1 == str2 ? 1 : 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
 

 
<h1>streaming</h1> 
 
<p> 
 
    <img src="" id="image"> 
 
</p>

감사 : 다음은 내 코드 조각입니다!

출처

2016-06-22 Jason C

의 첫 번째 매개 변수 인 setInterval 함수는 표현식을 계산합니다. 당신이 한 것은 당신이 setimagesrc 함수를 설정 한 간격으로 실행되도록 호출했다는 것입니다. 이로 인해 setimagesrc이 한 번만 실행됩니다. 여기서해야 할 일은 setimagesrc 함수에 대한 참조를 추가하고 전역 변수를 사용하거나 setInterval에서 익명 함수를 사용하는 것입니다.이 매개 변수를 사용하여 setimagesrc을 호출합니다.

예 1 :

setInterval(setimagesrc, 50); 

function setimagesrc(){ 
    $('#image').attr('src', src_url); 
}

예 2 :

setInterval(function(){setimagesrc(src_url)}, 50);

나는 두 번째 방법을 선호합니다.

출처

2016-06-22 13:19:34 iiliev

이 실수를 지적 해 주셔서 감사합니다.하지만 여전히 작동하지 않습니다. 나는'setTimeout (function() {setimagesrc (src_url)}, 50);'에 의해 소스 파일에서 이미지를 사용하려고 시도했다. base64 이미지의 경우 내 페이지 새로 고침을 제외하고 여전히 고정되어 있습니다. –

서비스에서 가져온 Base64가 오류없이 올바른지 확인하십시오. 왜냐하면 base64 이미지로 시도했기 때문에 크롬 및 엣지에서 제대로 작동합니다. – iiliev

예, 내 base64 소스가 맞습니다. 그러나 문제는 내 원본 URL이 업데이트되지 않는다는 것을 알았고 귀하의 답변으로 해결했습니다. 당신의 도움을 주셔서 감사합니다. –

html - 동적으로 Base64 이미지를 변경하는 방법

답변

관련 문제