---
# System prepended metadata

title: obj on web

---



---


---
# obj on web 

# 參考資料
[Tensorflow Object Detection API Web Service](https://github.com/webrtcHacks/tfObjWebrtc)
https://github.com/SamsungInternet/ar-demos
# 基本安裝

```shell=
sudo apt-get update
sudo apt-get install tasksel
sudo tasksel
cd /var/www/html
```

### git clone 參考資料
```shell=
sudo git clone https://github.com/webrtcHacks/tfObjWebrtc.git
cd tfObjWebrtc/
```
# Install docker
```shell=
sudo apt-get update
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
    
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo apt-key fingerprint 0EBFCD88

sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
   
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
apt-cache madison docker-ce
sudo docker run hello-world

```
# 進入root   創建tf-webrtchacks container
## 將container的5000端口映射到主機的5000端口
```shell=
sudo docker run -it -p 5000:5000 --name tf-webrtchacks -v $(pwd):/code chadhart/tensorflow-object-detection:webrtchacks
```
## 解決運行server.py的問題
```shell=
python setup.py install
protoc object_detection/protos/*.proto --python_out=.
apt-get update
apt-get install wget
wget -O protobuf.zip https://github.com/google/protobuf/releases/download/v3.0.0/protoc-3.0.0-linux-x86_64.zip 
unzip protobuf.zip
./bin/protoc object_detection/protos/*.proto --python_out=.
export PYTHONPATH=$PYTHONPATH:`pwd`:`pwd`/slim
```
## 把http變https(生產憑證)
```shell=
wget https://ftp.openssl.org/source/openssl-1.0.2r.tar.gz //ssl生產工具
tar -zxvf openssl-1.0.2r.tar.gz 
cd openssl-1.0.2r/
apt-get install build-essential
./config --prefix=/usr/local --openssldir=/usr/local/openssl 
make
make test
make install
openssl version  //版本
which openssl    //openssl的位置
openssl req -x509 -newkey rsa:4096 -nodes -out cert.pem -keyout key.pem -days 365   //生產憑證

nano server.py  //最下面有個with SSL，改成下面程式碼
app.run(debug=True, host='0.0.0.0') 將此行註解
app.run(debug=True, host='0.0.0.0', ssl_context=('cert.pem','key.pem'))
```
# 換model
* 下載[zip](https://drive.google.com/file/d/1RbkCuZSkIzByKfPzqxQrbFK-d16WjTae/view?usp=sharing)檔
* 上傳訓練後的 frozen_inference_graph.pb 、 labelmap.pbtxt 、 object_detection_api.py
* 替換 ssd_mobilenet_v1_coco_2017_11_17 內的 frozen_inference_graph.pb
* 將 labelmap.pbtxt 複製到 object_detection/data
* 替換 object_detection_api.py 檔案
```shell=
exit
sudo rm object_detection_api.py
cd ssd_mobilenet_v1_coco_2017_11_17
sudo rm frozen_inference_graph.pb
cd 
sudo cp frozen_inference_graph.pb /var/www/html/tfObjWebrtc/ssd_mobilenet_v1_coco_2017_11_17
sudo cp labelmap.pbtxt /var/www/html/tfObjWebrtc/object_detection/data
sudo cp object_detection_api.py /var/www/html/tfObjWebrtc/
cd /var/www/html/tfObjWebrtc/
```
## 會遇到的狀況
* No op named GatherV2 in defined operations.
* Tensorflow的版本不合『docker的Tensorflow的版本 != 訓練時的Tensorflow的版本』
## 要改docker下面的Tensorflow的版本
* 改成你訓練時的Tensorflow的版本，pip install tensorflow==XXX

```shell=
sudo docker rm tf-webrtchacks
sudo docker run -it -p 5000:5000 --name tf-webrtchacks -v $(pwd):/code chadhart/tensorflow-object-detection:webrtchacks
pip install tensorflow==1.9.0
python server.py 
```

## 執行'object_detection_api_test.py'會遇到這個問題
* Attempted to use a closed Session
* 參考 https://www.twblogs.net/a/5b8c36e52b71771883315b6d
* session 執行後會關閉,導致server.py內的程式碼get_objects的function 沒辦法執行所以要把session的程式碼改到get_objects內
* 改object_detection_api.py 這個檔案內的get_objects
# 套用 3D 圖檔
```shell=
cd /var/www/html/tfObjWebrtc/static
sudo git clone https://github.com/SamsungInternet/ar-demos.git
sudo git clone https://github.com/jphone0921/3d.git
sudo rm objDetect.js
sudo rm local.html
cd  /var/www/html/tfObjWebrtc/static/3d
sudo cp objDetect.js ..
sudo cp local.html ..
```
# 後製鏡頭
參考資料
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*  local.js 的video改成以下

```shell=
video: {
        width: {min: 640, ideal: 1280, max: 1920},
        height: {min: 480, ideal: 720, max: 1080},
        facingMode:"environment"
    }
```

## 改鏡頭左右相反問題
* 修改 local.html 中的 -webkit-transform: scale(1, 1);

參考資料
https://tympanus.net/codrops/css_reference/scale/


# 運行
* 要先移除docker
* 在執行docker
```shell=
python server.py 
http://localhost:5000/local  chrome需https  (火狐不用)
http://localhost:5000/video   狗狗
```
```shell=
sudo docker rm tf-webrtchacks
cd /var/www/html/tfObjWebrtc/
sudo docker run -it -p 5000:5000 --name tf-webrtchacks -v $(pwd):/code chadhart/tensorflow-object-detection:webrtchacks
pip install tensorflow==1.9.0
python server.py
```
# 結果
當辨識到撲克牌的時候，會相對應的出現其數字而在螢幕上顯示POKEMON。
EX: 數字9  > 皮卡丘