Play webcam trên Chrome hoặc Firefox

Hiện tại xu thế đưa ứng dụng lên web đang ngày càng phổ biến, xử lý ảnh cũng thế. Xử lý ảnh trên web có nhiều lợi thế so với 1 phần mềm rất nhiều:
– User không cần cài đặt thêm chương trình, framework,… để chạy. Không phụ thuộc vào hệ điều hành.
– Dễ dàng phân phối ứng dụng đến nhiều người
– Dễ dàng xử lý dữ liệu tập trung
…
Bài này chia sẻ code play webcam trên Chrome theo cách đơn giản nhất.

Sử dụng

Bên dưới là 1 iframe chứa 1 trang html đơn giản để play webcam. Link: https://thigiacmaytinh.com/wp-content/uploads/2020/07/wc.html

Bạn cần cấp quyền bằng cách chọn Allow để trang web có thể play webcam

Play webcam không có HTTPS (SSL)

Trong trường hợp bạn làm server trong mạng LAN, không có domain nên không có HTTPS thì Chrome sẽ không cho bật webcam. Lúc đó bạn phải config Chrome 1 chút để có thể chạy với IP address như http://192.168.1.100 chẳng hạn.

Đầu tiên các bạn paste đoạn bên dưới vào thanh địa chỉ Chrome:

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Trong mục vừa tìm có ô textbox, các bạn nhập địa chỉ các domain, IP không có HTTPS vào đó. Các địa chỉ cách nhau bằng dấu phẩy, bên phải chọn Enable rồi ấn nút Relaunch để khởi động lại Chrome. Vậy là xong, Chrome có thể play webcam không cần có HTTPS trong thanh địa chỉ

Source code

Bạn chỉ cần save code bên dưới thành file wc.html là có thể play được webcam. Ấn nút Take photo để chụp hình và save lại ở định dạng png.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Display Webcam Stream</title>
</head>
 
<body>
	<div id="container">
		<video autoplay="true" id="videoElement" width="320px" height="240px"></video>
		<canvas id="canvas"></canvas>
	</br>
		<button id="startbutton">Take photo</button>
	</div>
	<script>
		var video = document.querySelector("#videoElement");

		if (navigator.mediaDevices.getUserMedia) 
		{
		navigator.mediaDevices.getUserMedia({ video: true })
			.then(function (stream) {
				video.srcObject = stream;
				video.play();
			})
			.catch(function (e) {
			console.log(e);
			});
		}


		var startbutton = document.querySelector("#startbutton");
		var canvas = document.getElementById('canvas');
		startbutton.addEventListener('click', function(ev){
			takepicture();
			ev.preventDefault();
		}, false);

		
		function takepicture() 
		{
			var width = 320; 
			var height = 240;
			var context = canvas.getContext('2d');
			canvas.width = width;
			canvas.height = height;
			context.drawImage(video, 0, 0, width, height);			
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Display Webcam Stream</title>

</head>

<body>

</br>

<button id="startbutton">Take photo</button>

</div>

var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia)

{

navigator.mediaDevices.getUserMedia({ video: true })

.then(function (stream) {

video.srcObject = stream;

video.play();

})

.catch(function (e) {

console.log(e);

});

}

var startbutton = document.querySelector("#startbutton");

var canvas = document.getElementById('canvas');

startbutton.addEventListener('click', function(ev){

takepicture();

ev.preventDefault();

}, false);

function takepicture()

{

var width = 320;

var height = 240;

var context = canvas.getContext('2d');

canvas.width = width;

canvas.height = height;

context.drawImage(video, 0, 0, width, height);

}

</script>

</body>

</html>

Lưu ý

– Code cũng chạy được trên FireFox nhưng không chạy được trên IE
– Code chỉ chạy được ở localhost hoặc giao thức HTTPS (HTTP không được chấp nhận)

Sử dụng

Play webcam không có HTTPS (SSL)

Source code

Lưu ý

Leave a Reply Cancel reply