1. Trang chủ
  2. Câu hỏi và trả lời
  3. Làm thế nào để thực hiện một ảnh chụp từ một dòng MJPEG trong HTML

Làm thế nào để thực hiện một ảnh chụp từ một dòng MJPEG trong HTML

2011-02-28 18 views
5

Tôi có trang web HTML sau:Làm thế nào để thực hiện một ảnh chụp từ một dòng MJPEG trong HTML

<html> 
<body> 
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'> 
</body> 
</html>

trang web này hiển thị thức ăn chăn nuôi của một camera IP luồng dữ liệu MJPEG. Bạn có thể thử mã ở trên tại đây: http://jsfiddle.net/jU4aq/ (nó không hoạt động từ IE)

Câu hỏi của tôi là cách tôi có thể tạo ảnh chụp nhanh của nguồn cấp dữ liệu đó. Về cơ bản tôi muốn thêm một nút mà khi người dùng nhấp vào nó, một hộp thoại sẽ bật lên và sẽ cung cấp cho bạn tùy chọn để lưu hình ảnh.

Nguồn

2011-02-28 LEM

+0

Điều này chắc chắn là không thể trong HTML thuần túy. Bạn có thể sử dụng ngôn ngữ phía máy chủ nào và (thực tế hơn) phía máy khách nào? –

+0

Javascript là lựa chọn duy nhất của tôi. Tôi không thể sử dụng bất kỳ ngôn ngữ phía máy chủ nào. – LEM

+1

Hmm. Tìm nạp hình ảnh vào phần tử canvas có thể hoạt động, nếu chỉ lấy khung hình hiện tại một cách đáng tin cậy. Gắn thẻ lại để hiển thị tốt hơn .... Tuy nhiên, để thực sự phân phát tệp cục bộ dưới dạng tải xuống "Lưu dưới dạng", bạn có thể cần thêm Flash. –

Trả lời

3

dòng bạn dường như không có tác dụng ngay bây giờ nhưng hãy thử một chút vải javascript, như:

<html> 
<body> 
<IMG id="myImage" SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'> 

<input type="button" id="save" value="Save to PNG"> 

<script type="text/javascript"> 
document.getElementById('save').onclick = function() { 

var c = document.createElement('canvas'); 
var img = document.getElementById('myImage'); 
c.width = img.width; 
c.height = img.height; 
var ctx = c.getContext('2d'); 


ctx.drawImage(img, 0, 0); 
//window.location = c.toDataURL('image/png'); 
window.open(c.toDataURL('image/png')) 
}; 

</script> 

</body> 
</html>

Nguồn

2011-02-28 18:25:21

+0

Cảm ơn bạn rất nhiều vì đã trả lời. Tôi chỉ thử nó trên Firefox nhưng không có gì xảy ra khi tôi nhấp vào nút lưu. Nó có phải hiển thị hộp thoại lưu không? Luồng này hoạt động cho tôi ngay bây giờ. Nếu nó không hoạt động, bạn cũng có thể thử http://extcam-16.se.axis.com/axis-cgi/mjpg/video.cgi thậm chí còn nhanh hơn. Cảm ơn – LEM

+0

Oh my. Từ 4.8.11.3 trong thông số: "Bất cứ khi nào phương thức toDataURL() của phần tử canvas có cờ sạch gốc được đặt thành false được gọi, phương thức phải tăng ngoại lệ SECURITY_ERR." Rõ ràng hành động vẽ hình ảnh trên canvas không cho phép bạn sử dụng toDataURL. Nó chỉ có thể hoạt động nếu bạn đang lưu trữ html trên cùng một nguồn gốc vì nguồn cấp dữ liệu đang được lưu trữ. Bạn sẽ phải thử điều đó. –

+0

Lưu ý rằng nếu bạn không có kế hoạch lưu trữ html trên cùng một nguồn gốc (Tên miền) làm nguồn cấp dữ liệu, bạn có thể phải làm điều gì đó phức tạp. –

1

Một số camera IP có một con đường cho ảnh chụp nhanh. Ví dụ: Vivotek chạy ở "/cgi-bin/viewer/video.jpg?streamid=0".

Bạn có thể thiết lập nút HTML kích hoạt sự kiện JS sẽ tạo ra một DOM DOMelement với URL đó là thuộc tính "src". Nhưng có thể bạn sẽ cần phải giải quyết các vấn đề tên miền chéo http://en.wikipedia.org/wiki/Same_origin_policy.

Giải pháp tôi thấy nhất là sử dụng ngôn ngữ phía máy chủ như php, nút, python, ruby, v.v. để tải xuống ảnh chụp và lưu nó dưới dạng tệp công khai cho trang web của bạn.

Nguồn

2011-08-16 17:26:20 rodowi

 Các vấn đề liên quan

  • Không có vấn đề liên quan^_^