ブラウザ上でWEBカメラのストリーミングが開始されない

前提・実現したいこと

※初の質問となります。表現が拙い部分がかなり多いかと思いますがどうかご容赦いただけたらと思います。

[第16回　TensorFlow.jsで「じゃんけん」を判別してみよう]
https://book.mynavi.jp/manatee/detail/id=99768

このサイトに倣って現在、ブラウザ上で動作するTensorFlow.jsを使ったじゃんけんゲームを作っています。

サイトの7-1節のWebカメラのストリーミングのサンプルコードを参照しながら書いていますが、HTMLファイルを直接ブラウザで開いてもストリーミングが開始されません。

サンプルコード内のHTMLとpredict.jsファイルを丸写ししたものを
デスクトップに入れていても動きません。

何が足りておらずストリーミングが開始されないのかを教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコード

[HTML]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href=""> </head> <body> <article id="article"> <h1 id="title" class="text-center h2">Sign Language Digits Clasification<br><small class="text-muted">with Tensorflow.js</small></h1> <div class="container-image"> <video id="main-stream-video" width="480" height="360"></video> </div> <div class="container-b"> <div class="btn-toolbar"> <div class="btn-group"> <button id="start-button" class="btn btn-outline-dark">???? Start</button> </div> <div class="btn-group"> <button id="predict-button" class="btn btn-outline-dark">???? Predict</button> </div> <div class="btn-group"> <button id="clear-button" class="btn btn-outline-dark">✨ Clear</button> </div> </div> </div> <div class="container-b"> <div class="output"> <ul id="console" class="list-unstyled"> <li>hello. please load model.</li> </ul> </div> </div> </article> <footer class="text-center"> <small>© 2018 Studio Identical Twins All Rights Reserved.</small> </footer> <script src="js/tensorflow.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/predict.js"></script> </body> </html>

[Java Script]

//-----------------------
// start button event
//-----------------------

$("#start-button").click(function(){
loadModel() ;
startWebcam();
});

// //-----------------------
// // load model
// //-----------------------

let model;
async function loadModel() {
console.log("model loading..");
$("#console").html(<li>model loading...</li>);
model=await tf.loadModel(http://localhost:8080/sign_language_vgg16/model.json);
console.log("model loaded.");
$("#console").html(<li>VGG16 pre trained model loaded.</li>);
};

//-----------------------
// start webcam
//-----------------------

var video;
function startWebcam() {
console.log("video streaming start.");
$("#console").html(<li>video streaming start.</li>);
video = $('#main-stream-video').get(0);
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
 navigator.msGetUserMedia;

navigator.getMedia({
	video: true,
	audio: false
}, function(stream) {
	localStream = stream;
	video.srcObject = stream;
	video.play();
}, function(error) {
	alert("Something wrong with webcam!");
});